Подходы к реализации адаптивного меню. Адаптивное меню для landing page
Далеко не во всех проектах уместны излишние эффекты, которые могут значительно нагружать страницы, а особенно, если это касается адаптивной верстки, где пользователь может просматривать сайт на смартфонах или планшетах. Большинство таких эффектов, создаются с использованием JavaScript, поэтому, для примера, я решил показать, как можно сделать один из важнейших элементов сайта, а именно меню навигации , практически не прибегая к JS, а в основном только средствами CSS. Совсем нельзя отказаться от использования JS по той причине, что на мобильных устройствах и обычных компьютерах или ноутбуках, многие события отличаются и, если на компьютере в CSS мы можем спокойно использовать свойство :hover , то на планшете это уже не сработает так, как нам бы этого хотелось. Самые нетерпеливые, могут сразу (в примере изменяйте ширину окна браузера ).
Итак, ставим такую задачу: создать резиновое по ширине меню, с переключением на мобильную его версию, где меню будет выпадающим по наведению или нажатию на кнопку. Структура HTML типичная для таких элементов, за исключением того, что мы добавляем еще один элемент - кнопку для раскрытия/скрытия меню в мобильной версии:
≡
CSS не совсем стандартный. Мы сделаем так, что наше меню будет вести себя так, как если бы мы использовали таблицу. Сразу хочу акцентировать внимание на том, что не все браузеры поддерживаю те свойства, которые мы будем использовать. Проблемы могут возникнуть с версиями IE ниже восьмой версии (хотя на них уже пора переставать ориентироваться ) и в пару моментах есть маленькие сложности с IE8, но как решить их - напишу ниже.
* { margin: 0; padding: 0; } header { background-color: #C0C0C0; } #menu { display: table; /* описание ниже */ width: 100%; border-collapse: collapse; -webkit-box-sizing: border-box; /* описание ниже */ -moz-box-sizing: border-box; /* описание ниже */ box-sizing: border-box; /* описание ниже */ } #menu ul { display: table-row; /* описание ниже */ background-color: #FFFFFF; list-style: none; } #menu ul li { display: table-cell; /* описание ниже */ border: 1px solid #999999; } #menu ul li a { display: inline-block; width: 100%; height: 50px; line-height: 50px; font-size: 1.2em; text-align: center; } #menu ul li a:hover { background-color: #990000; color: #FFFFFF; } #nav_button { display: none; width: 50px; height: 50px; font-size: 2.5em; text-align: center; background-color: #FFFFFF; border: 1px solid #949494; cursor: pointer; } @media screen and (max-width: 600px) { /* описание ниже */ #menu { display: inline-block; position: relative; width: auto; } #menu ul { display: none; position: absolute; top: 0; width: 100%; z-index: 20; } #menu ul li { display: list-item; border-top: none; } #nav_button { display: inline-block; } #menu:hover, #menu.open_nav { width: 100%; -webkit-user-select: none; /* описание ниже */ -moz-user-select: none; /* описание ниже */ -webkit-touch-callout: none; /* описание ниже */ } #menu:hover ul, #menu.open_nav ul { display: block; margin-top: 50px; } }
На некоторые стили обращать внимание не нужно; цвет бекграунда, размер шрифта и т.д. - это только для демонстрации. А нас должны интересовать следующие свойства с их значениями:
Display: table; Указывает, что элемент будет себя вести аналогично элементу
или
box-sizing: border-box; (и с вендорными префиксами)
При расчетах ширины и высоты элемента, свойства width и height, будут включать в себя значения полей (padding
) и границ (border
). Нужно для того, чтоб избежать появления горизонтальной прокрутки, т.к. без этого свойства, при ширине меню в 100%, добавится еще и толщина border
, а если есть, то и padding
.
-webkit-user-select: none; и -moz-user-select: none;
Запрещает выделять элемент или текст. Нужно для мобильной версии, чтоб избежать неувязок, когда пользователь проводит по элементам меню, вместо того, чтобы нажать на него.
-webkit-touch-callout: none;
Отменяет всплытие подсказки при нажатии и удержании элемента. Работает только в Chrome и Safari. Так же, как и в предыдущем свойстве, служит для отмены нежелательных действий при работе с элементом.
@media (медиа-запрос)
Тема довольно обширная, но если в двух словах, то указывает браузеру, какие свойства применять для определенных типов носителей или технических характеристик устройства. В нашем случае - применять для screen
(экранов мониторов) и max-width: 600px
(если ширина окна браузера меньше 600px).
Самое интересное, что на этом можно было бы поставить точку, если бы мы не учитывали смартфоны, планшеты и с уверенностью сказать, что меню сделано полностью на HTML и CSS. Но придётся прибегнуть к помощи JS/jQuery, а в данном случае, раз уж решено было сделать с наименьшей нагрузкой, именно к чистому JavaScript. Var d = document, navBut = d.getElementById("nav_button"), // кнопка включение меню navMenu = d.getElementById("menu"); // выпадающее меню // функция определения наличия родительского элемента по ID function hasParent(el, sId){ while(el) { if (el.id == sId) return true; el = el.parentNode; } return false; } // по касанию на кнопке, добавляем класс менюшке, // который соответствует свойству в css "#menu:hover" // и разворачиваем меню navBut.addEventListener("touchstart", function(e) { e.preventDefault(); navMenu.classList.add("open_nav"); }, false); // по касанию в документе, // если событие не было на каком-нибудь элементе меню (определяем с помощью функции "hasParent"), // убираем класс "open_nav" из меню, что привод к его закрытию d.addEventListener("touchstart", function(e) { if(!hasParent(e.target, "menu")) navMenu.classList.remove("open_nav"); }, false); Записываем этот код в отдельный js-файл и подключаем его в самом низу страницы, перед закрывающим тегом . Теперь пару слов о кроссбраузерности... Если вы рассчитываете на Internet Explorer ниже девятой версии, то для корректной работы, нужно подключить два фиксящих скрипта внутри тега : Первый позволяет старым браузерам адекватно воспринимать теги HTML5, а второй - "медиа-запросы", с которыми они так же не дружат. Хотя, с другой стороны, такие браузеры не используются на мобильных устройствах, а тот же тег можно заменить на . Поэтому использовать эти скрипты или нет - дело, конечно же, ваше личное, но я их считаю избыточными. Вот теперь меню готово к использованию на любых устройствах. Очень часто, особенно новички, в погоне за мнимой красочностью сайта, переполняют его лишней графикой, скриптами, которые выполняя какое-то маленькое действие, весят порой больше чем вся страница. Не впадайте в крайности и задумывайтесь о тех пользователях, которые могут заходить к вам не только с разных устройств, но еще и по низкоскоростному интернет-соединению. Успехов! ;) Адаптивное меню для современного сайта - не просто роскошь, а необходимость. Изобилие современных девайсов требует от веб-мастеров такой верстки, которая бы логично отображалась на экранах разного разрешения. И в отдельных случаях создать адаптивное меню намного труднее, чем сам дизайн, поэтому и необходимо рассмотреть этот вопрос. Меню для большого экранаЧтобы понять общую схему меню, нужно будет для начала создать структуру меню в HTML и стилизовать его при помощи CSS. Потом на основе полученного материала можно совершенствовать и адаптивный шаблон. Итак, HTML-структура будет выглядеть следующим образом.
К получившемуся меню необходимо будет добавить стили CSS. В них следует указать размер и цвет шрифта, фон, позиционирование блоков. Процесс адаптацииСоздание простого функционала для обычного компьютерного экрана - дело простое, и это можно увидеть на примере. Адаптивное меню для сайта создается только тогда, когда есть с чем работать, то есть когда уже добавлены пункты навигации. Самым оптимальным вариантом меню для мобильных устройств и планшетов станет значок гамбургер - квадратное поле, в котором нарисованы три При нажатии открываются все пункты меню. Чтобы создать такую навигацию, в HTML- документ необходимо добавить тэги. Далее необходимо будет добавить к этим тэгам соответствующие стили, чтобы получилось визуально привлекательное и читабельное меню. Помимо визуального оформления навигации и иконки меню, нужно оформить соответствующим образом позицию изображения. Так, вводится условие menu_icon span:nth-child(1) {top:0 px};. То есть отступ изображения сверху составит ноль пикселей. Подобным образом необходимо задать значения и для других сторон. Теперь адаптивное меню почти готово. Стоит обратить внимание на условие По умолчанию иконка меню не будет видна на сайте, поэтому в CSS-документ необходимо добавить дополнительный класс с таким условием: .menu__icon {display: inline-block;}. Это сделает навигацию видимой. К тому же необходимо добавить в каскадную таблицу стилей задачу, что будет скрывать пункты и подпункты по мере необходимости. Для этого в CSS нужно задать фиксированную позицию меню, оформить дисплей и выравнивание. Пункты скрывают при помощи условий overflow:auto; opacity:0; z-index:1000. Также можно добавить класс menu__links-item, что укажет стиль для пунктов меню, но это уже по желанию разработчика. Последний штрихТаким образом, адаптивное меню на CSS почти закончено. Для того чтобы оно отображалось при клике на иконку, необходимо добавить функции. Для простоты лучше использовать jQuery, но если есть желание, можно создать чистый JavaScript. И там, и там будет использоваться одинаковое условие:
На этом верстка адаптивной навигации заканчивается. Но это лишь один из нескольких вариантов создания такого рода функционала, так что стоит рассмотреть остальные. По крайней мере, несколько из них. Не изменяя стандартамОсновная часть интернет-пользователей ожидает увидеть строку навигации вверху сайта. Это уже стало своеобразным стандартом, поэтому адаптивное горизонтальное меню должно иметь достойный вид. Его можно сделать при помощи CSS, как в примерах, что приведены выше, так и с помощью подключения скрипта обработчика. В целом создание адаптивного меню состоит из 3 шагов: Естественно, на всех сайтах есть свои строки меню, но если ресурс создан на CMS, то намного проще будет создать новое адаптивное меню. BootstrapСоздание адаптивного функционала не является такой серьезной проблемой, если воспользоваться инструментами Bootstrap. Здесь уже заранее заложены шаблоны для создания горизонтального меню. Нужно лишь подключиться к ресурсу файл bootstrap.js. С помощью этого фреймворка веб-мастер получает возможность создавать навигацию любой сложности. Адаптивное меню с Bootstrap создается при помощи определенного кода. Особенности методаПусть этот код и громоздкий, зато понятный. Стоит обратить внимание, что основную роль здесь играет тег nav , что отвечает за создание навигации и ее внешний вид. Также сюда подключены контейнеры container-fluid и container , которые задают ширину пунктов. С их помощью можно заставить меню расширяться на экранах разного разрешения или оставить его фиксированным. Немаловажную роль в создании адаптивного функционала здесь играют классы collapse и navbar-collapse , которые отвечают за стиль. Само меню создается путем записывания пунктов, что размещены горизонтально. Если применить для создания навигации этот код фреймовки, то на широких экранах она будет выглядеть как горизонтальный баннер. В начале будет находиться название ресурса, а затем пункты в строго заданной последовательности. На узких экранах будет отображаться только название сайта и значок гамбургер, при нажатии на который позиции меню отображаются в виде вертикального списка. Выпадающее менюРесурс Bootstrap станет отличным помощником для создания адаптивного выпадающего меню. Для этого достаточно просто заменить строку тега
Подобное можно сделать как для одного пункта, так и для нескольких. Возле позиции с выпадающими подпунктами появится стрелочка, указывающая вниз. При нажатии будет появляться созданный список. Если навигация будет высвечиваться на маленьком экране, то пункт с выпадающим списком тоже будет обозначаться стрелочкой, но с направлением в правую сторону. При нажатии появится еще один вертикальный список подпунктов. Многоуровневое менюОднако создавать можно не только при помощи Bootstrap. Если эта библиотека не подключена, можно создать адаптивное многоуровневое меню при помощи HTML и CSS с последующим подключением функции РНР. Для начала необходимо создать в HTML-файле ненумерованный список, который включает другие списки. Для этого стоит использовать стандартные теги
Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его. #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. Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page. Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока. Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как создать адаптивное меню для сайта. Создавать будем горизонтальное меню, которое будет адаптироваться под экраны мобильных устройств. А его универсальность заключается в том, что независимо от технологии создания вашего сайта, это меню будет работать на любом сайте. То есть достаточно исправить ссылки, название пунктов меню и подправить стили по ваш дизайн. Ранее, я уже публиковал статью, в которой поделился . А сегодня рассмотрим ещё один способ. Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так: На мобильных устройствах, меню в раскрытом виде будет отображаться так: Принцип построения универсального адаптивного меню.Итак, для того чтобы создать такое меню вам потребуется: Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню. На большинстве сайтов, которые сделаны на CMS, проще создать новое меню, чем переделать старое. Так как само построение меню реализовано через php и запросы к базе данных, а стили css разбросаны среди многих других стилей. В общем, весь этот процесс переделки меню довольно трудоёмкое и кропотливое занятие. На самописных сайтах работы с переделкой будет меньше, но все, же придётся повозиться. В любом случае вы можете использовать стили и скрипт из этой статьи и адаптировать своё меню. А для того чтобы создать новое адаптивное меню вам потребуется совсем немного времени. Изначально создаётся меню на основе тегов ul и li , затем добавляются стили css и подключается скрипт. Такое меню загружается и отзывается быстрей, так как работает без запросов к базе данных. Стили css, для удобства, подключаются в отдельных файлах. Хотя их можно включить и в основные стили сайта. Я покажу пример подключения стилей через отдельные файлы. Процесс создания адаптивного меню.Шаг 1. Создание html структуры меню.Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс. После того как вы определитесь с местом вставки нового меню, необходимо в это место поместить вот этот html каркас и изменить пункты меню и ссылки на свои. Бизнес в Сети Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт. Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код: . Если раскрывающихся пунктов меню у вас несколько используйте этот код. Шаг 2. Подключение стилей css.Для того чтобы упростить процесс и не путаться с , подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами … . По крайней мере, это так в большинстве современных шаблонах. Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню. Но, для начала вы должны скачать файлы со стилями и скриптом . После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php , между тегами ХЕД добавить вот эти строки подключения: Шаг 3. Подключение библиотеки jQuery и скрипта обработчика. И для завершения адаптации меню необходимо добавить подключение библиотеки jQuery и скрипта, который будет раскрывать меню при нажатии. И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве. В том же файле header.php , перед закрытием тега вставляете вот эти строки кода:
Примечание: файл bootstrap.min.js , вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу. Итак, всё готово, можно проверять результат. Медиазапросы построены на точке 768 px, как только экран браузера станет меньше этой величины, меню адаптируется. Точку медиазапроса вы можете поменять в файлах стилей. А теперь в качестве наглядного примера, как работает адаптивное меню, и как его установить на сайт предлагаю посмотреть видеоурок.
На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках! Похожие статьи на эту тему: Добавляем HTML
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
Последняя строка отвечает за навигацию при маленьком разрешении экрана. Добавляем CSSАрхив с примером содержит файл style.css
.
Из архива копируем папку js. И подключаем скрипты в наш html документ.
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово! Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети. |