Мобильное меню для сайта


Одна из самых важных частей сайта на которую необходимо обратить внимание это навигация. Мобильное меню для сайта расширяет возможность комфортной навигации по сайту пользователей мобильных устройств, которых с каждым годом становиться все больше и больше.

Существует множество способов сделать адаптивное меню с помощью jQuery плагинов. Но мы пойдем по другому пути и будем использовать CSS3 media queries и код на jQuery. Давайте начнем.

Мобильное меню для сайта html код

Прежде всего, давайте добавим meta viewport внутри тега head. Этот тег необходим для правильного масштабирования нашей страницы на мобильных устройствах.

А затем добавьте следующий фрагмент кода в качестве разметки меню внутри тега body.

Как вы можете видеть выше у нас есть 6 пунктов меню и ссылка после тега ul. Эта ссылка будет открывать мобильное меню сайта на маленьких устройствах.

Css стилизация меню

В этой части статьи мы начнем стилизацию меню. Стиль будет не идеальный, и вы можете выбрать любые цвета и дизайн по вашему желанию. В нашем примере будет у body кремовый цвет.

Тэг nav


, который определяет навигацию, будет иметь ширину 100%, в то время как ul, который содержит наши основные ссылки меню, будет 600px в ширину и выровнен по центру окна браузера.

Теперь мы выровняем элементы меню горизонтально друг за другом, после их выравнивания произойдет float collapse родительского элемента.

Выше в разметке HTML вы могли заметить класс clearfix в nav и ul, этот класс был добавлен для того что бы решить проблему с float элементами, эта техника называется CSS clearfix. Итак, добавим следующие правила в таблицу стилей.

Так как у нас шесть пунктов меню, и мы задали контейнеру ul width: 600px, у каждой ссылки меню будет ширина 100px.

Пункты меню будут разделены между собой правой рамкой размером 1px, кроме последнего. Исходя из простой блочной модели, рамка увеличит наш элемент на 1px и его ширина будет равна 101px. Чтобы это исправить и рамка не входила в ширину ссылки необходимо ей добавить css правило box-sizing:border-box;

Далее добавим стили для состояния ссылки :hover и :aсtive

И последнее что мы сделаем это скроем элемент на больших разрешениях, который будет открывать мобильное меню сайта.

На данном этапе мы только задали основные стили для меню, и при уменьшении окна браузера или просмотра с мобильных устройств ничего происходить не будет. Давайте перейдем к следующему шагу.

Мобильное меню для сайта на большом экране

CSS медиа запросы для меню


CSS3 медиа запросы используются для определения стилей для разных устройств, а так же в контрольных точках. К примеру на телефонах это от 320px до 767px, планшеты до 1024px.

Нашей первой контрольной точкой будет ширина 600px и меньше. Так как ширина меню 600px и при большем разрешении все будет выглядеть хорошо.

Когда ширина экрана будет равна 600px нам нужно задать ширину ul 100%, а элементы меню разместить друг за другом в две колонки. Ширина каждого будет равна 50% от ширины ul.

меню для мобильной версии сайта css

Следующее что мы сделаем это определим как себя будет вести меню на экранах меньше 480px, это будет нашей второй контрольной точкой.

На этом разрешении мы сделаем видимым ссылку с id=’pull’, которую мы добавили и скрыли ранее. Добавим ей немного стилей с помощью псевдоэлемента ::after. А элементы меню будут скрыты для более компактного отображения меню.

выпадающее меню для мобильной версии сайта

И наконец когда экран равен или меньше 320px элементы меню будут расположены по горизонтали сверху в низ, и ширина будет равна 100%.

Теперь мы можем уже проверить адаптивность меню в браузере. Последнее что осталось это заставить меню открываться и закрываться по нажатию ссылки с id=’pull’.


jQuery код для мобильного меню.

На данный момент меню по-прежнему будет скрыто и будет отображаться только тогда, когда это необходимо, по тапу или щелчку ссылки «Меню», и мы сможем добиться этого, используя jQuery функцию slideToggle().

Далее нам нужно исправить небольшой bug, когда вы изменяете размер окна браузера сразу после того, как вы только что просмотрели и спрятали меню на маленьком экране, меню останется скрытым. Итак, удалить стиль который скрывает меню при изменении размера окна можно при помощи кода ниже:

Вот и все, этого кода вам будет достаточно для того что бы создать простое мобильное меню для сайта. Существует множество более сложных техник для реализации навигации. Это меню является всего лишь показательным примером как реализовывать подобные вещи. Вы можете его доработать и изменять под свои нужды.

comments powered by HyperComments

webupblog.ru

Вы хотели бы создать меню, адаптированное под мобильные устройства? Трафик мобильных устройств уже давно превышает десктопный на многих ресурсах. Добавление мобильного адаптивного меню существенно упрощает навигацию для пользователей вашего сайта. В этой статье мы покажем вам как легко создать адаптивное меню под мобильные устройства в WordPress.


mobileresponsivemenu[1]
В статье мы покажем как реализовать задуманное с помощью плагина (для новичков, без кода), а также — с помощью кода для более продвинутых пользователей.

В конце материала вы научитесь создавать выезжающее мобильное меню, выпадающее, а также раскрывающееся меню под моб.устройства.

Готовы? Начинаем.

Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина

Этот способ достаточно простой и рекомендуется для новичков, т.к. не потребует добавления кода.

Здесь мы будем создавать меню-бутерброд, которое выезжает на мобильных разрешениях экрана.

