Создание сайта/блога на WordPress — что может быть проще!
Интересное адаптивное меню для сайта
Рубрика: Все для вебмастера

Интересное адаптивное меню для сайта

69 комментариев   

Приветствую Вас друзья! С Вами Владимир Савельев с продолжением интересной темы — адаптивная верстка. Из этой статьи Вы узнаете, как сделать адаптивное меню для сайта (мобильное меню).



Кстати, я уже писал о том как сделать выпадающее меню на WordPress. Так вот, теперь мы усложняем себе задачу и делаем его адаптивным, то есть наша менюшка будет отлично смотреться и на смартфоне и на планшете.
Когда я только начал получать знания в сфере адаптивной верстки и применять их на практике, то я очень долго искал красивое и простое адаптивное меню для сайта. Просмотрел множество вариантов на различных ресурсах и все-таки нашел интересное решение, теперь делюсь находкой с Вами.

В принципе данное меню подойдет к любому сайту (на любой CMS), главное чтобы на нем была реализована адаптивная верстка!

Я же в этой статье, покажу как установить мобильное меню на блог, под управлением WordPress. Хотя принцип будет одинаков для всех. Вот так выглядит адаптивное меню, которое мы с Вами будем устанавливать на сайт!menu-adaptivnoe-dlja-saita-0033

Чтобы посмотреть на мобильное меню в действии зайдите на мой блог со своего смартфона например или сожмите окно браузера!

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

  • Вам не потребуется менять основную версию сайта — при разработке адаптивного дизайна, нужно скрыть основное меню (display:none;) и показать мобильное (display:block;);
  • Удобство навигации с мобильных устройств — выпадающее меню удачно вписывается в дизайн сайта и занимает меньше пространства;
  • Валидный код — не содержит ошибок в коде и проходит проверку на ура;
  • Возможности css — с помощью стилей мы можем легко настроить внешний вид;
  • Мне оно очень понравилось ;)

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

Я кстати доработал чуток меню — добавил форму поиска и сделал раскрывающиеся рубрики! Поиск будет очень кстати если сайт объемный. Посетитель сразу им воспользуется и найдет нужную информацию! Так же форма поиска в самом меню экономит пространство. По многочисленным просьбам, сделал чтобы и рубрики сворачивались и разворачивались!

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

Наверное стоит предупредить, что если не уверены в своих знаниях web-разработчика, то лучше поручить эту работу тому, кто в этом разбирается! Для удобства я запаковал инструкцию в архив, в нем Вы найдете саму инструкцию, картинки и исходные коды.

Установка меню делиться на 7 простых шагов:

Если Вы все правильно сделали, то адаптивное меню для сайта уже находится и у Вас, поздравляю с этим событием! Трудно было?! Я думаю нет...

Надеюсь Вы оцените мои труды и поделитесь ссылкой на эту статью в любой социальной сети! Сделать это можно кнопками в конце статьи! Возможно кому то эта информация будет весьма кстати!

Для тех, у кого ничего не получается посмотрите видео инструкцию

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

Пишите мне через контакты, все обсудим. Часть моего портфолио:adaptivnaja-verstka-usluga

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

МММ... Хотите научиться качественно верстать сайты и быть востребованным верстальщиком? Ко мне на почту ежедневно приходят заявки — сверстать то, сверстать сё, помогите тут и там =)

Профессия «версталя» — это постоянный доход в интернете, так как Вас будут ценить и обращаться к Вам снова и снова! За одну лишь услугу адаптивной верстки сайта я получаю 5000 рублей и более... Вы тоже так сможете, я уверен!

Мне очень понравились уроки Евгения Попова — курс по CSS (45 видеоуроков), курс по HTML (33 видеоурока) и CSS практика (36 видеоуроков)! Все уроки в видео формате, по этому их легко освоить! Это то, что Вам нужно!dop_disc16 Я считаю, что самостоятельное изучение этих материалов даст 100% результат! Главное требование — желание учиться! Курсы проверены и одобрены savme.ru!

В будущем я сам планирую обучать этому ремеслу, но на данный момент у меня совершенно нет времени на это! По этому, для нетерпеливых, я решил найти достойные альтернативы! А кто хочет обучаться именно у меня, подпишитесь на обновления — я сообщу когда будет набор!

