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


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

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

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

Существует несколько подходов к адаптивной навигации. Рассмотрим их по порядку.


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

1. Навигация вверху или оставляем все как есть

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

Такой подход используется в темах оформления Simpliste.

Преимущества

Достигается проще всего. Не нужно использовать Javascript (и нет зависимости от него), не нужно невероятных маневров с CSS.

Недостатки

Проблема может начаться тогда, когда количество пунктов меню слишком велико. Во-первых, высота блока навигации может стать такой, что он полностью перекроет содержимое сайта на первой странице и пользователю придется «листать» сайт вниз, чтобы добраться до нужной ему информации. И так на каждой странице сайта. Во-вторых, возникает вопрос многоуровневых меню. Если их просто выстроить одно под другим, то возвращаемся к проблеме высоты блока навигации. В-третьих, если все заранее не предусмотреть, то добавление новых пунктов меню может вызвать неприятное «съезжание» и переносы.

Примеры


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

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

2. Ссылка на футер, к навигации

Демо с полным описанием.

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

Достоинства

Остается единственная ссылка в шапке, которая занимает очень мало места. Нет зависимости от скриптов.

Недостатки

Придется дописывать дополнительный CSS код, чтобы либо перемещать меню из футера вверх на настольных компьютерах (с помощью position:absolute или position:fixed), либо прятать меню в шапке на мобильных устройствах, если оно дублирует меню футера. Кроме того, ощущение от резкого «прыжка» при перемещении по такой ссылке может застать пользователя врасплох.

Пример

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

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

3. Выпадающий список (<select>) вместо навигации


Демо с полным описанием.

Такой подход распространяется все больше. Здесь используется Javascript, который «пробегается» по всем пунктам меню, создавая из них список . То есть навигацией станет интерфейсный элемент, поддерживаемый операционной системой посетителя.

Процесс написания скрипта для такого меню был подробно описан в статье на Smashing Magazine. Но можно воспользоваться готовым плагином jQuery, как я и сделал в собственном решении.

Достоинства

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

Недостатки

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

Примеры

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

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

4. Раскрывающееся меню


Демо с полным описанием.

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

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