rpmenuplugin[1]

Первым делом вам потребуется установить и активировать плагин Responsive Menu.

После активации плагин добавит новый элемент меню под названием ‘Responsive Menu’ в админбар. Нажав на него, вы окажетесь на странице настроек плагина.


responsivemenusettings[1]

Для начала потребуется указать ширину экрана, при которой плагин начнет отображать адаптивное меню. Значение по-умолчанию установлено в 800px, и оно подойдет для большинства сайтов.

После этого нужно выбрать меню, которое нужно использовать для вашего адаптивного меню. Если же вы еще не создали меню, тогда сделать это можно на странице Внешний вид » Меню.

Последней опцией на экране будет указание CSS класса для вашего текущего НЕ адаптивного меню. Это позволит плагину скрывать ваше не адаптивное меню на маленьких экранах.

Не забудьте нажать на кнопку ‘Update Options’ для того, чтобы сохранить изменения.

Теперь переходим на сайт и изменяем размер окна браузера для того, чтобы увидеть адаптивное меню в действии.

rpmenuplugin[1]

В плагине есть множество других полезных опций, которые позволят вам изменять поведение и внешний вид адаптивного меню.

Способ 2: Добавляем меню в виде выпадающего списка с помощью плагина

Еще одним способом добавления адаптивного меню является добавления меню в виде выпадаюшего списка. Этот способ также не потребует знания кода, поэтому и рекомендуется для новичков.


selectmenu[1]

Для начала вам потребуется установить и активировать плагин Responsive Select Menu.

После активации переходим в Внешний вид » Responsive Select для настроки плагина.

selectmenu[1]

Прокручиваем до раздела ‘Activate theme locations’. По-умолчанию, плагин активируется для всех расположений меню в теме. Можно изменить это поведение, оставив его только для нескольких областей.

Не забудьте нажать на кнопку сохранения изменений.

Теперь переходим на свой сайт, меняем размер браузера для того, чтобы увидеть меню в виде выпадающего списка.

Способ 3: Создаем адаптивное мобильное меню с раскрывающимся (toggle) эффектом

Одним из самых часто используемых способов вывода меню на мобильные экраны является использование раскрывающегося эффекта.

Способ предполагает добавление кода в файлы вашей WordPress темы.

Для начала открываем текстовый редактор типа Блокнот и вставляем этот код:

Теперь сохраняем этот файл как navigation.js на своем компьютере.

Далее, открываем FTP-клиент для того, чтобы загрузить этот файл в папку /wp-content/themes/your-theme-dir/js/ вашего сайта.

Замените your-theme-directory на папку вашей текущей теме. Если же в ней нет папки js, то потребуется ее создать.

После загрузки JavaScript файла, нужно будет подключить на сайт. Добавляем код в файл functions.php вашей темы или в плагин для сайта WordPress:

Теперь добавляем меню навигации в свою тему WordPress. Обычно меню навигации добавляется в файл header.php темы.


[/php]

Предполагается, что расположение меню в вашей теме называется primary. Если это не так, тогда используйте положение меню, определенное в вашей теме.