До скорой встречи в новой статье!


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 69 комментариев


  1. Людмила Лао 2015-04-19 в 16:58 

    жалко что видео нельзя расширить на весь экран. Мелковато.

    Ответить
    • Владимир Савельев 2015-04-19 в 17:26 

      Почему нельзя можно :shock: Там же кнопочка есть на весь экран и ставите HD качество на 720 пикселей :roll:

      Ответить
      • Игорь 2015-07-29 в 17:56 

        Наверное не заметила,тем более с телефона.

        Ну это так предположение :smile:

    • Саня Сабегатулин 2015-07-31 в 13:22 

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

      Ответить
  2. Валентин Лифанов 2015-04-19 в 21:51 

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

    Ответить
  3. Владимир Савельев 2015-04-19 в 23:05 

    Стандартное меню прячем display:none в css! Посмотрите внимательно видео и код для css ! Не открывается потому что не работает скрипт меню... Где то допустили ошипку наверное! Еще раз внимательно все сделайте по пунктам если не получится отпишите на почту

    Ответить
    • Валентин Лифанов 2015-04-20 в 20:21 

      блин совсем забыл про этот стиль, завтра попробую, отпишусь, спасибо за совет.

      Ответить
  4. Леонид 2015-04-20 в 22:15 

    Было интересно почитать мнение автора! Сам являюсь начинающим блоговедом, поэтому взял кое-что на заметку!

    Ответить
    • Владимир 2015-04-20 в 22:59 

      Будет еще много чего интересного Леонид :oops:

      Ответить
      • Игорь 2015-07-29 в 17:57 

        Мы это уже заметили.Новшество появляется и появляется ;-)

      • Саня Сабегатулин 2015-07-31 в 13:24 

        Да, уже много полезной информации перенял с вашего блога. Надеюсь и еще много чего полезного почерпнуть :smile:

      • Игорь 2015-09-12 в 20:12 

        В основном,я на шести блогах черпаю новую информацию.

        Включая и ваш блог,Владимир.

  5. Дмитрий 2015-04-23 в 20:35 

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

    Трудно учиться онлайн. Проще вживую.

    Ответить
    • Владимир 2015-04-24 в 08:27 

      Дмитрий нет не трудно :razz: Нужно просто больше практики, взять сделать один сайт, затем другой и с каждым разом будет получаться все лучше и лучше :roll:

      Со временем и опыт придет и знания, теорию трудно понять не испытав на практике, как и везде :oops:

      Ответить
      • Игорь 2015-07-29 в 17:58 

        И глядишь в будущем,уже другим будете блоги создавать. :smile:

      • Саня Сабегатулин 2015-07-31 в 13:26 

        Это точно, поначалу можно и на бесплатных хостингах попрактиковаться. И на счет практики — это верно. Как говориться сколько правила дорожного движения не учи, а научится водить без практики не получится. :smile:

      • Дмитрий 2015-11-03 в 21:50 

        Согласен с тобой...

        Но без теории и не будет практики.

  6. Алексей 2015-04-26 в 16:00 

    Подскажите как реализовать картинку в меню вместо поиска по сайту?

    Ответить
    • Владимир Савельев 2015-04-26 в 20:41 

      Выложил в статье :arrow:

      Ответить
  7. Константин 2015-06-18 в 18:19 

    Добрый день, Владимир. Все бьюсь вопросом, как в адаптивном меню кроме списка страниц вывести еще и раздел рубрик, как это реализовано у вас. Не подскажите реализацию? Установил меню, которое вы даете в данной статье, но рубрики не выводятся. Их можно вывести только списком рядом со списком всех страниц. Хотелось бы выпадающий список. Заранее спасибо за ответ)

    Ответить
  8. Владимир Савельев 2015-06-19 в 13:54 

    Константин данное меню в статье не имеет функции раскрытия подкатегорий!

    Для этого нужно написать скрипт — который за это будет отвечать! Обратитесь к фрилансерам — за 300-500 руб напишут Вам скрипт!

    Либо чуть подождите выложу еще дополнительные менюшки с функцией раскрытия!

    :razz:

    Ответить
    • Константин 2015-06-19 в 14:51 

      Данная функция не терпит, поэтому подожду, когда вы поделитесь информацией. Буду благодарен, да и многие другие тоже).

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

      Ответить
      • Владимир Савельев 2015-07-04 в 16:03 

        Костя сделал меню с выдвижными рубриками :razz: Забирайте!

  9. Дмитрий 2015-06-20 в 18:27 

    Владимир! Сделал все как описано в статье, меню появилась, нажимаю на меню, чтобы посмотреть страницы, рубрики, но почему-то странички они не появляются! В админке вордпресс добавил необходимые странички! Подскажите пожалуйста в чем может быть такая причина?

    Ответить
    • Владимир Савельев 2015-06-20 в 18:31 

      Покажите сайт Дмитрий! Скорее всего дело в библиотеке джеквери :razz:

      Ответить
  10. Дмитрий 2015-06-20 в 21:49 

    Владимир вот мой сайт — temowind.ru

    Ответить
    • Владимир Савельев 2015-06-20 в 22:11 

      Ну так библиотеки то у Вас нет — Jquery... Прочтите внимательно инструкцию в архиве :roll:

      Ответить
  11. Фотограф Алекс 2015-08-09 в 21:39 

    Владимир, отличное решение адаптивного меню, спасибо за разъяснение! Ещё такой вопрос, подскажите пожалуйста, если это возможно объяснить в коментариях, как реализовать плавающий блок в сайтбаре, как у вас на сайте «Обрати внимание», ну а если невозможно объяснить в 2-х словах, то очень будем рады если появится статья по этому поводу у вас на блоге, или может направите ссылкой где можно почитать об этом. Спасибо!

    Ответить
    • Владимир Савельев 2015-08-10 в 15:05 

      Приветствую! Рад что моя менюшка Вам понравилась! Реализовать бегающие блоки можно плагином — Q2W3 Fixed Widget!

      Ответить
      • Фотограф Алекс 2015-08-10 в 17:30 

        Спасибо большое за помощь! У Вас тоже реализованно данным плагином? Как то не очень доверяю я плагинам, после того как однажды через какой то из плагинов полезли вирусы мне на хостинг, с тех пор стараюсь делать всё без них, а без плагина можно как то такой же блок организовать? может с помощью каких джава скриптов?

      • Владимир Савельев 2015-08-10 в 17:37 

        Можно и скриптом, только разницы практически нет! Это нормальный, проверенный плагин, можете смело ставить! Или поищите в инете скрипт, где то я видел и даже устанавливал...

  12. Ольга 2015-08-20 в 20:08 

    столько всего нового Вы советуете. Нужно будет воспользоваться таким меню)

    Ответить
    • Игорь 2015-09-12 в 20:27 

      Много нового и это еще не придел.

      Вообще познавательный блог.

      Ответить
  13. Igor 2015-09-28 в 23:48 

    Пример бы еще с меню...

    Ответить
    • Владимир Савельев 2015-09-30 в 06:55 

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

      Ответить
      • Игорь 2015-09-30 в 22:39 

        Володь,так он просит на страничке поста пример ;-)

      • Владимир Савельев 2015-10-01 в 20:56 

        Да я понял... некогда пока =)

      • Игорь 2015-10-24 в 15:31 

        Да тоже не много времени.Но все же стараешся по возможности исполнять желание посетителей ;-)

  14. Владимир 2015-11-03 в 19:43 

    Владимир, а подскажите как заменить надпись «Поиск по блогу» просто на «Поиск» в поле ввода?

    Ответить
    • Владимир Савельев 2015-11-03 в 20:35 

      ищите такой вот код:

      <input type="text" class="in-search" name="s" value="Поиск по блогу..." onfocus="this.value=(this.value=='Поиск по блогу...') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Поиск по блогу...' : this.value;" />

      И замените все на просто поиск =)

      Ответить
      • Дмитрий 2015-11-03 в 21:51 

        А где этот код искать? В каком меню админки?

      • Владимир Савельев 2015-11-03 в 22:35 

        в архиве есть все инструкции :x

  15. Дмитрий 2015-11-04 в 00:12 

    спасибо.

    Ответить
  16. Андрей 2015-12-26 в 21:59 

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

    Ответить
    • Владимир Савельев 2015-12-26 в 22:01 

      Тут все просто либо версия jquery не подходит, либо идет конфликт (если несколько библиотек), либо проблема в самом скрипте выпадающего меню =)

      Ответить
      • Андрей 2015-12-26 в 23:43 

        Я думаю здесь проблема в чем то другом. Конфликт библиотек проверял методом исключения, искал jquery в других файлах темы, не нашел, менял версию jquery. Убираю скрипт jquery -меню работает, адаптация нет. Делал это на «чистой» теме вордпресс. Скорее это проблема моей темы. Может быть такое?

      • Владимир Савельев 2015-12-26 в 23:46 

        А у Вас адаптация как реализована? Плагином? Темой? В любом случае нужно смотреть... так гадать можно только :roll:

  17. Андрей 2015-12-27 в 00:10 

    Использую тему которая не была приспособлена для мобильных устройств. Адаптацию темы делал примерно на основе, как представлено у Вас на сайте. Проблема появилась сразу после адаптации, но что интересно, что в мобильном устройстве структура меню отображается правильно, на десктопе нет. Т.к. для меня адаптация пока важнее, все оставил, но провел эксперимент на «чистой теме», ставлю скрипт jquery- перестает работать в меню вывод подрубрик.

    Ответить
    • Игорь 2015-12-27 в 12:30 

      Значит гдето присутствует ошибка кода.

      А скорей всего,ваша тема вступает в конфликт.

      Ответить
  18. Гарри 2016-01-18 в 07:02 

    Очень удобное и приятное решение, вот только пока небольшая проблема с «submenu», вроде сделал все по инструкции, но вот только открывается меню без стрелок для развертывания «submenu». Полагаю что это может быть из-за того что я в css не указал значения «Класс рубрики», если причина в этом, не могли бы Вы пояснить, что туда нужно прописать?

    Ответить
    • Владимир Савельев 2016-01-22 в 12:50 

      Именно — там где должен быть субменю смотрим класс строчки и прописываем в css...

      Ответить
      • Гарри 2016-01-22 в 13:33 

        Прописал, класс в итоге появилась стрелка, для открытия submenu, но она не кликабельна :???:

      • Владимир Савельев 2016-01-22 в 17:29 

        Значит в скрипте смотреть нужно...

  19. Татьяна 2016-01-21 в 11:14 

    Здравствуйте, Владимир!

    Очень заинтересовалась Вашей статьей про адаптивное меню и стала пытаться ее реализовать. По ходу возникли вопросы. Надеюсь на разъяснение. Благодарю заранее! Вот вопросы:

    1) Если я не нашла строчки скрипта jquery в header.php своего сайта, значит у меня ее нет? И надо вставить скрипт туда между тегами head ... /head

    2) Нужно вставить картинки из Вашей папки с инструкцией в public.html своего сайта, так?

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

    Спасибо!

    Ответить
    • Владимир Савельев 2016-01-22 в 12:41 

      Татьяна привет! Отвечаю на вопросы — 1. Да нужна библиотека и ее нужно подключить... 2. Картинки можно вставить в любое место, главное в коде прописать путь к ним... 3. Вместе с обычным появляется, так как в мобильной версии нужно спрятать основное меню display:none; А в основной версии спрятать мобильное )))

      Ответить
      • Татьяна 2016-01-22 в 12:47 

        Спасибо, Владимир! Я так и подумала. Уже почти получилось) Только вот картинка- кнопка никак не хочет подгружаться. Попробую указать путь полностью.

      • Владимир Савельев 2016-01-22 в 12:53 

        Что то у Вас Татьяна как то ни так менюшка работает — ищите ошибку...

      • Владимир 2016-10-12 в 13:25 

        Здравствуйте, по третьему пункту Вашего ответа, в исходном коде будет же появляться и основное и мобильное меню, не подскажите как это устранить?

      • Владимир Савельев 2016-10-20 в 20:09 

        Приветствую! В исходном коде никак... Если я правильно Вас понял...

  20. Татьяна 2016-01-21 в 15:52 

    Еще раз внимательно пересмотрела видео и совсем запуталась, Например, в видео Вы говорите, что назвать новое меню надо primary mobile, а в инструкции menu_mobile... Может из-за этого не получается? И коды в инструкции и видео немного отличаются. Надеюсь на Вашу помощь. Спасибо!

    Ответить
    • Владимир Савельев 2016-01-22 в 12:45 

      Делайте по инструкции в архиве — коды отличаются потому что я доработал меню добавил кое-какие фишки!

      Ответить
  21. Татьяна 2016-01-22 в 12:57 

    Действительно, как только указала путь к картинке полностью — заработало! Только строчки немного длинноваты. Посмотрите, Владимир! Теперь правильно работает?

    Ответить
    • Владимир Савельев 2016-01-22 в 12:58 

      Нет! Должно быть при нажатии на иконку — вылазить меню! А у Вас сейчас при нажатии вылазит слово МЕНЮ, а потом уже само меню — с кодом ошиблись где то

      Ответить
  22. Татьяна 2016-01-22 в 13:01 

    А понятно... Просто я через ссылку # делала «меню» и еще обнаружила что рубрики не раскрываются. Это в коде учтено? Или другой код нужен?

    Ответить
  23. Татьяна 2016-01-22 в 13:22 

    Огромное Вам спасибо! Все работает)) Кое-что еще надо улучшить, но это позже. Ваша статья была для меня, как хлеб насущный! Буду дальше изучать Ваш сайт! Удачи Вам и успехов!!

    Ответить
    • Владимир Савельев 2016-01-22 в 13:27 

      Не за что Татьяна :arrow:

      Ответить
  24. Мебель-Курган Ру 2016-02-27 в 12:54 

    Вполне рабочее меню

    Ответить
  25. Kate 2016-03-25 в 23:23 

    Доброго дня! У меня проблема в следующем — использую тему «BeHealthy», у нее уже есть адаптивная версия сайта для мобильного, но меня не устраивает адаптивное меню. Сделала все, как вы написали, но меню ничуть не изменилось — все такое же стандартное... Что мне надо изменить, что бы получилось такое же как у вас?

    Ответить
    • Владимир Савельев 2016-03-26 в 20:24 

      Привет! Чтобы сделать новое меню, нужно удалить старое... В любом случае нужно смотреть как реализовано у Вас стандартное меню...

      Ответить

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

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Готовые шаблоны для WordPress