var menuText = "Menu";  $(  function(){  $("body").addClass("js");   $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>");    $(".menu_main li:has(ul)").addClass("menu_parent");    $(".link_nav").click(  function(){  $(".menu_main > ul").toggleClass("menu_expanded");  $(this).toggleClass("menu_parent_exp");  return false;  }  )  $(".menu_parent").click(  function(){  $(this).find(">ul").toggleClass("menu_expanded");  $(this).toggleClass("menu_parent_exp");  return false;  }  )   } )   

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

Достоинства

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

Недостатки

Зависимость от Javascript. Возможные проблемы с производительностью, если потребуется анимировать меню.

Примеры

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

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

5. Выезжающее меню со сдвигом контента

Демо с полным описанием.

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

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

$(  function(){  $("body").addClass("js");    $(".link_nav").click(  function(){  $("body").toggleClass("mobile_nav");  }  );  } )   

На самом деле, не много скриптов.

Основную работу выполняет CSS. При изменении класса тега body меняется положение меню, которое спозиционировано через position:fixed, а контент приобретает дополнительный отступ слева, уступая место меню. В браузерах Webkit удалось даже добиться анимации через CSS transitions, то есть в айфонах и андроидах меню будет эффектно выезжать. Опять же, посмотреть и взять необходимые стили можно в демо.

Есть недостаток, который нужно описать отдельно. Когда в меню слишком много пунктов, то меню с position:fixed будет «съедаться» нижним краем. В таком случае помогает использование position:absolute, но происходит «прыжок» к началу сайта после клика на кнопку-ссылку.

Достоинства

Интересное решение, возможность экспериментировать с внешним видом. Контекст не теряется, так как контент, хоть и прикрыт краем окна, но все же виден.

Недостатки

Зависимость от Javascript, необходимость настраивать CSS. position:fixed поддерживается не во всех старых версиях мобильных устройств (там будет position:absolute), описанная выше проблема с высотой меню.

Пример


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

habr.com

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

HTML

Меню представляет из себя неупорядоченный список:

<nav>      <ul class="menu">          <li>              <a href="#"><i class="icon-home"></i>Главная</a>              <ul class="sub-menu">                  <li><a href="#">Подменю 1</a></li>                  <li><a href="#">Подменю 2</a></li>                  <li><a href="#">Подменю 3</a></li>              </ul>          </li>          <li>              <a  href="#"><i class="icon-user"></i>О нас</a>          </li>          <li>              <a  href="#"><i class="icon-camera"></i>Портфолио</a>              <ul class="sub-menu">                  <li>                      <a href="#">Подменю 1</a>                  </li>                  <li>          .  

lt;i class="icon-bullhorn"></i>Блог</a>         </li>         <li>             <a  href="#"><i class="icon-envelope-alt"></i>Контакты</a>         </li>     </ul> </nav>

Для добавления иконок, нужно просто добавить соответствующий иконке класс к тегу i — например, icon-home, icon-camera и т.п.

CSS

Посмотрим на CSS для десктопного меню первого уровня:

.menu{      display:block;  }  .menu li{      display: inline-block;      position: relative;      z-index:100;  }  .menu li a {      font-weight:600;      text-decoration:none;      padding:11px;      display:block;      color:#ffffff;         -webkit-transition: all 0.2s ease-in-out 0s;      -moz-transition: all 0.2s ease-in-out 0s;      -o-transition: all 0.2s ease-in-out 0s;      -ms-transition: all 0.2s ease-in-out 0s;      transition: all 0.2s ease-in-out 0s;  }  .menu li a:hover,  .menu li:hover > a{      color:#ffffff;      background:#9CA3DA;  }  

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

/* скрываем меню второго уровеня */  .menu ul {      display: none;      margin: 0;      padding: 0;      width: 150px;      position: absolute;      top: 43px;      left: 0px;      background: #ffffff;  }  /* показываем меню второго уровня при наведении */  .menu li:hover > ul{      display: block;  }  .menu ul li {      display:block;      float: none;      background:none;      margin:0;      padding:0;  }  .menu ul li a {      font-size:12px;      font-weight:normal;      display:block;      color:#797979;      border-left:3px solid #ffffff;      background:#ffffff;  }  .menu ul li a:hover,  .menu ul li:hover > a{      background:#f0f0f0;      border-left:3px solid #9CA3DA;      color:#797979;  }

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

/* Изменение позиций для меню третьего уровня */  .menu ul ul {      left: 149px;      top: 0px;  }

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

<a id="touch-menu" class="mobile-menu" href="#">      <i class="icon-reorder"></i>      Меню  </a>  

Уникальный идентификатор touch-menu будем использовать в jаvascript коде, для обращения к меню.
Ниже css свойства для кнопки Меню:

.mobile-menu{      display:none;      width:100%;      padding:11px;      background:#3E4156;      color:#ffffff;      text-transform:uppercase;      font-weight:600;  }  .mobile-menu:hover{      background:#3E4156;      color:#ffffff;      text-decoration:none;  }

Ниже свойства CSS для мобильной версии меню.

@media (max-width: 760px) {         .menu{display:none;}         .mobile-menu{          display:block;          margin-top:100px;      }         nav{          margin:0;          background:none;      }         .menu li{          display:block;          margin:0;      }         .menu li a {          background:#ffffff;          color:#797979;          border-top:1px solid #e0e0e0;          border-left:3px solid #ffffff;      }         .menu li a:hover,      .menu li:hover > a{          background:#f0f0f0;          color:#797979;          border-left:3px solid #9CA3DA;      }         /*level 2 and 3 - make same width as all items*/      .menu ul {          display:block;          position:relative;          top:0;          left:0;          width:100%;      }         .menu ul ul {          left:0;      }     }/*end media queries*/

JS

Подключаем jQuery и файл с кодом для мобильной версии:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/jаvascript" ></script>  <script src="js/menu.js" type="text/jаvascript"></script>  

Ниже приведено содержимое файла menu.js — код используемый в мобильной версии.

При нажатии на кнопку-ссылку Меню с эффектом slide появляется вся наша навигация вместе с выпадающими подпунктами.

$(document).ready(function(){         var touch = $('#touch-menu');      var menu = $('.menu');         $(touch).on('click', function(e) {          e.preventDefault();          menu.slideToggle();      });      $(window).resize(function(){          var w = $(window).width();          if(w > 760 && menu.is(':hidden')) {              menu.removeAttr('style');          }      });     });

Если размер окна браузера более 760px, то мы удаляем инлайновые свойства у .menu и внешний вид навигации вернется к десктопному варианту.

pcvector.net

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

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

Читайте также: Чистый стиль меню с помощью CSS3

Предлагаю на рассмотрение, технику создания простого, очень гибкого в настройках, и к тому же достаточно эффективного, адаптивного меню, с использованием чистой семантической HTML5 разметки, для реализации адаптивной конструкции, без подключения javascript. В результате с помощью CSS мы получим меню, которое может быть выравнено влево, вправо или располагаться точно по центру, выделяемые активные/текущие пункты, меню способное при изменении размера окна браузера, быстро перестраиваться в раскрывающуюся, вертикальную навигационную панель, которая замечательно смотрится на экранах различных мобильных пользовательских устройств(планшеты, смартфоны, ноутбуки и мобильные телефоны).
 
Простое адаптивное меню

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

HTML Разметка

Перво-наперво нам необходимо выполнить разметку всей основной конструкции нашего меню. Мы создаем элемент навигации, а значит логичным и даже практичным, будет применение HTML5-элемента, тега <nav> с присвоенным ему одноименным классом, для последующего форматирования CSS стилей, а также создания и абсолютного позиционирования выпадающей навигационной панели. Класс current указывает на активную / текущую ссылку меню, внешний вид которой, сформируем с помощью css.
 

 
Как видим, меню, это простой неупорядоченный список с определенным количеством ссылок. Количество пунктов может быть разным, но всё же не стоит городить огород, всё в разумных пределах.
Далее, пока не ушли далеко, хочу напомнить, а тем кто не знает, пояснить, что HTML5 и запросы media query не поддерживается IE версии старше 9-й(совсем неудивительно). Дабы избежать головной боли в будущем и сделать всё правильно, существуют специальные скрипты html5shiv и css3-mediaqueries-js, с помощью которого, мы сможем решить задачу совместимости, предусмотрительно подключив их к документу в разделе <head></head>.
 

 
Всё. С основной разметкой мы разобрались, классы прописаны, костыли добавлены. Теперь перейдем к определению стилей пунктов меню, сформируем внешний вид и с делаем наше меню по-настоящему адаптивным.
 

CSS Определяем стили

Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал display:inline-block вместо float:left элемента <li> в контейнере навигации nav. Это позволит выравнивать пункты меню влево, вправо и точно по центру, указав свойство text-align элементу списка <ul>.
 

За изменения цвета ссылок и фона активных/текущих пунктов меню отвечают секции .nav a:hover и .nav .current a соответственно. Я не стал особо мудрить в этом примере, всё сделал в духе минимализма, при наведении на ссылку меняется цвет, текст становится черным color: #000;, а для активных пунктов добавил фон background: #999;, заменил цвет шрифта на белый color: #fff; и чуточку закруглил края border-radius: 3px; у получившейся кнопки. Вы же можете фантазировать и экспериментировать в этом плане, сколь душе угодно.
 

Выравнивание по центру и вправо

Как я уже упоминал выше, мы можем изменять выравнивание пунктов навигации с помощью свойства text-align, для этого добавим в код CSS несколько строк:
 

 

Адаптируем меню

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

Будем исправлять ситуацию с помощью медиа запросов. В точке приложения медиа запроса в 600px, выставил относительное позиционирование position: relative; для элемента nav, чтобы мы смогли потом разместить список меню <ul> сверху в абсолютной позиции position: absolute;. С помощью свойства display: none скроем все пункты меню li, оставив только активные на текущий момент ссылки с классом current, прописав им свойство display: block
При наведении на сгруппированную панель навигации все пункты меню должны показываться в виде выпадающего списка, для этого определяем правило .nav ul:hover li с функцией code>display: block. Для активных/текущих пунктов добавляем иконку, чтобы выделить из из остальных.
Если необходимо сместить меню вправо или расположить по центру, воспользуйтесь left и right свойствами позиционирования для списка ul нашего меню.
 

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

Урок подготовлен по материалам Web designer wall
Вольный перевод и адаптация: Андрей /driver/
 
Удачи!
Буду очень признателен, если поделитесь ссылкой на этот урок в своих соц-сетях:

dbmast.ru

Заключение

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

 

www.dejurka.ru

Основное правило современного веб-дизайна заключается в том, что сайт и его контент должны правильно отображаться на различных устройствах, в том числе и мобильных. Одним из главных аспектов в интерфейсе сайта является качественная навигация. В данной статье показан пример как сделать простое адаптивное меню с кнопкой закрыть, используя только CSS, реализуя функционал без применения javaScript. Все что нам понадобится — изображение иконки «бургег» для открытия меню и крестика, для его закрытия соответственно, которые я приготовил заранее.

  Отзывчивость меню работает следующим образом: на большом мониторе меню имеет классический вид — все блоки выстроены в одну горизонтальную линию; на планшете — блоки меню разделены на две равнораспределенные по экрану колонки; а на экранах мобильных устройств показана небольшая кнопка с иконкой-«бутерброд», при клике по которой открываются разделы меню, а иконка меню меняется на кнопку закрытия в виде крестика. Клик по крестику закрывает меню и возвращает его в первоначальное положение.
  Проверить меню на адаптивность и проделать все манипуляции самостоятельно можно на странице примера, изменяя размеры окна браузера или зайдя с мобильного устройства.

ПРИМЕР
  Для всего этого чуда понадобился вот такой спрайт с иконками «бургера» и крестика:

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

  Основной CSS включает в себя и сброс стилей для блоков, псевдоклассов и псевдоэлементов, используемых в коде, при ненадобности его можно удалить.
  Теперь осталось задать правила адаптивности, а именно свойства отображения меню для различных размеров экрана и прописать функционал открытия и закрытия меню.
  Работа меню реализована с помощью псевдокласса :focus, для этого к тегу контейнера <nav> добавлен атрибут tabindex чтобы блок смог получить фокус и меню стало видимым. Кнопки открытия и закрытия можно сместить изменив соответствующие свойства в коде CSS для элементов кнопок.
  С помощью псевдокласса :hover решена проблема со скликаванием. Пока курсор находится на меню, оно остается видимым и кликабельным.
  При желании менюшку можно симпатично оформить и добавить немного анимации, все также используя только свойства CSS, исключив JS-скрипты.

©http://magentawave.com

www.magentawave.com

Быстрый переход

searchengines.guru

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

В первой части видео показывал, как можно реализовать горизонтальное меню при помощи 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

Сегодня мы будем создавать красочные 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


You May Also Like

About the Author: admind

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

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

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