Адаптивное меню


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

Адаптивное меню

Демо Скачать исходники

HTML

Прежде всего необходимо в тег HEAD добавить meta viewport для масштабирования на любом устройстве:

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

Затем добавляем пункты меню в виде обычного списка:

<nav class="clearfix">   <ul class="clearfix">   <li><a href="#">Home</a></li>   <li><a href="#">How-to</a></li>   <li><a href="#">Icons</a></li>   <li><a href="#">Design</a></li>   <li><a href="#">Web 2.0</a></li>   <li><a href="#">Tools</a></li>   </ul>   <a href="#" id="pull">Menu</a>  </nav>    

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

CSS

Основные CSS-стили:

body {   background-color: #ece8e5;  }  nav {   height: 40px;   width: 100%;   background: #455868;   font-size: 11pt;   font-family: 'PT Sans', Arial, sans-serif;   font-weight: bold;   position: relative;   border-bottom: 2px solid #283744;  }  nav ul {   padding: 0;   margin: 0 auto;   width: 600px;   height: 40px;  }  

Пункты меню должны следовать друг за другом, используем float:

nav li {   display: inline;   float: left;  }  

Используем clearfix-хак:

.clearfix:before,  .clearfix:after {   content: " ";   display: table;  }  .clearfix:after {   clear: both;  }  .clearfix {   *zoom: 1;  }  

Каждый пункт меню шириной 100 пикселей:

nav a {   color: #fff;   display: inline-block;   width: 100px;   text-align: center;   text-decoration: none;   line-height: 40px;   text-shadow: 1px 1px 0px #283744;  }  nav li a {   border-right: 1px solid #576979;   box-sizing:border-box;   -moz-box-sizing:border-box;   -webkit-box-sizing:border-box;  }  nav li:last-child a {   border-right: 0;  }  nav a:hover, nav a:active {   background-color: #8c99a4;  }    

Дополнительный пункт на больших экранах должен быть скрыт:

nav a#pull {   display: none;  }  

Сейчас меню корректно отображается только на большом экране:

Адаптивное меню

Media Queries

CSS3 media queries определяют, какие стили будут использоваться в каждой конкретной ситуации (например при разных разрешениях экрана).

Адаптивное меню

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

Адаптивное меню

@media screen and (max-width: 600px) {   nav {   height: auto;   }   nav ul {   width: 100%;   display: block;   height: auto;   }   nav li {   width: 50%;   float: left;   position: relative;   }   nav li a {   border-bottom: 1px solid #576979;   border-right: 1px solid #576979;   }   nav a {   text-align: left;   width: 100%;   text-indent: 25px;   }  }  

При разрешении экрана менее 480 пикселей, должна появляться дополнительная кнопка меню, по нажатию которой раскрывается вся навигация:

Адаптивное меню

@media only screen and (max-width : 480px) {   nav {   border-bottom: 0;   }   nav ul {   display: none;   height: auto;   }   nav a#pull {   display: block;   background-color: #283744;   width: 100%;   position: relative;   }   nav a#pull:after {   content:"";   background: url('nav-icon.png') no-repeat;   width: 30px;   height: 30px;   display: inline-block;   position: absolute;   rightright: 15px;   top: 10px;   }  }    

При разрешении менее 320 пикселей меню должно отображаться в один столбец:

@media only screen and (max-width : 320px) {   nav li {   display: block;   float: none;   width: 100%;   }   nav li a {   border-bottom: 1px solid #576979;   }  }  

Отображение навигации

При помощи slideToggle() отображаем все меню на больших экранах и скрываем на маленьких:

		$(function() { 			var pull 		= $('#pull'); 				menu 		= $('nav ul'); 				menuHeight	= menu.height();  			$(pull).on('click', function(e) { 				e.preventDefault(); 				menu.slideToggle(); 			});  			$(window).resize(function(){  		var w = $(window).width();  		if(w > 320 && menu.is(':hidden')) {  			menu.removeAttr('style');  		}  		}); 		});  

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

Демо Скачать исходники

habr.com

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


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

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

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

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

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


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

©http://magentawave.com

www.magentawave.com

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

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


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

Адаптивное меню
Рис. 1. Контейнер для колонок мега меню
Адаптивное меню
Рис. 2. Вложенное меню

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

Необходимые файлы раздела head

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

HTML разметка


<nav class="container">   <ul class="top-menu">   <li><a href="">Главная</a></li>   <li class="dropdown-standart"><a href="" class="dropdown">Страницы</a>   <ul class="submenu-standart">   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   </ul>   </li>   <li><a href="" class="dropdown">Магазин</a>   <ul class="submenu">   <li><h3>Колонка 1</h3>   <ul>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка<.  

><a href="">Элемент списка</a></li> </ul> </li> <li> <ul> <li> <a href="" class="link-image"> <img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg"> </a> </li> <li><h3 class="image-header">Заголовок</h3></li> </ul> </li> </ul> </li> <li><a href="">Портфолио</a></li> <li><a href="">Блог</a></li> </ul> </nav>

CSS стили

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');  *{box-sizing: border-box;}  body {   font-family: 'Roboto', sans-serif;   font-size: 14px;   margin: 0;  }  ul {   list-style: none;   margin: 0;   padding: 0;  }  a {text-decoration: none;}  .top-menu {   background: white;   position: relative;  }  .top-menu:after,   .submenu:after {   content: "";   display:.  

x-shadow: 0 3px 5px 0 rgba(0,0,0,.07); background: white; padding: 25px 0; position: absolute; top: 100%; left: 0; z-index: 5; opacity: 0; visibility: hidden; transform: translate3d(0,30px,0); transition: .5s ease-out; transform-origin: 0% 0%; } .submenu {width: 100%;} .submenu-standart { min-width: 200px; padding: 10px 0; } .dropdown-standart {position: relative;} .top-menu > li:hover .submenu, .top-menu > li:hover .submenu-standart { opacity: 1; visibility: visible; transform: translate3d(0,0,0); } .submenu > li { float: left; width: calc(100% / 3); padding: 0 18px; border-right: 1px solid #e5e5e5; } .submenu-standart li {padding: 0 18px;} .submenu > li:last-child {border-right: none;} .submenu img { display: block; width: 100%; } .submenu li a, .submenu-standart li a { display: block; padding: 5px 0; color: #666; font-size: 13px; } .submenu li .link-image {padding: 0;} .submenu li a:hover {color: #B03062;} .submenu h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 400; margin: 10px 0; } .container { max-width: 960px; margin: 0 auto; } .content { margin: 20px auto; padding: 0 20px; }

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


@media(max-width:768px) {   .top-menu li {   width: 100%;   height: auto!important;   }   .top-menu > li {border-bottom: 1px solid #e5e5e5;}   .top-menu > li > a {padding: 18px}   .submenu,   .submenu-standart {   position: relative;   display: none;   box-shadow: none;   padding: 0;   background: rgba(0,0,0,.02);   }   .submenu-standart {padding: 10px 0;}   .submenu > li {   border-right: none;   border-bottom: 1px solid #e5e5e5;   padding: 18px;   }   .submenu h3 {margin: 0 0 10px}   .submenu .image-header {margin: 10px 0}   .submenu li:last-of-type {border-bottom: none}   .top-menu > li:hover .submenu,   .top-menu > li:hover .submenu-standart {display: block;}  }

Активация плагина matchHeight

jQuery(document).ready(function($) {   $('.submenu > li').matchHeight();  });

See the Pen apGgYv by Elena (@html5book) on CodePen.

Эффекты для появления мега меню

В приведённом примере меню появляется, скользя снизу-вверх. Чтобы разнообразить свои проекты, можно воспользоваться одним из следующих эффектов:

1. Поворот из глубины экрана

.submenu {   border-top: 1px solid #e5e5e5;   box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);   background: white;   padding: 30px 0;   position: absolute;   top: 100%;   left: 0;   width: 100%;   z-index: 5;   opacity: 0;   visibility: hidden;   transform: perspective(600px) rotateX(-90deg);   transform-origin: 0% 0%;   transition: .4s ease-in;  }  .top-menu > li:hover .submenu {   opacity: 1;   visibility: visible;   transform: perspective(600px) rotateX(0);  }

2. Скольжение сверху-вниз

.submenu {   border-top: 1px solid #e5e5e5;   box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);   background: white;   padding: 30px 0;   position: absolute;   left: 0;   width: 100%;   top: -60px;   opacity: 0;   z-index: -1;   transition: .4s cubic-bezier(.6, .04, .98, .335);  }  .top-menu > li:hover .submenu {   top: 100%;   opacity: 1;   z-index: 5;  }

3. Скольжение слева-направо

.submenu {   border-top: 1px solid #e5e5e5;   box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);   background: white;   padding: 30px 0;   position: absolute;   width: 100%;   top: 100%;   left: -60px;   opacity: 0;   visibility: hidden;   z-index: 5;   transition: .4s cubic-bezier(.455, .03, .515, .955);  }  .top-menu > li:hover .submenu {   left: 0;   opacity: 1;   visibility: visible;  }

4. Эффект масштабирования

.submenu {   border-top: 1px solid #e5e5e5;   box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);   background: white;   padding: 30px 0;   position: absolute;   width: 100%;   top: 100%;   left: 0;   opacity: 0;   z-index: 5;   transform: scale3d(0,0,0);   transform-origin: top left;   transition: .4s cubic-bezier(0.39, 0.575, 0.565, 1);  }  .top-menu > li:hover .submenu {   left: 0;   opacity: 1;   transform: scale3d(1,1,1);  }

html5book.ru

Какое решение лучше?

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

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

Шаг 1: Выбор контрольных точек

Отзывчивый конструкция имеет две основные функции. Во-первых, проект должен быть резиновым: масштабы ширины изменяются вместе с шириной окна браузера. Во-вторых, нужно использовать контрольные точки, которые позволят изменять ширину конструкции за счет использования CSS media queries. Например, вы можете решить, что, когда браузер будет иметь ширину не меньше 480 пикселей, боковая панель будет двигаться ниже содержания и заголовки и станут меньше. Вы можете иметь столько контрольных точек, сколько  вы хотите.

Адаптивное меню

Вот пример использования media queries

Twitter Bootstrap использует несколько опорных точек, включая смартфоны с шириной не более 480px.
На самом деле, media queries не указывают, какое устройство мы будем использовать, зато они применяются для различных разрешений экранов.

Шаг 2: Пишем разметку

Давайте построим простую страницу. Мы будем использовать тег “article”, чтобы поместить туда нашу навигацию и контент.

Шаг 3: Основные стили

Для начала, давайте немного украсим наше меню.

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

Теперь мы имеем такой результат:

Адаптивное меню

Шаг 4: Добавляем опорные точки

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

Не бойтесь экпирементировать с размером ширины.

Шаг 5: Устанавливаем фиксированную высоту для навигации.

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

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

Чтобы сделать это, мы скачаем и подключим пользовательские сборки Modernizr, библиотеку JavaScript, которая позволяет нам протестировать функцию поддержки в браузерах. Также мы добавим класс  «no-js».

Теперь давайте добавим следующий класс:

Шаг 6: Подключаем FlexMenu

Скачайте flexMenu, jQuery-плагин  и подключите  jQuery. Чтобы все нормально работало, размещайте скрипты внизу страницы.

Также нам нужно указать, к какому элементу мы применяем наш скрипт.

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

Адаптивное меню

Шаг 7: Добавляем стили flexMenu

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

Адаптивное меню

Шаг 8: настройки для сенсорных экранов

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

Modernizr, который мы добавили ранее, предоставляет CSS класс для каждой функции, которую она проверяет. На устройствах с сенсорными экранами, он будет добавлять класс «touch». На устройствах без сенсорного экрана, он будет добавлен класс «no-touch».

Адаптивное меню

Шаг 9: Наша любимая часть работы

Для закрепления результата нам осталось немного повозиться со старым осликом.

Давайте подключим следующие стили для IE ниже 8-ой версии:

Теперь давайте добавим сами стили

Ура, наша адаптивная менюшка готова!

Смотрите демо

Автор: webdesign.tutsplus

Перевод: Дежурка

www.dejurka.ru

Принцип построения универсального адаптивного меню.

Итак, для того чтобы создать такое меню вам потребуется:

  1. Создать html каркас.
  2. Применить стили css.
  3. Подключить скрипт обработчик.

Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.

На большинстве сайтов, которые сделаны на CMS, проще создать новое меню, чем переделать старое. Так как само построение меню реализовано через php и запросы к базе данных, а стили css разбросаны среди многих других стилей. В общем, весь этот процесс переделки меню довольно трудоёмкое и кропотливое занятие.

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

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

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

Стили css, для удобства, подключаются в отдельных файлах. Хотя их можно включить и в основные стили сайта. Я покажу пример подключения стилей через отдельные файлы.

Процесс создания адаптивного меню.

Шаг 1. Создание html структуры меню.

Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс.

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

<nav class="navbar navbar-default navbar-static-top" role="navigation">  <div class="container">  <div class="row">  <div class="navbar-header">  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  </button>  <a class="navbar-brand visible-xs" href="https://1zaicev.ru/">Бизнес в Сети</a>  </div>  <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 1px;">  <ul class="nav navbar-nav">  <li id="button_home" class="">  <a href="#">  Главная  </a>  </li>   <li id="button_rubric" class="dropdown">  <a class="dropdown-toggle" href="#" data-toggle="dropdown">  Рубрики  <span class="caret"></span>  </a>  <ul class="dropdown-menu" role="menu">  <li>  <a href="#" target="_self">  Рубрика1  </a>  </li>  <li>  <a href="#" target="_self">  Рубрика2  </a>  </li>  <li>  <a href="#" target="_self">  Рубрика3  </a>  </li>  </ul>  </li>  <li id="button_author" class="">  <a href="#">  Автор  </a>  </li>  <li id="button_blog" class="">  <a href="#">  Блог  </a>  </li>  <li id="button_articles" class="">  <a href="#">  Статьи  </a>  </li>  <li id="button_login" class="">  <a href="#">  Вход  </a>  </li>  <li id="button_register" class="">  <a href="#">  Регистрация  </a>  </li>  </ul>  </div>  </div>  </div> </nav>

Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт. Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код: <span class="caret"></span>. Если раскрывающихся пунктов меню у вас несколько используйте этот код.

Шаг 2. Подключение стилей css.

Для того чтобы упростить процесс и не путаться с медиазапросами, подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами <head> … </head>. По крайней мере, это так в большинстве современных шаблонах.

Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню.

Но, для начала вы должны скачать файлы со стилями и скриптом здесь. После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php, между тегами ХЕД добавить вот эти строки подключения:

<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/menu.css" />

Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

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

И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве.

В том же файле header.php, перед закрытием тега </head> вставляете вот эти строки кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.min.js"></script>

Примечание: файл bootstrap.min.js, вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу.

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

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

На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!

С уважением, Максим Зайцев.


    Похожие статьи по теме:

  • Как адаптировать шаблон WordPress с 3 колонками
  • Как создать адаптивное меню для сайта
  • Адаптивный дизайн сайта – как адаптировать шаблон WordPress
  • Используем медиазапросы CSS3 для адаптивной вёрстки шаблона
  • Зачем нужна оптимизация сайта для мобильных устройств

1zaicev.ru

Как сделать адаптивное меню для сайта

Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

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

Начнем с html. Прежде всего подключим библиотеку jquery. Наверняка, вы давно ей пользуетесь, поэтому убедитесь, что не подключаете ее второй раз:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

  <nav class="topMenu">   <div class="iconMenu"><img src="img/iconmenu.png" alt="Иконка меню" /></div>   <div class="itemsMenu">   <li><a href="#"><img src="img/pdf.png" alt="Скачать прайс"/>Скачать прайс</a></li>   <li><a href="#"><img src="img/contact.png" alt="Контакты"/>Контакты</a></li>   <li><a href="#"><img src="img/otzivy.png" alt="Отзывы"/>Отзывы</a></li>   </div>  </nav>  

Я добавил ссылкам иконки, чтобы смотрелось симпатичнее. В варианте для больших дисплеев будет выглядеть так:
Адаптивное меню для саита

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

  #menu {   background: #2ba9c0;   width: 100%;   padding: 10px 0;   text-align: center;  }    #menu a {   color: #fff;   text-decoration: none;   padding: 12px 12px;  }    #menu a:hover {   border-bottom: 4px solid #fff;   background: #078ecb;  }    .itemsMenu li {   display:inline;   padding-right: 35px;   width:100%;   margin: 0 auto;  }   .itemsMenu li img{   vertical-align: middle;   margin-right: 10px;   }    .iconMenu {   color: #fff;   cursor: pointer;   display: none;  }  .showitems {   display:block !important;  }    @media screen and (max-width: 600px) {   #menu a{   padding-bottom: 13px;   }   #menu a:hover {   border-bottom: none;   }   .iconMenu {   display:block;   }   .itemsMenu {   display:none;   }   .itemsMenu li {   display:block;   padding:10px 0;   }  }  

Теперь, при уменьшении окна браузера вы увидите следующую картину:

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

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

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

  $(function() {   $('.iconMenu').click(function() {   if($('.itemsMenu').is(':visible')) {   $('.itemsMenu').removeClass('showitems');   }   else {   $('.itemsMenu').addClass('showitems');   }  });  });    

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.
адаптивное меню на css3

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт 🙂 Надеюсь все понятно? Пока.

Скачать исходник

smartlanding.biz

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

Первым делом рассмотрим структуру HTML-файла, а в частности блок <head>:

Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на Iphone. Я уже писал о нём в статье про мета-запросы.

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

Строка 4 — подключаем файл с правилами для нашего меню.

Строка 5 — подключаем JS-файл, для корректной работы адаптивного меню.

Теперь рассмотрим структуру меню в <body>:

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

После того, как мы составили структуру, необходимо добавить до закрывающего тега </body> ещё 2 JS-файла:

Если jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.

 

Вывод

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

  • стандартная;
  • мобильная.

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

Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!

 

 

drogin.ru

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

Для начала сверстаем обычное меню для «большого» разрешения (в нашем случае это будет разрешение экрана 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


You May Also Like

About the Author: admind

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

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

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