Последним шагом будет добавление CSS, чтобы наше меню использовало правильные CSS классы для раскрытия на мобильных устройствах.

  /* Меню навигации */  .main-navigation {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	text-align: center;  }  .main-navigation li {  	margin-top: 24px;  	margin-top: 1.714285714rem;  	font-size: 12px;  	font-size: 0.857142857rem;  	line-height: 1.42857143;  }  .main-navigation a {  	color: #5e5e5e;  }  .main-navigation a:hover,  .main-navigation a:focus {  	color: #21759b;  }  .main-navigation ul.nav-menu,  .main-navigation div.nav-menu > ul {  	display: none;  }    .main-navigation ul.nav-menu.toggled-on,  .menu-toggle {  	display: inline-block;  }    // CSS для использования на мобильных устройствах    @media screen and (min-width: 600px) {    .main-navigation ul.nav-menu,  	.main-navigation .  

avigation li a:hover, .main-navigation li a:focus { color: #000; } .main-navigation li { margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; } .main-navigation li ul { margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .main-navigation li ul ul { top: 0; left: 100%; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul { border-left: 0; clip: inherit; overflow: inherit; height: inherit; width: inherit; } .main-navigation li ul li a { background: #efefef; border-bottom: 1px solid #ededed; display: block; font-size: 11px; font-size: 0.785714286rem; line-height: 2.181818182; padding: 8px 10px; padding: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; white-space: normal; } .main-navigation li ul li a:hover, .main-navigation li ul li a:focus { background: #e3e3e3; color: #444; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a { color: #636363; font-weight: bold; } .menu-toggle { display: none; } }

Теперь переходим на свой сайт и изменяем размер браузера для того, чтобы увидеть адаптивное раскрывающееся меню в действии.

togglemenu[1]

Возможные проблемы: В зависимости от вашей WordPress темы вам потребуется поправить CSS.

Способ 4: Добавляем выезжающее мобильное меню в WordPress

Еще одной распространенной техникой добавления мобильного меню является использование выезжающей панели меню (как показано в Способе 1).

Способ 4 предполагает добавление кода в файлы вашей темы, и это способ такой же реализации меню как в Способе 1.

Для начала открываем текстовый редактор типа Блокнот и добавляем код в пустой текстовый файл.

  (function($) {  $('#toggle').toggle(   function() {   $('#popout').animate({ left: 0 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   },   function() {   $('#popout').animate({ left: -250 }, 'slow', function() {   $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');   });   }  );  })(jQuery);  

Не забудьте заменить example.com на название своего домена, и your-theme на вашу текущую тему. Сохраняем этот файл под именем slidepanel.js на компьютере.

Теперь нам понадобится изображение, которое будет использоваться для иконки меню. Значок гамбургера является наиболее часто используемым для этих целей. Такого рода изображений вы сможете найти на различных сайтах. Мы будем использовать значок для меню из библиотеки Google Material Icons.

Когда вы найдете картинку, которую будете использовать, сохраните её под именем menu.png.

Далее, открываем FTP-клиент и загружаем файл slidepanel.js в папку /wp-content/your-theme/js/.

Если в папке с вашей темой нет директории JS, тогда нужно будет создать ее и затем загрузить файлы.

После этого заливаем файл menu.png в папку /wp-content/themes/your-theme/images/.

Как только файлы будут загружены, нам нужно будет убедиться в том, что ваша тема подгружает файл JavaScript, который только что был добавлен. Для этого мы воспользуемся специальной функцией WordPress.

Добавляем следующий код в файл functions.php темы:

  wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );  

Теперь нам нужно добавить код вывода меню навигации в файл header.php темы. Вам потребуется найти примерно такой код:

  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  

Код нужно будет обернуть в HTML код для вывода выезжающего меню на маленьких экранах.

  <div id="toggle">  <img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Показать" /></div>  <div id="popout">  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>  </div>  

Обратите внимание, что меню навигации вашей темы осталось на месте. Мы всего лишь обернули его в HTML, который нужен для реализации задуманного меню.

Последним шагом будет добавление CSS для того, чтобы скрывать картинку меню на больших экранах. Также вам потребуется настроить расположение значка меню.

Ниже приведен пример CSS, который можно использовать для начала:

  @media screen and (min-width: 769px) {  #toggle {  display:none;  }    }    @media screen and (max-width: 768px) {  #popout {  position: fixed;  height: 100%;  width: 250px;  background: rgb(25, 25, 25);  background: rgba(25, 25, 25, .9);  color: white;  top: 0px;  left: -250px;  overflow:auto;  }    #toggle {  float: right;  position: fixed;  top: 60px;  right: 45px;  width: 28px;  height: 24px;  }    .nav-menu li {  border-bottom:1px solid #eee;  padding:20px;  width:100%;  }    .nav-menu li:hover {  background:#CCC;  }    .nav-menu li a {  color:#FFF;  text-decoration:none;  width:100%;  }  }  

В зависимости от вашей WordPress темы вам может потребоваться настроить CSS для избежания конфликтов.

Вот как меню будет примерно выглядеть:

responsivemenudemo-1[1]

Мы надеемся, что эта статья помогла вам научиться создавать адаптивное меню под мобильные устройства в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

wpincode.com

Меню для больших экранов

Для начала сверстаем обычное меню для «большого» разрешения (в нашем случае это будет разрешение экрана 1000px и больше). Для этого создадим следующую структуру HTML:

  <div class="menu">   <div class="menu__links">   <a class="menu__links-item" href="/">Item 1</a>   <a class="menu__links-item" href="/">Item 2</a>   </div>  </div>  

И добавим необходимые стили:

  .menu {   text-align: right;  }    .menu__links-item {   display: inline-block;   color: #333333;   font-family: Arial;   font-size: 14px;   line-height: 30px;   padding: 0 10px;   text-transform: uppercase;   text-decoration: none;  }    .menu__links-item:hover {   text-decoration: underline;  }  

Пока все просто. Мы добавили два пункта меню и стилизовали их так, как нам нужно.

Адаптация для мобильных устройств

На втором шаге нам нужно добавить иконку гамбургера и сделать так, чтобы на мобильных устройствах меню открывалось по клику на эту иконку. На экранах шириной более 1000px должно отображаться обычное меню.

В HTML структуру добавим иконку:

  <div class="menu__icon">   <span></span>   <span></span>   <span></span>   <span></span>  </div>  

И напишем для нее стили:

  .menu__icon {   display: none;   width: 45px;   height: 35px;   position: relative;   cursor: pointer;  }    .menu__icon span {   display: block;   position: absolute;   height: 9px;   width: 100%;   background: #333333;   border-radius: 9px;   opacity: 1;   left: 0;   transform: rotate(0deg);   transition: .25s ease-in-out;  }    .menu__icon span:nth-child(1) {   top: 0px;  }    .menu__icon span:nth-child(2), .menu__icon span:nth-child(3) {   top: 13px;  }    .menu__icon span:nth-child(4) {   top: 26px;  }  

Обратите внимание на правило display: none; для класса .menu__icon — по умолчанию иконка должна быть не видна.

Для маленьких экранов добавим дополнительные правила: во-первых, нам нужно показать иконку, во-вторых — доработать стили и скрыть меню, в-третьих, добавить стили для элементов меню:

  @media screen and (max-width: 999px) {   .menu__icon{   display: inline-block;   }      .menu__links {   position: fixed;   display: block;   top: 0;   right: 0;   left: 0;   margin-top: 52px;   background-color: rgba(0, 0, 0, 0.8);   z-index: 1000;   overflow: auto;   }      .menu__links-item {   display: block;   padding: 10px 0;   text-align: center;   color: #ffffff;   }  }  

Теперь верстка меню работает как нужно, остался последний шаг — показывать меню при клике на иконку.

Реализация логики меню

Чтобы показать меню при клике на иконку, добавим немного JavaScript’а.

  (function($){   $(function() {   $('.menu__icon').on('click', function() {   $(this).closest('.menu').toggleClass('menu_state_open');   });   });  })(jQuery);  

Для простоты мы использовали jQuery, вы же, если захотите, можете реализовать ту же логику на своем фреймворке или на чистом JavaScript. В коде выше мы всего лишь переключаем класс .menu_state_open у элемента .menu при нажатии на иконку.

И наконец, добавим стили для открытого состояния меню:

  .menu.menu_state_open .menu__icon span:nth-child(1) {   top: 18px;   width: 0%;   left: 50%;  }    .menu.menu_state_open .menu__icon span:nth-child(2) {   transform: rotate(45deg);  }    .menu.menu_state_open .menu__icon span:nth-child(3) {   transform: rotate(-45deg);  }    .menu.menu_state_open .menu__icon span:nth-child(4) {   top: 18px;   width: 0%;   left: 50%;  }    .menu.menu_state_open .menu__links {   display: block;   }  

Для открытого состояния меню мы задаем нулевую ширину верхней и нижней полоске гамбургера, а две средние поворачиваем на 45 градусов так, чтобы они образовывали крестик (именно поэтому центральную полоску образуют два элемента span, расположенные друг над другом).

В текущем варианте ссылки в меню имеют атрибут href и ведут на новую страницу. Но такое меню может работать и без перезагрузки страницы, для этого нужно добавить обработчик клика по ссылке, выполнить какое-то действие в этом обработчике и удалить класс .menu_state_open у элемента .menu:

See the Pen Responsive Menu 2 by Ekaterina Nazarova (@katienazarova) on CodePen.

Заключение

В этом уроке мы сверстали адаптивное меню, сворачивающее в гамбургер на маленьких экранах. В зависимости от требований дизайна вы можете стилизовать его по своему усмотрению, но общий принцип останется тем же.

  • Пример с переходом на новую страницу
  • Пример без перезагрузки страницы

getinstance.info

Мобильная версия для сайта стала основополагающим критерием при разработке любого современного проекта. Оптимизировать сайт под планшеты и телефоны не так сложно, однако встречаются задачи, с которыми тяжело справиться — например, как сделать адаптивным меню на сайте для смартфона, когда в нем еще много подменюшек? — ответ прост — использовать select меню на JQuery.

Представляю уникальный скрипт с помощью которого вы легко сможете сделать красивое выпадающее меню для любого сайта. В нем вы можете настроить внешний вид как пожелаете. Работает следующим образом: когда ширина экрана 760 px (можно изменить) — основное меню исчезает, а мобильное появляется. См. скриншоты:

Мобильное меню для сайта Мобильное меню для сайта Мобильное меню для сайта

Возможности мобильного меню:
— для работы надо указать селектор ul меню
— строится сразу после ul меню
— строит подменю
— показывает выбранный пункт меню
— возможность создавать бесконечное число таких меню

Установка меню:
1. Проверьте, что у вас есть запись для мобильного контента <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> между тегами <head></head>. Если ее нет — ставьте.
2. Если у вас не подключена библиотека jquery — подключайте jquery-1.9.1.min.js (идет с архивом)
3. Запомнтие класс или id вашего изначального ul меню (например: <ul id=»menu-top-menu»> — значит id = menu-top-menu) и вставьте запись типа:
jQuery(function(){jQuery(‘#menu-top-menu’).mobileMenu({defaultText: «Навигация по сайту»});}); — чтобы запустить мобильное меню

Для демонстрации уменьшите размер экрана моего сайта до 760px — появится select меню — также будет работать и у вас!

Более подробную информацию об уставке с моими комментариями вы найдете в архиве + рабочий скрипт меню без мусора

Скачать JQuery select мобильное меню:

blogprogram.ru

Сегодня мы будем создавать красочные CSS3 меню в цветовом стиле Maliwan. Главная особенность этого современного меню, состоит в том, что оно автоматически меняется на одну из трех версий в зависимости от размера окна браузера: версия по умолчанию для больших экранов, версия для планшетов в две колонки и мобильная версия меню со ссылкой отображения и скрытия навигации для небольших экранов. Также есть ещё выдвигающееся меню, которое можно увидеть в статье “Выдвигающееся меню навигации на JQuery”.

Чтобы сделать меню полностью практичным, мы будем использовать в качестве иконок шрифт, поэтому с ними проблем не будет, они будут отлично изменяться под версию меню.

Подготовка иконок для шрифта

Создание собственного шрифта иконок может показаться сложным, но с такими инструментами, как IcoMoon это просто вопрос создания икон. Шрифт иконок ведет себя как любой обычный шрифт, так что вы можете легко изменить его цвет, адаптировать размер. Идеально подходит для мобильных устройств, без необходимости использовать несколько свойств для разных разрешений экрана.

Первое, что нам нужно сделать, это создать иконки для меню. Я использую иллюстратор, но любой другой векторной редактор графики, например, Inkscape, также подойдет. Нам нужно создать значки и экспортировать их в виде файлов SVG. Чтобы убедиться, что значок будет правильно работать во всех браузерах, мы должны преобразовать все строки в объект и объединить все объекты в одну большую форму для каждой иконки. После того как мы имеем SVG файлы, мы можем импортировать их в инструмент App IcoMoon:

импорт в icomoon

Мы также можем расширить количество иконок нашего шрифта, используя подборку, которую предлагает IcoMoon. После того как у нас есть все необходимые иконки, мы нажимаем на кнопку "FONT→" в нижней части страницы, чтобы войти в подробные настройки. На этой странице мы можем выбрать параметры кодирования для шрифта, а также выбрать, если мы хотим назначить свои буквы, слова для вывода иконок. Я рекомендую использовать параметры по умолчанию, всё работает отлично.

создание шрифта

Когда мы нажимаем на кнопку "Download", мы получаем ZIP файл и 4 формата шрифтов (SVG, EOT, TTF и WOFF), стили CSS и демонстрационную страницу.

Первое, что нужно сделать, чтобы шрифты работали, это подключить все необходимое, а также скопировать папку шрифтов. Там также нужно немного “допилить” его, чтобы шрифты хорошо выглядели на Chrome ОС Windows. В общем получится у Вас что-то вроде этого:

Но Вы естественно используете свои пути к шрифтам и так далее, в общем с этим, я думаю, понятно.

Начинаем работу с HTML

Структура html для меню будет выглядеть следующим образом:

Для активации шрифта иконок мы просто используем класс icon-iconname внутри элемента i . Также обратите внимание, что мы добавили класс no-js, но он будет изменен на js с помощью Modernizr. Идея состоит в том, чтобы иметь возможность доступным меню, если пользователь отключил JavaScript. Мы будем также использовать Modernizr для обнаружения сенсорной поддержки.

Прелести CSS и JAVASCRIPT

Глобальные CSS стили, которые будут применяться для всех размеров экрана выглядят следующим образом:

Мы хотим чтобы при наведении на один из пунктов меню, он выдвигался немного вниз, а остальные немного затемнялись.

Далее мы хотим добавить интересные цвета фона для всех элементов. Приведенный ниже код использует nth-child технику для выбора элементов списка. Таким образом, вы можете добавлять много элементов списка и при этом цветовой код будет повторятся.

Использование min-width, будет ориентироваться на экраны, которые больше, чем 800px (50em, с размером шрифта 15px) для преобразования нашего списка в современное горизонтальное меню навигации:

Мы продолжаем работу над nth-child техникой, и добавим 4px border-bottom. Мы применяем его при наведении курсора мыши, при фокусе и активации, чтобы заставить его работать на сенсорных устройствах.

Затем мы размещали иконки и текст:

Также мы используем эффект анимации при наведении и немного увеличиваем высоту элемента.

Теперь мы позиционируем иконки и подготавливаем их к CSS transition:

Чтобы задать визуальный эффект, мы изменяем размер тени с 0.8em до 0, а его цвет от прозрачного до цвета с высокой непрозрачностью.

Мы устанавливаем второй запрос media-jquery, чтобы сделать небольшую корректировку для экранов от 800px до 980px:

Мобильная версия меню, для планшетов и мобильных устройств

Теперь, когда мы закончили с обычными настольными версиями (в том числе и для планшетов, с разрешением 1024px и более), мы продумаем “глобальные” CSS стили для экранов, которые меньше 800px, что составляет 49.938em, используя max-width.

Для размеров экрана между 520px (32.5em) и 799px (49.938em), мы показываем наше меню в 2 столбца и 3 строки. Мы добавили немного отступа padding, чтобы сделать его юзабельным, и отображения иконок слева, а текста справа.

Анимация, которую мы сделали для больших экранов, слишком сложна, чтобы вписаться в небольшое разрешение, поэтому мы адаптируем его и сделаем более простым, более сдержанным, но добавим креативности с помощью border.

Опять же, для небольших экранов мы адаптируем размер шрифта и ширину.

Для очень маленьких экранов, мы прячем навигацию и отображаем кнопку "Меню". Пользователь может нажать, если он хочет отобразить и увидеть меню. Чтобы сделать это, мы опираемся на несколько строк JavaScript:

Для того чтобы иметь более чистый HTML, я решил создать кнопку “Меню” и вставить её с использованием JavaScript. Функция changeClass служит нам для переключения между активными классами, когда пользователь нажимает на кнопку.

Теперь у нас есть все, что нужно для малых экранов. Следующие стили код кнопки меню:

По умолчанию, кнопка меню скрыта. Мы хотим отображать её только для экранов, размером не более 519px (32.438em):

Мы анимируем высоту навигации, когда кнопка нажата. Для закрытия навигации, мы даем ему высоту 0em, а чтобы открыть его, мы даем max-height 30em. Если JavaScript не включен, мы кнопку не отображаем, а просто используем класс no-js, для постоянного отображение меню.

Когда JavaScript на стороне пользователя включен, по умолчанию мы скрываем меню, и показываем его, когда пользователь нажимает на кнопку, которая затем получает active класс:

Мы адаптируем навигацию для небольших экранов, представляя её списком со значком слева и текстом с правой стороны:

Мы также добавляем 8px границы border слева от каждого элемента, с ярким цветом:

Навигация выглядит хорошо при тестировании на больших экранах. Но на мобильных устройствах, элементы меню могут быть не эффективны, точнее не юзабельны. Использование Modernizr поможет обнаружить сенсорное устройство. Если устройство имеет сенсор, то мы добавляем класс touch. Мы можем использовать этот класс для повышения точности нажатия, чтобы пользователь мог легко нажать на выбранный пункт меню. И вот мы закрываем последний media запрос.

И это все, что было необходимо для создания приятного, современного меню, которое будет отлично работать как на настольных компьютерах, так и на планшетах и мобильных устройствах с маленьким разрешением экрана. Надеюсь Вам понравилось!

vladmaxi.net

Адаптируем горизонтальное меню

В первой части видео показывал, как можно реализовать горизонтальное меню при помощи display:flex;, данное видео продолжение, и тут будем адаптировать горизонтальное меню под мобильные устройства. Рекомендую посмотреть видео по Media queries CSS на базе которого будем проводить адаптацию.

See the Pen NwOREZ by Denis (@Dwstroy) on CodePen.

В видео уроке задействуем:

  • Дополним верстку мета тегом <meta name=»viewport» …>
  • Задействуем input с атрибутом type=»checkbox»;
  • Используем label с атрибутом  for=»…..» для отслеживания клика;
  • Воспользуемся медиа запросом @media all and (max-width: 800px);
  • И для анимации применим transition;

Определяемся, какой хотим достичь результат.

Нам нужно, что бы меню на маленьких расширений экрана менее 800 пик. по ширине, переводилось в одну строку, содержание его пунктов скрывалось, появлялась кнопка с «МЕНЮ» и иконкой. По нажатию на кнопку будем отображать весь список с соответствующими иконками. У разделов включенные в себя подменю добавим иконку в виде треугольника, символизирующая, что там есть подразделы, а по нажатию на данный раздел с иконкой, разворачивается вложенный список, по второму клику вкладки будем сворачивать.

горизонтальное меню под мобильное устройство

Суть я думаю, вы уловили, и по окончанию урока мы получим такой результат.

Мобильная версия горизонтального меню

Скачиваем и подготавливаем код

Скачаем с предыдущего урока код горизонтального меню «Выпадающее меню на чистом CSS / HTML». Перенесем его в свою среду разработки, в моем случае использую PhpStorm, в группе VK найдете на этот редактор ссылку, скачивайте, устанавливайте и пользуйтесь https://vk.com/topic-70729755_35330805.

И так, откроем index.html страницу, включим режим просмотра для мобильных устройств и на текущий момент видим, горизонтальное меню не адаптировано и нам предстоит с этим поработать.

Урок как сделать адаптивное меню

Я первым делом создам отдельный файл, где буду описывать код мобильного меню. Это поможет в дальнейшем избежать путаницы и Вам будет проще ориентироваться в написанных стилях.

В директории CSS создаем media.css. В Index.html подключаем данный файл, обязательно обратите внимание, что бы он находился ниже основного стиля, так как в первую очередь, подгружаем style.css, а затем уже media.css для адаптации горизонтального меню. 

<link rel="stylesheet" href="css/media.css" type="text/css">    

Так как будем адаптировать меню под мобильные устройства воспользуемся мета тегом viewport со следующими атрибутами, name=»viewport» и content=»width=device-width, initial-scale=1″. Прописываем тег в самом верху после UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1">   

Данный мета тег помогает настроить адаптивность сайта под мобильные устройства, но также с помощью его можно улучшить представления веб-страниц имеющие фиксированную или гибкую разметку.

Давайте более подробнее разберем его составляющую:

Атрибут name указывает браузеру что данная страница касается информации viewport, то есть это видимая область пользователю веб-страницы. Та область, которая в свою очередь видна без прокрутки.

Второй атрибут данного тега content имеет пару ключей со своими значениями.

Параметр width со значением device-width отвечает за ширину видимой области, что бы она равнялась ширине устройства, а второй параметр initial-scale устанавливает первоначальный масштаб веб-страницы. Значение 1 означает, что масштаб равен 100%.

Так же у этого тега есть другие параметры, но в рамках данного урока они нам не понадобятся, нам достаточно этих данных что бы адаптировать меню.

Описываем CSS стили под мобильные устройства

Переходим в media.css, в нем опишем медиа запрос под расширения менее 800 пик.  Пишем стандартную конструкцию media запроса. Основному блоку меню с классом .dws-menu добавляем overflow: hidden; для того чтобы сформировать отступ от краев.

@media all and (max-width: 800px) {   .dws-menu{   overflow: hidden;   }  }   

В принципе идея следующая, на небольших экранах, скрывать базовое меню, а в место него отображать input и label. Когда пользователь кликает на label, основное меню показывается под ним.

горизонтальное меню

Есть и другие варианты реализации данной идее, можно скрывать и отображать при помощи JS скрипта, но в этом случае идет дублирование кода и не во всех браузерах удается его стилизовать. К тому же у нас урок по CSS и будем придерживаться данной темы.

Я разделяю написание кода на три этапа:

  • в первом этапе описываем его основную структуру, и стили;
  • во втором этапе анимируем;
  • и заключающим третьим этапом, предаем красивое оформление.

Идею я думаю вы поняли, и приступим к описанию кода.

Предварительно выстроим меню в вертикальном виде, для этого достаточно сделаем UL блочным элементом.

.dws-menu ul{   display: block;   }   

простое адаптивное меню

Теперь добавим в верстку сайта следующие селекторы input и label с использованием checkbox, который будет принимать щелчок  и отображать меню.

Перед списком вставляем input, в нем прописываем атрибут type со значением checkbox, дадим имя, обязательно присвоим ID при помощи которого label будет отслеживать нажатие по данному селектору. Далее присвоим инпуту класс, для его дальнейшего оформления.

Затем опишем  label, у которого основная функция отследить клик по определенному input, в нем обязательно пропишем атрибут for со значением ID с input, присвоим свой класс для стилилизации, а в нутрии прописываем иконку, которую возьмем из подключенных нами до этого шрифтов.

<input type="checkbox" name="toggle" id="menu" class="toggleMenu">  <label for="menu" class="toggleMenu"><i class="fa fa-bars"></i>Меню</label>   

Далее переходим в медиа стили и приступим к их оформлению.

Скроем полностью checkbox в блоке .dws-menu, они нам тут не понадобятся. Пропишем их выше основных стилей так как к @media запросам они не относятся.

.dws-menu [type="checkbox"]{   display: none;  }   

Затем стилиллизуем кнопку label, код опишем выше @media запроса, что бы эти стили применялись изначально когда страничка загрузилась.

Отбираем кнопку .dws-menu label.toggleMenu, задаем задаем ей цвет background: #C9C9C9;, и делаем кнопку блочным элементом, что бы она приняла форму данного меню.

.dws-menu label.toggleMenu{   background: #C9C9C9;   display: block;  }   

Приводим ее к внешнему виду, как выглядят основные кнопки. Для этого сделаем внутренние отступы padding: 15px 40px; , текст пропишем заглавными буквами и немного его уменьшаем. При наведении делаем cursor: pointer;.

Далее с позиционируем иконку, и для этого зададим блоку position: relative;:

.dws-menu label.toggleMenu{   background: #C9C9C9;   display: block;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

Отбираем иконку, и позиционируем ее абсолютно данному блоку, увеличим до 18 пик. что бы она сочеталась с остальными иконками.

.dws-menu label.toggleMenu .fa{   position: absolute;   top: 15px;   left: 12px;   font-size: 18px;  }   

Теперь нужно при маленьком разрешении скрыть все пункты и оставить одну кнопку. Для этого пишем в медиа запросе display: none;

.dws-menu ul{   display: none;  }   

мобильное меню для сайта

При широком расширении, тоже ее скрываем:

.dws-menu label.toggleMenu{   background: #C9C9C9;   display: none;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

А в мобильной версии отобразим:

.dws-menu label.toggleMenu{   display: block;  }   

Следующим этапом по щелчку нужно поменять цвет на более темный и развернуть основной список. Для этого будем отслеживать щелчок мышкой и менять цвет кнопки.

Отбираем кнопку при щелчке, и применяем к ней действия, меняем цвет кнопки и шрифта:

input.toggleMenu:checked + label.toggleMenu{   background: #000;   color: #fff;  }   

Далее прописываем отображение основного списка меню. Отбираем щелчек по кнопке, и при помощи данной конструкции  описываем к чему его применить.

input.toggleMenu:checked ~ ul{   display: block;  }   

создаем адаптивное меню

С основным меню мы разобрались, и можно приступать к описанию вложенных пунктов меню.

Описываем вложенные пункты

Для удобства просмотра выпадающих списков я в основном стиле скрою отступ меню, что бы его расположить в самом верху экрана.

header{   /*margin-top: 200px;*/   font-family: Cuprum, Arial, Helvetica, sans-serif;  }   

По аналогии как делали с основным меню, практически то же самое делаем с вложенными пунктами. Добавляем к пункту «Продукция» input и label и опишем стили его отображения.

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1">  <a href="#"><i class="fa fa-shopping-cart"></i>Продукция</a>  <label for="sub_m1" class="toggleSubmenu"><i class="fa"></i></label>   

При нажатии видим небольшой отступ, давайте его скроем, в основных стилях добавляем его к описываемому до этого стилю.

.dws-menu [type="checkbox"],  .dws-menu label.toggleSubmenu{   display: none;  }  

И по аналогии как делали до этого, отображаем пункты по щелчку, для этого отберем label в субменю, позиционируем его абсолютно с нулевыми значениями, ширину и высоту делаем по 100%, задаем курсор, хотя он и не обязательный  в мобильной версии, но нам для удобства он не помешает. Обязательно прописать, что это блочный элемент:

.dws-menu label.toggleSubmenu{   position: absolute;   top: 0;   right: 0;   width: 100%;   height: 100%;   cursor: pointer;   display: block;  }   

При нажатии на пункт меню меняем цвет фона и шрифта:

input.toggleSubmenu:checked ~ a{   background: #454547;   color: #fff;  }   

Далее разворачиваем все пункты подменю:

input.toggleMenu:checked ~ ul,  input.toggleSubmenu:checked ~ ul{   display: block;   position: relative;  }   

Для того что бы видеть какой из пунктов имеет подменю, добавим соответствующую иконку в виде треугольника.

Отбираем libel субменю и при помощи псевдоэлементов добавим иконку с подключенных шрифтов.

Цвет делаем у нее серым:

.dws-menu label.toggleSubmenu .fa::before{   content: "f0d7";   color: #454547;  }   

С позиционируем иконку по правой стороне:

.dws-menu label.toggleSubmenu .fa{   position: absolute;   top: 15px;   right: 30px;  }   

И нахватает второй иконки, которая будет отображать, что пункт развернут при щелчке, для этого отбираем субменю по щелчку и меняем иконку, а также задаем белый цвет:

.dws-menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before{   content: "f0d8";   color: #ffffff;  }   

Делаем стрелку при адаптации меню

По аналогии прописываем input и label в последующих меню в данной группе, только обязательно меняем у них идентификатор.

Следующий пункт это «Услуга» и там пропишем данные параметры:

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m2">  <a href="#"><i class="fa fa-cogs"></i>Услуги</a>  <label for="sub_m2" class="toggleSubmenu"><i class="fa"></i></label>   

Описываем вложенные подпункты

По аналогии как делали с основным меню, практически туже операцию нужно провести и с вложенными субменю. Первым делом пропишем input и label в одном из подменю. 

Первый пункт по списку идет «Одежда», пишем там свою конструкцию и сразу проверяем что получилось:

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-1">  <a href="#">Одежда</a>  <label for="sub_m1-1" class="toggleSubmenu"><i class="fa"></i></label>   

Практически меню готово осталось немного у него подкорректировать ширину. Смотрим из за чего она так формируется. Видим, что основными стилями добавляется отступ и нам нужно его убрать.

Как сделать выпадающее мобильное меню

Отбираем вложенные меню и позиционируем его абсолютно с отступами в автомате:

.dws-menu li > ul li ul{   position: absolute;   right: auto;   top: auto;  }   

Дописываем следующие пункты в данной ветке и не забываем задаем каждому пункту свой ID.

<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-2">  <a href="#">Электроника</a>  <label for="sub_m1-2" class="toggleSubmenu"><i class="fa"></i></label>   
<input type="checkbox" name="toggle" class="toggleSubmenu" id="sub_m1-2-1">  <a href="#">Телефоны</a>  <label for="sub_m1-2-1" class="toggleSubmenu"><i class="fa"></i></label>   

Как видим меню оптимально отображается, пункты все работаю, переключаются, и следующим этапом сделаем анимацию.

Анимирование элементов

Идея анимирования не просто появления меню, а плавное его выезжание по клику с верху в низ.

Для этого нам нужно задействовать высоту блока и повещаем на нее анимацию.

Меняем у блока ul display на block, и скрываем его не при помощи none, а про помощи max-height в ноль. Прописываем дополнительно transition в 0,3 сек по данному параметру.

.dws-menu ul{   display: block;   max-height: 0;   transition: max-height 0.3s;   }   

А при клике добавляем max-height: 5000px; и transition делаем в 2 сек.

input.toggleMenu:checked ~ ul,  input.toggleSubmenu:checked ~ ul{   display: block;   position: relative;   max-height: 5000px;   transition: max-height 2s ease-in;  }   

В заключении допишем ингредиент кнопки как у всех изначально. Для этого открою основной стиль, скопирую данный ингредиент и вставим в @media файл.

.dws-menu label.toggleMenu{   background: #c9c9c9; /* Old browsers */   background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */   background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 ); /* IE6-9 */     display: none;   padding: 15px 40px;   text-transform: uppercase;   font-size: 14px;   cursor: pointer;   position: relative;  }   

На этом все код Мобильного меню готов, и теперь можно его проверять на разных расширениях.

Обязательно внедряйте приобретенные знания в свои проекты и пользователи это оценят.

Оставить комментарий:

dwstroy.ru

Задача

Ниже представленные снимки экрана показывают ситуации с шаблонами на экранах мобильных устройств. Если навигация имеет 3 или 4 кнопки, то ее расположение сохранится в одну строку. Но когда в меню содержится 6 и более пунктов , получается уродливая куча.

Пример навигации на экране мобильного устройства

 

Решение

1) Выпадающий список

Одним из распространенных способов является конвертация навигации в выпадающий список на основе элемента select.  Такое решение имеет недостаток — элемент select нельзя стилизовать с помощью CSS. Плагины Javascript, наподобие Chosen позволяют модифицировать меню, или придется довольствоваться системными стилями для выпадающего списка. Также пользователь может быть введен в заблуждение, когда широкоэкранная версия структуры меню трансформируется на мобильном устройстве в выпадающий список.

Выпадающий список

выпадающий список

 

2) Вывод в виде блока

Другой популярный способ  — формировать пункты меню как элементы блока с вертикальным расположением пунктов. Однако такой подход занимает большое пространство в заголовке. Если навигация содержит много кнопок, то пользователю придется прокручивать длинный список, чтобы добраться до информации.

Блок элемнетов

Блок элемнетов

Блок элемнетов

 

3) Иконка меню

И последний способ, который мы рассмотрим в нашем уроке — использование иконки меню для включения навигации. Такой подход сохраняет место на странице (что важно для мобильного устройства) и дает полный контроль над внешним видом с помощью CSS. Иконка меню и сама навигация может быть представлена в соответствии с общим стилем сайта.

Иконока меню

Иконока меню

Иконока меню

Иконока меню

 

Навигация для мобильного включаемая с помощью jQuery

В данном уроке мы покажем, как создать навигацию для маленького экрана. Будет использоваться jQuery для подготовки иконки меню и включения навигации. Никаких дополнительных тегов HTML для работы навигации не требуется.

Для нашего меню будет использоваться простая структура:

Для функционирования меню требуется код JavaScript.  Функция подготавливает элемент <div id="menu-icon"> в теге <nav id="#nav-wrap">. Когда посетитель нажимает кнопку мыши на элементе #menu-icon, выскальзывает навигация.

В результате работы скрипта изменится структура документа:

Для нашей демонстрации используется достаточно простой код CSS. Ключевой момент представлен на рисунке ниже.  Элемент #menu-icon имеет изначально свойство display:none. Используется медиа-запрос для изменения #menu-icon на display:block, если ширина окна просмотра меньше 600px.

Основные моменты кода CSS

В результате получится навигация с представленным функционалом:

Навигация для мобильного устройства

ruseller.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.