В этом уроке мы будем прописывать стили для мобильной версии.
Мобильная версия определяется шириной экрана.
Как определить ширину экрана с помощью CSS
@media only screen and (max-width: 768px) {
section h3{
font-size: 25px;
}
}
Выше, мы задали стиль заголовку. Он сработает, если ширина устройства будет 768px или меньше
Попробуем теперь преобразовать наш сайт, под мобильную версию
<button class="toggle-btn">Open</button>
Для начало добавим кнопку, чтобы можно было открывать меню на мобильной версии
.toggle-btn{
display: none;
}
@media only screen and (max-width: 768px) {
.toggle-btn{
display: block;
float: right;
margin: 25px;
border: none;
padding: 7px 20px;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
}
header nav{
display:none;
}
section{
padding: 0 15px;
}
section h3{
font-size: 25px;
}
section p{
font-size: 15px;
}
}
Первым делом, на обычной версии сайта, мы сделали кнопку невидимой
Что мы сделали на мобильной версии:
- Сделали кнопку видимой, и немного украсили
- Скрыли меню
- Увеличили отсуп у контента, чтобы он небыл впритык с экраном
- Уменьшили размер текста
Скопировав этот код в jsfiddle, вы можете посмотреть изменения, уменьшая ячейку.
Подключение jQuery на сайт
Чтобы наша кнопка работала, нужно как то определить, в какой момент на кнопку нажали и если нажали, то что должно произойти
К сожалению, на чистом CSS, такое сделать нельзя. Для этого мы должны воспользоваться языком javascript.
Сам по себе javascript достаточно сложный для новичка, чтобы упростить задачу, мы воспользуемся jQuery
jQuery — Это фрэймворк(инструмент) для javascript, который облегчает задачу, укорачивает длину кода
Попробуем написать 2 абсолютно одинаковых функции на javascript и на jQuery
Пример на чистом javascript
var button = document.getElementsByClassName('toggle-btn');
var nav = document.getElementsByTagName('nav');
var show = function (elem) {
elem.style.display = 'block';
};
var hide = function (elem) {
elem.style.display = 'none';
};
var toggle = function (elem) {
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}
show(elem);
};
for(var i = 0; i < button.length; i++) {
(function(index) {
button[index].addEventListener('click', function() {
for (var i = 0; i < nav.length; i++) {
toggle(nav[i]);
}
})
})(i);
}
Пример на чистом jQuery
$(function(){
var button = $('button');
var nav = $('nav');
$('button').on('click', function(){
nav.toggle();
});
});
Чувствуете разницу?
Функция определяет нажатие на кнопку button, и если меню показывается, то при нажатии оно закроется и наоборот, если оно закрыто, то оно откроется. Чуть позже разберем подробнее.
Подключаем jQuery
Есть 2 варианта, скачать файл и поключить, либо воспользоваться CDN, мы воспользуемся CDN, так как это быстрее
Для этого нам надо перейти на jquery, выбрать версию и скопировать код
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
Если вы все таки решили скачать jQuery как файл, то вместо src="#" прописываете путь к файлу
Javascript лучше всего вставлять в конце html, тогда страница будет прогружаться быстрее
<footer>
<p>© 2018 All Rights Reserved</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
var button = $('button'); // Создаем переменную button и присваеваем ей тэг button
var nav = $('nav'); // Создаем переменную nav и присваеваем ей тэг nav
button.on('click', function(){ // При клике на кнпоку
nav.toggle(); // Показываем/скрываем меню
});
});
</script>
</body>
</html>
Осталось изменть меню для мобильной версии
header nav{
display:none;
position: absolute;
top: 80px;
background: #f5f5f5;
width: 100%;
}
header nav li {
display: block;
}
Вот и все, теперь у нас полноценная мобильная версия сайта
Полный пример можно посмотреть ТУТ
ВЫ считает что между закрывающими тегами footer и body сработает без ошибок код без обёртки?
Код js без обёртки
Спасибо, исправил