Урок 4 — Мобильная версия

В этом уроке мы будем прописывать стили для мобильной версии.

Мобильная версия определяется шириной экрана.

Как определить ширину экрана с помощью 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;
 }

Вот и все, теперь у нас полноценная мобильная версия сайта

Полный пример можно посмотреть ТУТ