Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как создать адаптивное меню для сайта. Создавать будем горизонтальное меню, которое будет адаптироваться под экраны мобильных устройств. А его универсальность заключается в том, что независимо от технологии создания вашего сайта, это меню будет работать на любом сайте. То есть достаточно исправить ссылки, название пунктов меню и подправить стили по ваш дизайн.
Ранее, я уже публиковал статью, в которой поделился двумя способами создания адаптивного меню. А сегодня рассмотрим ещё один способ.
Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так:
На мобильных устройствах, меню в раскрытом виде будет отображаться так:
Принцип построения универсального адаптивного меню.
Итак, для того чтобы создать такое меню вам потребуется:
- Создать html каркас.
- Применить стили css.
- Подключить скрипт обработчик.
Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.
На большинстве сайтов, которые сделаны на 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, как только экран браузера станет меньше этой величины, меню адаптируется. Точку медиазапроса вы можете поменять в файлах стилей.
А теперь в качестве наглядного примера, как работает адаптивное меню, и как его установить на сайт предлагаю посмотреть видеоурок.
На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!
С уважением, Максим Зайцев.
Сегодня же приступлю к реализации…
Желаю удачной реализации!
Максим, а что за сервис — Bootstrap?
Bootstrap предоставляет набор инструментов для создания адаптивных сайтов или их элементов, таких как меню. Можно отдельно воспользоваться css, html или js. Только вот если не умело их использовать, то может показаться, что пользы нет. Особенно это касается css стилей, в файле от сервиса стилей очень много и они могут перекликаться с основными стилями, в результате весь сайт меняется Поэтому необходимо соблюдать последовательность.
Максим, а если не секрет, сколько такое меню весит? Т.е. я вижу, что надо подключать: bootstrap.css, menu.css и bootstrap.min.js, про jQuery библиотеку я умолчу, т.к. она ещё может использоваться в других случаях.
Опять же, интересно как это меню в плане нагрузки? Всё таки мобильные устройства сильно уступают десктопам. Всё может очень тормозить и из-за менее сложных решений. Просто я глянул показатели вашего блога в PageSpeed Insights и вижу, что они средненькие — для мобильных 69 / 100, хотя и удобства хороши 97 / 100, но даже для десктопа 74 / 100.
Заранее огромное спасибо за ответы!
Здравствуйте, Сергей. Все необходимые файлы весят 95 Кб. Если посидеть и урезать стили, то размер сократиться ещё примерно на 60 Кб. В плане нагрузки меню практически незаметно.
Что же до моего блога, меню загружается 0,01 сек. Основной тормоз это изображения и не оптимизированный html, js, css. Изображения постепенно оптимизирую, а вот с кодом не удобно мне работать в одну строчку. Вот и оттягиваю пока работу над этим вопросом.
Ааааа, класс! Наконец-то все получилось. Но подключение скрипта и стилей я по-другому прописывал, там у меня в коде переменные все мозги драли, но разобрался. Теперь надо свое меню заново составлять, вчера почти час составлял и забыл сохранить, а потом к чертям все удалилось, вот буду заново! Еще раз огромнейшее спасибо за статью!
Максим, ты скрипты тоже по bootstrap писал, это типа автоматического конструктора?
Янис, очень рад, что всё получилось! Я обычно все делаю через Notepad++, гарантия от таких вот неприятностей. А скрипт я тоже сделал с помощью bootstrap, ты прав. Сперва скачиваешь универсальный вариант, а потом допиливаешь до результата.
Слушай, я тут подумал, дак теперь можно стандартное меню вообще убрать, как бы вырезать или лучше все-таки скрыть? А если скрыть — не получатся тогда дубли самого меню, ведь скрытие вряд ли поможет, в частности от поисковиков — все равно могут проиндексировать, статьи и посты по одному же адресу будут — правильно?
Меню лучше оставить одно. Оставь адаптивное меню и не придётся ничего скрывать, плюс загрузка будет быстрей. Пусть не на много, но быстрей.
У меня стандартное меню выводится через php и там к нему еще отдельные файлы есть в шаблоне (кнопки меню и прочие стили css). Мне тока удалить код php, который именно выводит меню в шаблоне (там пара строчек), а эти файлы пусть остатются? Ну на крайний случай я конечно копии сохраню куда-нибудь.
Да, удали только код вывода меню, файлы путь остаются на всякий пожарный случай.
Да, и все-таки, если скрыть к примеру — то ведь все равно могут проиндексировать поисковики, также?
Да, могут проиндексировать двойное меню. Когда меню скрывается в медиазапросах, это нормально, но когда одно скрыто просто так. Это уже подозрительно, с точки зрения поисковой системы.
Закончу с меню, хочу за подписку взяться. Я так понял, у тебя под статьями она через смартреспондер. Я как-то пытался «подружить» свою картинку со смартреспондером, еще та головоломка была и что-то не вышло. У тебя есть тут статья подобного рода? С феедбурнером получается. а вот со смартом туговато, а я именно через него хочу.
По созданию красивой формы подписки вот статья http://1zaicev.ru/kak-sozdat-krasivuyu-formu-podpiski/ Как раз по Смарту!
Вот у тебя html каркас для меню — для каждого пункта свой id и класс, но ведь можно прописать одинаковый для всех (пункты — один для всех, подпункты — аналогично другие ид и класс), если я не хочу, например, для каждого пункта свои стили прописывать?
Всё верно, я это сделал для тех, кто хочет сделать каждый пункт индивидуальным. Но, можно объединить классы и идентификаторы.
li id=»button_home» class=»dropdown»
<a class="dropdown-toggle" href="#" data-toggle="dropdown"
Главная
</a
</li
Максим, вот в этом месте, после href у тебя опять идет кусок кода data-toggle="dropdown", я его убрал. Иначе если нажимаешь на "главную" страницу, то не работает ссылка, а как убрал — заработало, что тут не так?
Янис, спасибо. Я забыл исправить, когда готовил статью, то первый пункт тоже был раскрывающийся. Подпункты убрал, а классы оставил. Молодец, что написал об этом, я уже всё изменения в статью.
У меня все получилось, да вот бьюсь теперь над тем, как свое стандартное меню вырубить. Место, где вставить адаптивное, нашел, не могу определить файл php, отвечающий за вывод старого меню.
Для меню, скорей всего, нет отдельного файла. Достаточно убрать код, отвечающий за вывод меню, из исходного кода шаблона.
Жесть, сам себе не верю, но вроде что-то вышло. Посмотри —
Тут у меня родилось 2 встречных вопроса:
1. Если уменьшаешь размер моего сайта, то в какой-то момент надписи рядом с аватаром (это зареганые пользователи видят) улетают под аватар в вертикальном положении, а как этой надписи прописать, чтобы она приняла горизонтальное положение на этой точке излома?
2. Смотри, мне кажется, было бы еще круче, если не приходилось бы нажимать на пункты меню, чтобы там выпали подпункты, а чтобы только палец навел — и они сами появлялись (как у тебя и у меня на сайте), а то приходится на них еще раз жать, можно ли это изменить?
По первому вопросу, попробуй использовать свойство
float
оно определяет обтекание элемента. Должно помочь.По второму вопросу, устройств с тачскрином много, но для всех действует едино правило — открытие при нажатии. Поэтому такой вариант будет работать на всех устройствах. Вариант открытия подпунктов при наведении курсора мышки можно дописать отдельно.
Даже если нажать на раскрывающиеся пункты и убрать палец, то они и остаются открытыми, что-то тут надо изменить…
Янис, да вроде, всё работает.
Короче — это жестяная жесть. Пришлось пока убрать адаптивное меню. Ведь у меня на форуме — вход/выход (с регистрацией). Я прописал все ссылки в меню в режиме входа, а если жмешь на ссылку — выход, то все пункты меню остаются на месте, а ведь надо, чтобы часть их исчезла от ненужных глаз (админка и прочее такое). Пока отдохну, надо прийти в себя, уже ничего не соображаю… Но меню очень твое понравилось — стильно и классно, только вот эти 2 момента: заклинивает раскрытие подпунктов и моя долбаная регистрация…
Было бы идеально просто, если бы через мое меню на php внедрить твое, но это уже придется все перестраивать, ведь у меня все пункты меню в отдельном php файле и оттуда хватаются через основной файл шаблона. Вот такие пироги.
Янис, вот с таким вариантом видимости пунктов меню для разных категорий пользователей всё конечно гораздо сложней. Можно, как вариант, к твоему меню прикрутить стили из моего. Либо продумать меню так, чтобы оно было единым для всех посетителей, если это конечно возможно. Может быть вынести блок входа и регистрации в отдельный блок ДИВ. Уверен, ты что-то придумаешь!
У меня тут возникла идея. Мне кажется реально можно прикрутить твое меню через вывод моего на php. У меня там стоит свой див с ид и классами, и вот попробовать заменить их на твои, стили css подключены и должно все подхватить. Попробую.
В принципе должно получится, но повозиться придётся. Для начала проанализируй все стили старого меню, возможно некоторые из них придётся применить и на адаптивном варианте. В любом случае если всё правильно соберёшь воедино, — должно получиться.
Максим, вот это реальная проблема — https://yadi.sk/d/J8HXDW-7hFyVR
На скриншоте как видно, если нажимаешь на раскрытие пунктов и убираешь палец — оно так и остается открытым, надо опять нажать — чтобы закрылось. Надо как-то сделать, чтобы при подведении и убирании пальца — она автоматом раскрывалось и закрывалось, а не тормозило так?
Здесь всё завязано на нажатие и обновление страницы. Но, можно у пункта убрать класс
dropdown
, а для класса подпунктовdropdown-menu
присвоить стильopacity: 0;
и убратьdisplay: none;
И добавить условие при наведенииdropdown-menu:hover {opacity: 1;}
. В таком случае при наведении курсора мышки будут появляться подпункты.Но, тут возникает и необходимость править стили медиазапросов. В общем как-то так.
Ты бы не мог переправить все это и заново перезалить? Не понимаю почему ты сразу так не сделал, а то реально стопорит как-то, ПФ точно будут не в восторге…
Я сосредоточил внимание на тачскрине, в мобильном меню такой вариант лучше смотрится. Переписать статью уже не получится, проиндексирована. Да и тут не просто внести правки, тут проще новую написать. Так как для претворения задуманного в жизнь нужно ещё и медиазапросы переделать так, чтобы для компьютера действовали одни стили, а для мобильных устройств другие. В противном случае на мобильных устройствах не будут видны подпункты. А учитывая, что я нахожусь в горах Северного Кавказа и интернет здесь просто финиш — могу только комментарии строчить
Ты пробуй реализовать переделку своего меню, а там эту фишку допилишь.
Окей. Просмотрю. Ты имел ввиду, что в медиазапросах изменять стили и классы, если реализовывать автоматически всплывающие подпункты? Просто, если получится вывести его через мое меню, то вариант автомат-всплывающие я бы сделал для компа, а для мобилы пусть как есть.
Вот именно это я и имел ввиду, придётся корректировать стили.
Слушай, Максим, может поможешь, хочется все-таки до конца довести это меню.
Вот у меня выводится меню таким образом:
1. В главном файле шаблона идет функция, которая выводит меню — template_menu();
2. Потом ниже идет код, который выводит все пункты меню —
// Show the menu up top. Something like [home] [help] [profile] [logout]…
function template_menu()
тут открывающаяся скобка
global $context, $settings, $options, $scripturl, $txt;
echo ‘
<div id="main_menu"
$button)
{
echo ‘
<li id="button_', $act, '"
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '
‘, $button[‘title’], ‘
</a';
if (!empty($button['sub_buttons']))
{
echo '
<ul';
foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '…' : '', '</span
«
</a';
3. Сами кнопки (пункты меню) прописаны в другом файле шаблона, но без стилей и классов, без ничего.
Вот вверху кода этот блок див с классами, а еще в коде вот это — firstlevel (это название класса, который стоит в ссылках пунктов меню перед href).
Может поможешь здесь, если что, глянь код меню моего форума через инструменты разработчика.
P.S. Везде справа я поубирал треугольник.
Тут уточнение, у тебя трудно вывести коды в комментариях.
Вот тут (начало кода):
echo ‘
<div id="main_menu"
<ul class="dropmenu" id="menu_nav"
Посмотрел, так как у меня с выводом кодов в комментариях заморочки, то итоговый вид меню в html и php я отправил тебе на электронную почту.
Чет я не увидел универсальности, да и предыдущие два способа в принципе тоже универсальны и работают при правильном применении, особено второй способ с селектом. По поводу бутстрапа — можно не скачивать полный фреймворк а в разделе касомации указать какие функции нужны это будет на порядок легковесней.
На мой взгляд, универсальность в простоте реализации. Хотя, вы правильно заметили, и первые два способа достаточно легко реализовать. Также горизонтальное расположение пунктов меню подойдёт для многих владельцев сайтов и блогов.
А по поводу фреймворка, то я использовал свой, который используется у меня в разных проектах. Хотя и тут вы правы, можно собрать только необходимые функции.
Нельзя как-нибудь полегче это сделать? )
Здравствуйте, Николай. На самом деле, ничего сложного. Но, у вас на сайте уже реализовано адаптивное меню. Которое, если оно вас не устраивает, вы всегда можете довести до идеала с помощью css стилей.
А можно исправить так, чтобы при нажатии на нужный пункт меню на мобильных устройствах, меню автоматически снова принимало компактный вид в виде одной полосы, а то получается, что нужно снова нажать на полоски, чтобы оно уменьшилось, пользователь может не сразу это понять…не удобно…подскажите что-нибудь
Здравствуйте, Марина. Меню так и работает, когда нажимаете на пункт меню, идёт перенаправление на нужную страницу и меню сворачивается. Я недавно работал над адаптацией одного сайта (posukan.ru), там я тоже использовал это меню. Можете посмотреть, работает всё отлично.
У меня одностраничник, то есть по меню идёт перенаправление внутри страницы…можно ли тут что-нибудь сделать?
Марина, без обновления страницы, в данном случае, никак. На вашем сайте я бы использовал дополнительные стили в медиазапросах и для маленьких экранов ваше же меню сделал более компактным, пунктом меню не так много и они будут отлично смотреться и будут удобны для посетителей.
А что именно посоветуете поправить…подскажите новичку
Марина, на пальцах сложно объяснить. Но, начните с этих классов ul.hr li, расположены на 104 строке в файле style.css. Уберите внутренний отступ padding и уменьшите внешний margin. Так же можно изменить фон пунктов меню и убрать линии подчёркивания.
Добрый день, Максим! Отличное меню, всё понятно, всё настроил и перекрасил под свой сайт, но вот одна проблемка — в добром, всеми любимом IE11 не работает выпадающее меню. Может у тебя уже есть готовое решение для этого?
Упс. Я уже сам понял почему. Браузер блокировал работу скрипта..
Александр, добрый вечер. Хорошо, что вы разобрались с проблемой.
Установил меню, только почему-то выравнивание идет по левому краю, можно ли его как-нибудь сделать по центру и сделать резиновым? Пол дня тыкаюсь, никак параметр найти не могу. Может подскажите какой именно параметр отвечает за это?
Здравствуйте, Андрей. Меню и так должно выравниваться по центру, и растягивается на всю ширину блока в котором расположено. Но, я вижу, что вы на сайте использовали другой способ создания меню, который я описывал в этой статье: http://1zaicev.ru/kak-sozdat-adaptivnoe-menyu-dlya-sajta/ Да, это меню выравнивается по правому краю. Если нужно выровнять по центу, то уберите
text-align: right;
для идентификатора #adaptivmenu А для резиновой вёрстки нужно определить параметры ширины width: 100%; для#adaptivmenu
.menu-toggle
#adaptivmenu ul
И подправить отступы, если это будет нужно. Пробуйте, должно получиться. Желаю удачи!Спасибо огромное за урок,все четко и понятно.У меня все получилось с первого раза.
Делайте побольше похожих уроков.
Удачи вам.
Тимофей, добрый день. Спасибо за оценку и пожелание. И вам удачи!
Максим, добрый день.
Тема актуальна как никогда, на дворе 2018 год..
Подскажите пожалуйста, как поменять цвета в мобильной версии?
Из файла: menu.css меняю цвета в «полной версии».
В мобильной остаются прежним.
https://yadi.sk/i/9Z117vBY3WjRTa
Здравствуйте, Александр. Да, через menu.css меняется цвет для меню. Если вы хотите сделать разные цвета для разных типов экранов, тогда создайте медиазапрос и через него задайте цвета для меню на маленьких экранах.
Давно хотел такое меню. Есть на сайте и мобильная версия и турбо яндекса. Но если не трудно. Не могу понять. Всё как-бы работает. Только почему-то с пунктов без вложенных списков.(главная, контакты) браузер показывает правильную ссылку, но не переходит на эту страницу. На моб устройствах тоже самое. Спасибо.
Извиняюсь за назойливость. Убрал из кода (data-toggle=»dropdown») и всё заработало. Есть ещё косяки в галереях. Меню не видит ни стилей ни скриптов ни библиотеки. Ну это долбаный юкоз. У него вообще всё очень мудро. Все остальные сайты уже давно на php В общем извиняюсь за беспокойство.
Анатолий, рад что разобрались.