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

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

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

В чем сложность адаптации меню

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

И сложность не в том чтобы уменьшить размер меню или переместить его, для удобства мобильных пользователей. Всё это можно реализовать при помощи 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>
Подключение библиотеки JQuery
Подключение библиотеки JQuery

Шаг 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.

Улучшение показателей
Улучшение показателей

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментарии: 49
  1. Denis

    Вот по поводу select есть некоторые сомнения в плане сео, получается два меню(а ля дубль) как поисковики относятся к этому?

    1. Максим Зайцев (автор)

      Здравствуйте, Денис. Думаю, поисковики отнесутся к нему также, как к меню в футере, которое дублирует пункты основного меню и сделано для удобства посетителя.

      1. Denis

        Меню в футере немного другая ипостасия — оно семантически располагается в разных блоках. А тут получается как два заголовка один из которых скрыт, так как одно меню идет под другим. Как пример шаблон Twenty Twelve и его аналоги там грамотно сделано адаптивное меню.

        1. Максим Зайцев (автор)

          Ну так ведь ни кто не мешает добавить идентификатор или класс к основному меню и сделать его адаптивным по принципу первого примера. Я лишь показал два решения этой задачи. И оба варианта рабочие.
          А по поводу подобного дублирования, достоверной информации я не встречал. Поэтому судить о реакции поисковиков весьма затруднительно.

      2. ЯНИС

        И вот тут:
        a href="#" rel="nofollow">Демонстрационная страница
        a href="#" rel="nofollow">Об авторе
        вместо решетки надо свои ссылки подставить?

        1. Максим Зайцев (автор)

          Да, просто нужно вставить свои ссылки.

  2. ЯНИС

    Скажите, если делать по первому способу, то как тогда написать пункты меню, если в них еще есть подпункты (скриншот — https://yadi.sk/d/DZiks7Lth4rhB)? Если можно, то напишите пример такого варианта…

    1. Максим Зайцев (автор)

      Всё зависит от того, как реализовано меню. Через 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

      1. ЯНИС

        Через html. Получается, после /ul> можно опять ставить главные пункты меню <li, то есть <ul подставлять в нужные <li? Кстати, как только сделал сайт резиновым, хотя и некорректно еще отображается (буду все дорабатывать), но гугл уже сказал, что отлично и ваш сайт оптимизирован под мобильные устройства, хахх. Вот теперь надо раскрывающееся меню организовать, оно то как раз и портит весь вид.

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

        1. Максим Зайцев (автор)

          Да, всё верно в теги ul заключаются нужные подпункты меню. А по поводу классов и идентификаторов, то можно менять на свои, а можно и для этих прописать стили.

          1. ЯНИС

            Вот этот идентификатор adaptivmenu нужно поменять на свой соответствующий (как в моем шаблоне)? Еще, например, у меня нету таких классов, как h3 класс и div класс, значит их вообще не указывать — вычеркнуть?

          2. Максим Зайцев (автор)

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

          3. ЯНИС

            У меня вот это:
            echo ‘

            ‘; И все.

          4. Максим Зайцев (автор)

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

          5. ЯНИС

            »
            »
            что-то коды у вас не отображает…

          6. Максим Зайцев (автор)

            Янис, у меня коды в комментариях заблокированы. Для их отображения, стоит убирать кавычки, скобки, так чтобы функции выглядели как текст.

          7. ЯНИС

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

          8. Максим Зайцев (автор)

            Конечно вы на правильном пути :-)

          9. ЯНИС

            Максим, подскажи еще пожалуйста вот здесь: https://yadi.sk/d/Wi2Orh5ch64yA (скрин), делал по твоему примеру, но меню становится горизонтально, так как у меня в таком виде реализовано изначально (сайдбаров нет), при этом там еще в некоторых пунктах есть подпункты. Твои стили css из статьи походу не подойдут уже для моего меню, что на скрине? Вот как тут посоветуешь?

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

          10. Максим Зайцев (автор)

            Янис, конечно придётся индивидуально подбирать стили для твоего меню. Мои стили можно взять в качестве примера, только изменив название классов и идентификаторов. То, что меню отображается горизонтально не проблема, за это отвечает стиль display. У тебя скорей всего это будет выглядеть примерно так: display: inline-block;. Убираешь inline, и получается блочный элемент.
            А вообще в качестве примера, можешь взять полностью меню и стили из статьи, вставить на сайт и посмотреть как получится. А уже стили можно доработать под дизайн и добавить нужные пункты и подпункты меню. Тут главное, что ты понял принцип.

          11. ЯНИС

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

            А вот если я хочу обобщить классы и ид обоих меню, то также могу это сделать для удобства, так?

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

            Уже поделился статьей в вк и гугл+.

          12. Максим Зайцев (автор)

            Янис, если взять меню из статьи, то оно не будет связано с меню на твоём сайте. Ты правильно понял, такое меню ни связано с php и базой данных. Работает гораздо быстрей. Такое меню можно добавить на любом сайте.
            По поводу объединения классов и идентификаторов, объединить их можно. Но, вот стили придётся править, а иначе получится «винегрет».
            В большинстве шаблонов меню организовано через php. Многие его потом переделываю на html. Меню на php построено на ID записи в базе данных. Как правило пишется функция-запрос на выбор записей из таблицы по ID, результат выводится в виде пунктов меню. Которые через стили приводятся в соответствие с дизайном.
            Спасибо, что поделился статьёй ;-)

          13. ЯНИС

            Смотри, если меню на php, то ид указано в базе данных, а в html коде оно пишется как-нибудь (типа див блок) или сразу в стили css с ид как в базе данных?

            И такое: значит то, что через html — то не запрашивает базу данных, а php запрашивает?

          14. Максим Зайцев (автор)

            Нет, блоки и идентификаторы прописаны в исходном коде шаблона, а внутрь включается php функция вызова меню. Запросы к базе идут только при создании меню по средствам php. Через html ни каких запросов в базу не посылается.

          15. ЯНИС

            Значит, если меню создано по средствам php, то блоки и идентификаторы для него в исходном коде шаблона не прописываются?

          16. Максим Зайцев (автор)

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

          17. ЯНИС

            Пытаюсь подключить скрипт wp_enqueue_script…..; в SMF, никак не получается. Там обычно все выводится через echo^, вот как его туда правильно вставить, постоянно пишет — ошибка синтаксиса, сам скрипт как и положено — в папке js?

          18. Максим Зайцев (автор)

            Честно, я с SMF и не работал, поэтому подсказать в этом вопросе не могу. Попробуй подключить скрипт в шапке, между тегами head, добавив script src="ссылка к скрипту">

          19. ЯНИС

            Жесть. Перепробовал уже все на свете, кнопка видна и меню создано, но раскрываться никак не хочет! Скрипт закинул в папку js, между head ставлю script src=»/scripts/navadaptiv.js»></script (треугольники по краям), может что со скриптом не так?

          20. Максим Зайцев (автор)

            Попробуй ещё перед src добавить type="text/javascript".

          21. ЯНИС

            Если же вставлять в echo ‘ код подключения скрипта wp_engueue………, то пишет ошибка синтаксиса и сайт не открывается, а ошибку указывает в том, что типа одинарные кавычки должны быть экранированы — вот как этот код подключения скрипта экранировать?

          22. Максим Зайцев (автор)

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

        2. Denis

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

          1. ЯНИС

            Ява скрипт закинул в папку со скриптами js, а уже эту строку для подключения пытался вставлять между head (wp_enqunu…), также и сам скрипт пробовал разными способами в head, как Максим выше писал — никак не хочет подключаться. Не, медиазапросы все верно прописаны. Мне на форуме еще одно решение подсказали, испробую — отпишусь.

            Еще все дело в том, что SMF — это движок на php, а вот в head все выводится через эти гребаные echo…

      2. ЯНИС

        Не, ребята, бросил я эту затею с меню, все на свете перепробовал, в SMF не работает ни первый, ни второй способ. Скрипты вообще не подключаются///

        1. Максим Зайцев (автор)

          Без скрипта не получится, нужно разобраться в этом вопросе. Янис, открой файл, где в теги head подключены другие скрипты на твоём сайте. Посмотри как и сделай также, изменив путь к файлу. Должно получится.

          1. ЯНИС

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

          2. Максим Зайцев (автор)

            Янис, в скором времени я подготовлю статью по способу создания универсального адаптивного меню. Сейчас заканчиваю тестирование. Оно идеально подойдет для твоего форума. Так что подожди немного, и пока всё таки разберись с подключением скриптов, а то без них не получится. Удачи!

          3. ЯНИС

            О, буду ждать с нетерпением! Да, окей, мне пока надо еще отточить некоторые моменты и на блоге и на форуме до ювелирной точности.

          4. ЯНИС

            Вот который 2-й пример, он обрабатывает уже существующее меню или создает новое адаптивное? Если создает новое, то ведь ид к нему уже не пропишешь, только тогда по первому примеру? Ради интереса хотел узнать…

          5. Максим Зайцев (автор)

            Второй вариант также скрывает обычное меню и показывает мобильное. Классы прописаны в скрипте и их можно поменять. А можно и под них стили прописать.

        2. Denis

          Вордпресс тоже на пхп сделан. Тут либо обратится к знающим людям либо поменять шаблон

          1. ЯНИС

            Шаблон менять я пока не собираюсь, много над ним уже пришлось поработать. Тут бы поискать другое решение для такой вот кнопки меню. Есть еще много (модов), типа плагинов, для форума, где меню раскрывает, но, опять же, надо, чтобы они включались с определенной точки медиазапроса. Сейчас начал эту тему просматривать.

  3. Роман

    Здравствуйте.
    У меня в cms меню на php, вывожу два меню, верхнее и нижнее.
    И получается в мобильной версии, когда я нажимаю кнопку Меню у верхнего меню, то открываются сразу оба меню, а нижнее не активно по кнопке Меню.
    Не подскажете как сделать чтобы два меню работали?

    1. Максим Зайцев (автор)

      Роман, так сложно что-то посоветовать, нужно код смотреть. Но, скорей всего меню для ПК нужно будет скрывать (через display:none), а выводить меню для мобильных.

  4. Qlihost

    Здравствуйте, Максим. Можете мне помочь? Уже не первый день пляшу с бубном, но ничего не выходит.(
    qlihost.ru/navigation.php

    1. Максим Зайцев (автор)

      Добрый день. В чем проблема, что не получается?

      1. Qlihost

        Если меняю размер экрана меню не открывается qlihost.ru/testmenu.php, а когда начинаю вписывать код в своё меню, при уменьшении экрана становится интересная прокрутка по горизонтали.

        1. Максим Зайцев (автор)

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

Добавить комментарий для Максим Зайцев Отменить ответ