Здравствуйте, уважаемые друзья. Как и обещал, сегодня я расскажу о том, как создать адаптивное меню для сайта.
В своей предыдущей статье я рассказал, как адаптировать шаблон wordpress, где были адаптированы основные блоки шаблона. А теперь пришло время меню. Для создания адаптивного меню нужно приложить также немало усилий. Сделать элементы меню достаточно крупными и удобными для мобильных пользователей.
- В чем сложность адаптации меню
- 2 простых решения для адаптации меню
- Первый способ — адаптивное меню с помощью CSS и JS
- Шаг 1. Анализ.
- Шаг 2. Определение точек излома.
- Шаг 3. Решить, как будет адаптироваться ваше меню.
- Шаг 4. Создание мобильного меню.
- Шаг 5. Подключение медиазапросов.
- Шаг 6. Стили для мобильного меню.
- Шаг 7. Подключение скрипта.
- Второй способ — адаптивное меню с помощью тега select и jquery
- Шаг 1. Подключение библиотеки jquery.
- Шаг 2. Подключение скрипта обработчика.
- Шаг 3. Стили для медиазапроса.
В чем сложность адаптации меню
Пожалуй, адаптировать меню в некоторых случаях сложнее чем адаптировать весь дизайн сайта.
И сложность не в том чтобы уменьшить размер меню или переместить его, для удобства мобильных пользователей. Всё это можно реализовать при помощи css стилей и это будет прекрасно работать на компьютере. Но, не на мобильных устройствах.
Вся сложность в том, что меню на мобильных устройствах должно быть компактным и в то же время удобным для пользователя. Как правило, меню, в зависимости от размера экрана мобильного устройства, адаптируется вместе с шаблоном. Меняется размер, положение, а для совсем маленьких экранов — делается в виде одной большой кнопки, по которой легко нажать пальцем. А пункты меню открывается в виде списка с крупными шрифтами, что удобно для мобильных пользователей.
Вот именно это открытие меню по щелчку вызывает некоторые трудности. Реализовать открытие меню при наведении курсора можно через css стиль hover – это хорошо работает на компьютере, но вы попробуйте сделать это на сенсорном экране. Так что такой вариант отпадает.
Также можно организовать открытие меню по щелчку с помощью хитрого css стиля (focus), но эффект не будет работать на некоторых браузерах мобильных устройств. Что тоже нехорошо.
И поэтому для решения этой задачи потребуется использовать небольшой скриптик. Который всего лишь будет подставлять нужный стиль в момент нажатия по кнопке.
2 простых решения для адаптации меню
Первый, и наиболее распространённый способ – это подстраивать меню (уменьшать размер и положение) до определённых точек излома, а на самых маленьких экранах преобразовывать в кнопку с выпадающим списком при нажатии.
Этот способ удобен, да и кнопку можно оформить под любой дизайн сайта. Можно также использовать псевдоэлементы before и after и сделать кнопку в виде иконки. Получится стильно и современно.
Этот способ подразумевает под собой построение меню с определёнными классами, присвоение стилей к этим классам и привязка небольшого скрипта. Звучит сложно, но на деле всё гораздо проще.
Второй способ – меню, реализованное при помощи тега селект (select). Вся реализация проходит в три действие. Достаточно добавить небольшой скрипт и меню само будет преобразовано в список. Вид самого списка меню вы можете оформить в соответствии с дизайном вашего сайта. А выбор самих пунктов меню будет осуществляться как в мобильных приложениях.
Такой подход удобен тем, что пункты меню достаточно крупные и мобильным пользователям удобно осуществлять свой выбор. Этот способ очень хорош, когда в меню достаточно много пунктов. Список пунктов будет занимать определённое место, а для просмотра всех пунктов меню появится вертикальная прокрутка. В первом же случае, такое удобство придётся делать самостоятельно через стили css.
Первый способ — адаптивное меню с помощью CSS и JS
Шаг 1. Анализ.
Первым делом нужно провести анализ и выяснить, как выводится меню на вашем сайте. В большинстве шаблонов WordPress, да и других системах CMS, — меню выводится с помощью php. В шаблоне фрагмент кода, отвечающий за вывод меню, будет выглядеть примерно так:
Ваша задача найти это фрагмент кода и обратить внимание на идентификаторы и классы. Через эти классы нужно будет настраивать адаптивный стиль меню.
Также для анализа и определения классов следует использовать панель разработчика в браузере.
Шаг 2. Определение точек излома.
Когда вы узнали, как выводится меню на сайте, и знаете, какие классы и идентификаторы присвоены, можно приступать к поиску точек излома. Для этого я использую «Режим адаптивного дизайна» в браузере Firefox.
Хотя вы можете делать это и в Chrome, вызвав панель разработчика и уменьшая окно браузера по горизонтали.
Ваша задача найти точки, при которых меню плохо просматривается, или исчезает с экрана, либо ломается.
На скриншоте выше показано, как определить такие точки.
Шаг 3. Решить, как будет адаптироваться ваше меню.
Это очень важный шаг. Нужно продумать механизм адаптации. На примере шаблона, который я адаптировал в прошлой статье, видно, что меню расположено в сайтбаре. В этом шаблоне изначально можно выводить меню только так. До определённой точки 480рх, меню будет ужиматься, и адаптироваться вместе с сайтбаром. А после срабатывания медиазапроса, сместится вниз под блок с контентом, вместе с сайтбаром. И выровняется во всю ширину.
Таким образом, мобильный пользователь может и не увидеть меню сайта.
В этом случае целесообразно меню в сайтбаре скрыть, а под заголовком вывести кнопку с вертикальным меню, которое будет открываться при нажатии.
Другой вариант, когда меню расположено горизонтально в шапке или под ней. В таком случае меню до определённой точки может перестраиваться, уменьшаться. А для смартфонов заменяться кнопкой или списком.
В общем, ваша задача продумать, как более удобно преподать меню сайта для пользователей. От этого и будет зависеть адаптация меню. В некоторых случая может потребоваться даже перестроить всё адаптивное меню.
Шаг 4. Создание мобильного меню.
В этом примере, я хочу показать вам, как меню из сайтбара будет скрыто от глаз посетителя, а на видимом месте появится меню, созданное для мобильных устройств.
Для этого я открываю административную панель WP – «Внешний вид» — «Редактор» — «Заголовок (header.php)» — выбираю место под шапкой и вставляю вот этот код:
<nav id="adaptivmenu" class="main-navigation"> <h3 class="menu-toggle">Меню</h3> <div class="menu-menu-container"> <ul id="menu-menu" class="nav-menu"> <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> </div> </ul> </nav>
Меню создано с помощью html, что уменьшает нагрузку на сервер, нет обращений к базе данных.
Но, в таком виде, меню без стилей будет выглядеть убого.
Поэтому дальше нужно подключить медиазапрос и присвоить стили для меню. Ну а чтобы меню не было видно до выполнения медиазапроса, — следует в таблицу стилей добавить вот такой стиль:
/*Скрываем мобильное меню на компьютере*/
#adaptivmenu {display: none;}
Этим стилем мы скрываем меню с глаз пользователей компьютеров, ноутбуков, планшетов, в общем всех. А для мобильных устройств мы покажем это меню, применив соответствующий стиль в медиазапросе.
Шаг 5. Подключение медиазапросов.
О том, какими способами можно подключать медиазапросы, и как лучше это сделать в конкретных случаях, вы можете прочитать здесь.
В данном случае, я буду подключать медиазапросы в основном файле стилей (style.css).
Как вы помните, точкой, при которой меню ломалось в шаблоне – была ширина 480px. Именно на эту точку и будет ориентирован медиазапрос. То есть, как только ширина экрана мобильного устройства будет меньше этой точки, вступят в действие стили, указанные в медиазапросе.
Итак, в конце файла style.css добавляем вот это код:
@media only screen and (max-width: 480px) {
Здесь будут стили, которые вступят в силу на экранах 480px и меньше.
}
Шаг 6. Стили для мобильного меню.
Для того чтобы меню приобрело достойный вид, я применяю вот эти стили:
/*Стиль адаптивного меню*/ .main-navigation { margin-top: 8px; text-align: center; } .main-navigation li { margin-top: 24px; margin-top: 1.714285714rem; font-size: 0.75em; font-size: 0.857142857rem; line-height: 1.42857143; } .main-navigation a { color: #5e5e5e; } .main-navigation a:hover { color: #21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: inline-block; } /*Стиль кнопки Меню*/ .menu-toggle { padding: 6px 10px; padding: 0.428571429rem 0.714285714rem; font-size: 0.6875em; font-size: 0.785714286rem; line-height: 1.428571429; font-weight: normal; color: #7c7c7c; background-color: #e6e6e6; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: linear-gradient(top, #f4f4f4, #e6e6e6); border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); cursor: pointer; margin: 0px 0 3px 0; } .menu-toggle:hover { color: #5e5e5e; background-color: #ebebeb; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb); background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb); background-image: linear-gradient(top, #f9f9f9, #ebebeb); } .menu-toggle:active, .menu-toggle.toggled-on { color: #757575; background-color: #e1e1e1; background-repeat: repeat-x; background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1); background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1); background-image: linear-gradient(top, #ebebeb, #e1e1e1); box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4; border-color: transparent; } /*Стиль выпадающего меню*/ #adaptivmenu {display: block; text-transform: uppercase; text-align: right; line-height: 50px; margin-right:1%; text-shadow:0 1px 1px black; -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius:5px; } #adaptivmenu ul {padding:0; margin:0; background: #63A6DD; border-radius: 5px;} #adaptivmenu li{ list-style:none; margin: 5px 10px; } #adaptivmenu li a { padding:5px 10px; color:#fff; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #adaptivmenu li a:hover{ background: #fff; color: #000; -webkit-transition-property: color, background; -webkit-transition-duration: 0.5s, 0.5s; } /*Скрываем стандартное меню*/ #nav_menu-2 {display:none;} }
Как вы уже поняли, стили эти вставляем в медиазапрос. Разумеется, я применил эти стили к конкретному шаблону и к меню. Вы же можете взять их за основу и создать стили под дизайн вашего сайта.
Шаг 7. Подключение скрипта.
Всё уже почти готово, осталось подключить скрипт, который будет добавлять к классу .menu-toggle
ещё и класс .toggled-on
. Без него ваша кнопка не будет раскрывать меню при нажатии.
Для начала скачайте файл-скрипт. Он расположен на моём Яндекс.Диске – здесь.
После этого если вы используете меню как у меня, и не меняли классы и идентификаторы, то в файле редактировать ничего не надо. Если классы в меню меняли, то подправьте их и в скрипте.
Файл-скрипт нужно скопировать в папку js в вашей теме. Если такой папки там нет, — создайте её.
/public_html/ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/js/navadaptiv.js
Далее, открываем административную панель WP – «Внешний вид» — «Редактор» — «Функции темы» — и в самом конце, перед закрытием php (?>) вставляете вот этот код:
wp_enqueue_script( 'default-navigation', get_template_directory_uri() . '/js/navadaptiv.js', array(), '1.0', true );
В этой строчке вам нужно изменить название темы default на название вашей темы. Название должно в точности совпадать с названием вашей темы.
Сохраняете и всё готово. Можно проверять.
На примере первого способа можно создать горизонтальное адаптивное меню. Тоже очень солидно смотрится и его можно установить на любой сайт.
Второй способ — адаптивное меню с помощью тега select и jquery
Здесь всё достаточно просто, в сравнении с предыдущим примером.
Шаг 1. Подключение библиотеки jquery.
Как правило, в вашем шаблоне уже подключена эта библиотека. Если же нет, то открываете файл header.php и перед закрытием тега </head>
вставляете вот этот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Шаг 2. Подключение скрипта обработчика.
Итак, данный скрипт нужно разместить в заголовок вашего шаблона. Или можете сохранить в отдельный файл и подключить, как в предыдущем примере.
<script> // Начало $(function() { // Создание выпадающего списка $("<select />").appendTo("nav"); // Определение пункта по умолчанию "Меню" $("<option />", { "selected": "selected", "value" : "", "text" : "Меню" }).appendTo("nav select"); // Преобразование меню в пункты списка $("nav a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("nav select"); }); // Переход к выбранным пунктам пеню $("nav select").change(function() { window.location = $(this).find("option:selected").val(); }); }); </script>
Шаг 3. Стили для медиазапроса.
И в завершение нужно в медиазапрос добавить стили. Эти стили позволят скрыть меню в виде списка и показать обычное меню и наоборот.
Для медиазапроса на точке 760px я использую вот эти стили:
nav {display: line-block;} nav select {display: none;}
Таким образом, до следующего медиазапроса в 480рх – будет отображаться обычное меню, а после появится адаптированное.
Стилей для красоты я не добавлял, вы же сможете это сделать в соответствии с дизайном вашего сайта.
Повторная проверка сайта на удобство для мобильных пользователей, показала улучшение показателя на 2 пункта, с 94 до 96.
На этом адаптация меню закончена. Но, я предлагаю вам посмотреть видео урок, в нём я наглядно показываю шаг за шагом, как создаю эти два адаптированных меню.
Друзья, всем желаю успешной адаптации ваших меню. Если будут вопросы, всегда готов помочь. До встречи в новых статьях.
С уважением, Максим Зайцев.
Вот по поводу select есть некоторые сомнения в плане сео, получается два меню(а ля дубль) как поисковики относятся к этому?
Здравствуйте, Денис. Думаю, поисковики отнесутся к нему также, как к меню в футере, которое дублирует пункты основного меню и сделано для удобства посетителя.
Меню в футере немного другая ипостасия — оно семантически располагается в разных блоках. А тут получается как два заголовка один из которых скрыт, так как одно меню идет под другим. Как пример шаблон Twenty Twelve и его аналоги там грамотно сделано адаптивное меню.
Ну так ведь ни кто не мешает добавить идентификатор или класс к основному меню и сделать его адаптивным по принципу первого примера. Я лишь показал два решения этой задачи. И оба варианта рабочие.
А по поводу подобного дублирования, достоверной информации я не встречал. Поэтому судить о реакции поисковиков весьма затруднительно.
И вот тут:
a href="#" rel="nofollow">Демонстрационная страница
a href="#" rel="nofollow">Об авторе
вместо решетки надо свои ссылки подставить?
Да, просто нужно вставить свои ссылки.
Скажите, если делать по первому способу, то как тогда написать пункты меню, если в них еще есть подпункты (скриншот — https://yadi.sk/d/DZiks7Lth4rhB)? Если можно, то напишите пример такого варианта…
Всё зависит от того, как реализовано меню. Через php или html. Если через php, скорей всего подпункты сами будут отображаться со смещением. Если же создавать меню на html, то структура его будет такова (Важно: в примере нет треугольных скобок > в начале и в конце списков и ссылок. Их нужно будет добавить. По другому пример не отобразится):
ul id="menu-menu" class="nav-menu">
li a href="ссылка" rel="nofollow">Главная /a /li
li a href="ссылка" rel="nofollow">Пункт /a
ul сюда можно добавить класс для создания стилей подпунктов>
li a href="ссылка" rel="nofollow">Подпункт /a /li
li a href="ссылка" rel="nofollow">Подпункт /a /li
/ul
/li
/ul
Через html. Получается, после /ul> можно опять ставить главные пункты меню <li, то есть <ul подставлять в нужные <li? Кстати, как только сделал сайт резиновым, хотя и некорректно еще отображается (буду все дорабатывать), но гугл уже сказал, что отлично и ваш сайт оптимизирован под мобильные устройства, хахх. Вот теперь надо раскрывающееся меню организовать, оно то как раз и портит весь вид.
Первый способ мне понравился, тем более, он уже имеет блоки и семантически все грамотно. Там где классы и идентификаторы у вас указаны, то соответственно надо на свои поменять?
Да, всё верно в теги ul заключаются нужные подпункты меню. А по поводу классов и идентификаторов, то можно менять на свои, а можно и для этих прописать стили.
Вот этот идентификатор adaptivmenu нужно поменять на свой соответствующий (как в моем шаблоне)? Еще, например, у меня нету таких классов, как h3 класс и div класс, значит их вообще не указывать — вычеркнуть?
Да, лишние элементы можно не использовать. Стоит работать только с теми тегами и блоками, которые относятся к меню. Незачем раздувать код.
У меня вот это:
echo ‘
‘; И все.
Всего кода не вижу, но оператор
echo
отвечает за вывод того, что находится между кавычками. Если так реализовано меню, то его можно использовать и для адаптации. Только в медиазапросах прописать новые стили, при которых меню просто будет менять вид.»
»
что-то коды у вас не отображает…
Янис, у меня коды в комментариях заблокированы. Для их отображения, стоит убирать кавычки, скобки, так чтобы функции выглядели как текст.
Реально свихнуться можно с этими кодами. Но главное, что адаптивное меню, которое начал делать, уже отображается на сайте, значит иду по правильному пути.
Конечно вы на правильном пути
Максим, подскажи еще пожалуйста вот здесь: https://yadi.sk/d/Wi2Orh5ch64yA (скрин), делал по твоему примеру, но меню становится горизонтально, так как у меня в таком виде реализовано изначально (сайдбаров нет), при этом там еще в некоторых пунктах есть подпункты. Твои стили css из статьи походу не подойдут уже для моего меню, что на скрине? Вот как тут посоветуешь?
Мне вот важны все эти вопросы, что выше спрашивал, ответь пжл, я потом уже сам буду мозговать, главное сам принцип я уже понял и он начал получаться.
Янис, конечно придётся индивидуально подбирать стили для твоего меню. Мои стили можно взять в качестве примера, только изменив название классов и идентификаторов. То, что меню отображается горизонтально не проблема, за это отвечает стиль
display
. У тебя скорей всего это будет выглядеть примерно так:display: inline-block;
. Убираешь inline, и получается блочный элемент.А вообще в качестве примера, можешь взять полностью меню и стили из статьи, вставить на сайт и посмотреть как получится. А уже стили можно доработать под дизайн и добавить нужные пункты и подпункты меню. Тут главное, что ты понял принцип.
Пробовал все скопировать с первого способа и вставить, только свои ссылки прописал в меню, все ставится, осталось скрипт в нужном месте подключить. Правильно ли я понял, что по первому способу получается как бы отдельный блок html со стилями, никак не связанный с моим выводом меню в шаблоне (с моими ид и классами родного меню), подключается отдельно и не использует функции php, единственное что нужно — это найти идентификатор родного меню и скрыть его на определенной точке в медиазапросе?
А вот если я хочу обобщить классы и ид обоих меню, то также могу это сделать для удобства, так?
Ну и последний вопрос, как происходит вывод меню в большинстве шаблонов, то есть каков порядок действий функционала сайта, например, сначала срабатывает код в таком то файле, потом выводит то-то… Опиши плиз, мне это поможет понять весь цикл?
Уже поделился статьей в вк и гугл+.
Янис, если взять меню из статьи, то оно не будет связано с меню на твоём сайте. Ты правильно понял, такое меню ни связано с php и базой данных. Работает гораздо быстрей. Такое меню можно добавить на любом сайте.
По поводу объединения классов и идентификаторов, объединить их можно. Но, вот стили придётся править, а иначе получится «винегрет».
В большинстве шаблонов меню организовано через php. Многие его потом переделываю на html. Меню на php построено на ID записи в базе данных. Как правило пишется функция-запрос на выбор записей из таблицы по ID, результат выводится в виде пунктов меню. Которые через стили приводятся в соответствие с дизайном.
Спасибо, что поделился статьёй
Смотри, если меню на php, то ид указано в базе данных, а в html коде оно пишется как-нибудь (типа див блок) или сразу в стили css с ид как в базе данных?
И такое: значит то, что через html — то не запрашивает базу данных, а php запрашивает?
Нет, блоки и идентификаторы прописаны в исходном коде шаблона, а внутрь включается php функция вызова меню. Запросы к базе идут только при создании меню по средствам php. Через html ни каких запросов в базу не посылается.
Значит, если меню создано по средствам php, то блоки и идентификаторы для него в исходном коде шаблона не прописываются?
В большинстве случаев в исходном коде прописаны блоки и теги списка, а классы и идентификаторы подставляются из база, как и пункты меню. Но бывает, что html структура полностью прописана в исходном коде, а пункты меню выводятся по средствам php.
Пытаюсь подключить скрипт wp_enqueue_script…..; в SMF, никак не получается. Там обычно все выводится через echo^, вот как его туда правильно вставить, постоянно пишет — ошибка синтаксиса, сам скрипт как и положено — в папке js?
Честно, я с SMF и не работал, поэтому подсказать в этом вопросе не могу. Попробуй подключить скрипт в шапке, между тегами
head
, добавивscript src="ссылка к скрипту">
Жесть. Перепробовал уже все на свете, кнопка видна и меню создано, но раскрываться никак не хочет! Скрипт закинул в папку js, между head ставлю script src=»/scripts/navadaptiv.js»></script (треугольники по краям), может что со скриптом не так?
Попробуй ещё перед src добавить
type="text/javascript"
.Если же вставлять в echo ‘ код подключения скрипта wp_engueue………, то пишет ошибка синтаксиса и сайт не открывается, а ошибку указывает в том, что типа одинарные кавычки должны быть экранированы — вот как этот код подключения скрипта экранировать?
Нет, через экхо не получится, нужно пробовать подключать скрипт между тегами head. А вообще постараюсь выкроить время и написать статью по созданию универсального адаптивного меню, которое будет работать на любой платформе.
Янис, я как понял из разговора меню делается для форума? Вижу что часть работы вы сделали, кнопка меню появляется. Но оно не работает так как не правильно прописаны медиа-запросы это раз и второе не увидел ява скрипта подключеного на странице который будет раскрывать это меню это два. Поработайте над этими ошибками и все заработает. Хотя мое мнение для форума можно найти адаптивную тему и не изобретать велосипед.
Ява скрипт закинул в папку со скриптами js, а уже эту строку для подключения пытался вставлять между head (wp_enqunu…), также и сам скрипт пробовал разными способами в head, как Максим выше писал — никак не хочет подключаться. Не, медиазапросы все верно прописаны. Мне на форуме еще одно решение подсказали, испробую — отпишусь.
Еще все дело в том, что SMF — это движок на php, а вот в head все выводится через эти гребаные echo…
Не, ребята, бросил я эту затею с меню, все на свете перепробовал, в SMF не работает ни первый, ни второй способ. Скрипты вообще не подключаются///
Без скрипта не получится, нужно разобраться в этом вопросе. Янис, открой файл, где в теги head подключены другие скрипты на твоём сайте. Посмотри как и сделай также, изменив путь к файлу. Должно получится.
Я так уже пробовал, что-то не подключается. В первом способе кнопка появляется, но никак не хочет открываться, а во втором мобильное меню никак не появляется.
Янис, в скором времени я подготовлю статью по способу создания универсального адаптивного меню. Сейчас заканчиваю тестирование. Оно идеально подойдет для твоего форума. Так что подожди немного, и пока всё таки разберись с подключением скриптов, а то без них не получится. Удачи!
О, буду ждать с нетерпением! Да, окей, мне пока надо еще отточить некоторые моменты и на блоге и на форуме до ювелирной точности.
Вот который 2-й пример, он обрабатывает уже существующее меню или создает новое адаптивное? Если создает новое, то ведь ид к нему уже не пропишешь, только тогда по первому примеру? Ради интереса хотел узнать…
Второй вариант также скрывает обычное меню и показывает мобильное. Классы прописаны в скрипте и их можно поменять. А можно и под них стили прописать.
Вордпресс тоже на пхп сделан. Тут либо обратится к знающим людям либо поменять шаблон
Шаблон менять я пока не собираюсь, много над ним уже пришлось поработать. Тут бы поискать другое решение для такой вот кнопки меню. Есть еще много (модов), типа плагинов, для форума, где меню раскрывает, но, опять же, надо, чтобы они включались с определенной точки медиазапроса. Сейчас начал эту тему просматривать.
Здравствуйте.
У меня в cms меню на php, вывожу два меню, верхнее и нижнее.
И получается в мобильной версии, когда я нажимаю кнопку Меню у верхнего меню, то открываются сразу оба меню, а нижнее не активно по кнопке Меню.
Не подскажете как сделать чтобы два меню работали?
Роман, так сложно что-то посоветовать, нужно код смотреть. Но, скорей всего меню для ПК нужно будет скрывать (через display:none), а выводить меню для мобильных.
Здравствуйте, Максим. Можете мне помочь? Уже не первый день пляшу с бубном, но ничего не выходит.(
qlihost.ru/navigation.php
Добрый день. В чем проблема, что не получается?
Если меняю размер экрана меню не открывается qlihost.ru/testmenu.php, а когда начинаю вписывать код в своё меню, при уменьшении экрана становится интересная прокрутка по горизонтали.
В первую очередь нужно смотреть правильно ли подключен скрипт, а далее уже на стили. В вашем меню смотрите на родительские стили, которые могут наследоваться и меню работает криво.