Красивое выпадающее меню – несколько примеров меню для сайта

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

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

Моя цель: собрать как можно больше вариантов создания выпадающих меню на этой странице.

В макетах будет использовано:

  • Html
  • CSS
  • JavaScript / jQuery (в редких случаях)

Следите за обновлением страницы.

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

Горизонтальное выпадающее меню

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

Горизонтальное меню CSS

Ни для кого не секрет, что CSS 3 и HTML 5 шагнули далеко за границы своих предшественников. Например:

сегодня вам не нужно извращаться с вырезанием округленных уголков для меню, достаточно воспользоваться простым CSS свойством border-radius

хотя еще 5 - 10 лет назад резали мы картинки и собачили их как угодно :-).

Ладно, достаточно лирики. Главное, это тот факт, что современные браузеры поддерживают CSS 3 и HTML 5.

Горизонтальное выпадающее меню на css делается с помощью псевдокласса :hover. При чем ранее, браузеры навешивали это событие исключительно на тег <a> и <button>. Сегодня, можно смело использовать этот  псевдокласс CSS практически для всех тегов.

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

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

В этом посте вы найдете:

  1. Простое горизонтальное выпадающее меню.
  2. Горизонтальное выпадающее меню на всю ширину.
  3. Выпадающее меню с разделителями.
  4. Многоуровневое выпадающее меню.

Все примеры выпадающих меню построены на списках ul li, я принципиально не использую тег table, так как такое меню не будет универсальным для установки на сайт ВП.

Демо просмотр выпадающее меню для сайта

к менюНажав на картинку, вы можете просмотреть фото пример меню. Нажав на демо, можно посмотреть работу меню.

Простое горизонтальное выпадающее менюПростое горизонтальное выпадающее меню

 


 

Горизонтальное выпадающее меню на всю ширинуГоризонтальное выпадающее меню на всю ширину

 


 

Выпадающее меню с разделителямиВыпадающее меню с разделителями

 


 

Многоуровневое выпадающее менюМногоуровневое выпадающее меню

 


 

Многоуровневое выпадающее меню с выпадашкой на всю ширинуМногоуровневое выпадающее меню с выпадашкой на всю ширину

Все выпадающее меню в примерах работающие, можете проверить их в демке. Более подробно по этой ссылке http://help-wp.ru/gorizontalnoe-vypadayushhee-menu/

 

Вертикальное выпадающее меню

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

Основное описание по созданию таких меню для сайта находится по ссылке вертикальное выпадающее меню. Там вы найдете стили CSS для сайта, а также Html код.

Здесь вы  сможете просмотреть меню в режиме демо, а также скачать готовые примеры меню. Смотрим ниже шаблоны выпадающих меню, в разных вариантах:

vertical-vpm-1Вертикальное выпадающее меню вправо.

 


 

 

vertical-vpm-2Вертикальное выпадающее меню CSS влево

 


 

 

vertical-vpm-3Вертикальное многоуровневое меню

 

Подробно можно прочесть по этой ссылке http://help-wp.ru/vertikalnoe-vypadayushhee-menu/

 

Вертикальное меню аккордеон на jQuery

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

Кто не в курсе, - это меню раскрывается внутри блока при клике на родительский элемент без перехода по ссылке. Если кликнуть на следующий родительский элемент то предыдущий закроется, а новый будет открываться параллельно.

Предлагаю вам посмотреть 2 вида таких меню:

  • без использования сложных стиле и фонов
  • более красивый с фоновым изображением и картинками указателями.

 

menu-akkordeon-1Простое вертикальное меню аккордеон

 


 

 

menu-akkordeon-2Красивое меню для сайта аккордеон

Детальный код и описание этих меню смотрите по этой ссылке http://help-wp.ru/menu-akkordeon-on-click/

 

Добавить меню для сайта wordpress

к менюОбычно, я рассказываю в своих уроках о CMS WordPress, так как позиционирую себя как специалиста по Вордпресс. В этом уроке, также хотелось бы поговорить о выпадающих меню WP.

По сути, выпадающее меню wordpress ни чем не отличается от менюшек для остальных CMS, главное правильно вывести и добавить его.

Хотя, иногда бывают случаи, когда интегрировать html меню у WordPress это сплошной геморой.

Бывает приносят верстку, а там вот такой чудо хтмл код:

<ul id="menu1" class="menu menu1">
    <li class="menu1"><a href="#"><span>Пункт </span><span class="menu1Num">1</span></a></li>
    <li class="menu1"><a href="#"><span>Пункт </span><span class="menu1Num">2</span></a></li>
    <li class="menu1"><span class="current"><span>Пункт </span><span class="menu1Num">3</span></span></li>
    <li class="menu1"><a href="#"><span>Пункт </span><span class="menu1Num">4</span></a></li>
</ul>

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

В этой записи можно посмотреть как правильно в wordpress добавить меню. Конкретно в этом посте нас интересует работа функции wordpress:

wp_nav_menu()

Все примеры выше, выпадающее меню на списках, идеально подходят для установки на wordpress.

Краткая инструкция выпадающее меню wordpress – установка

1) к менюНаходим подходящий для себя шаблон меню выше.

2) Скачиваем пример к себе на комп, разархивируем его.

3) На место, где будет выводится меню устанавливаем хтмл код, который отвечает за меню. Он начинается и заканчивается в моих примерах тегом <nav></nav> (тег и идентификатор обязательные для копирования, иначе стили не будут работать)

4) Если у примера есть javascript, его нужно подключить в ваш шаблон. Библиотеку jQuery подключать не нужно, так как она у WP подключается автоматически. Главное добавлять код после функции wp_head().

5) Стили из примера нужно скопировать у файл style.css вашей темы.

Стили для body и контейнера можно не копировать.

6) Для вывода меню используем функцию wp_nav_menu(), ее нужно вставить вместо хтмл который находится между <nav> и </nav>.

7) Меню для сайта нужно предварительно зарегистрировать в functions.php а также создать на сайте. Как это делается можно прочесть по ссылке: http://help-wp.ru/wordpress-menu/

 

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

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

 

Комментарии к записи «Красивое выпадающее меню – несколько примеров меню для сайта»:
  1. Виктор:

    Спасибо большое автору за супер полезную информацию!
    Может подскажите как атоматически создавать или удалять пункты подменю вертикального меню в зависимости от дат? Для новигации по годам архива новостей.

    • admin:

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

  2. Lora:

    Интересные варианты)) А как насчет варианта выпадающего меню, в котором показываются миниатюры и последние статьи с каждой рубрики?

    • admin:

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

  3. саша:

    Добрый. А как сделать, чтобы это выпадающее меню на мобильной версии смотрелось хорошо?

    • admin:

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

  4. Борис:

    Я полный "чайник", поэтому у меня есть два очень глупых вопроса:
    1. Зачем писать html код, если потом вместо него пишется одна сточка php кода?
    2. Как вордпресс узнает, каким было меню до удаления html кода?

    • admin:

      Добрый день.
      1) ХТМЛ версию проще тестировать и править. + если я дам пользователям для скачивания пхп файлы, то на локальном компе вы их не сможете запустить, только на сервере.
      2) ВП никак не узнает какой у вас был хтмл код. Мы пишем хтмл идентичный тому (или практически идентичный) что выдаст ВП.

  5. Max:

    Нужно сделать выпадающее меню на 3 уровня.
    С горизонтального блока выпадает вертикальный, а с вертикального, в сторону еще один вертикальный.
    Возьметесь за такую задачу? Сколько по цене?

  6. Ирина:

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

  7. Андрей Викторович:

    Как вариант можно посмотреть вот такую реализацию выпадающего меню на вордпресс (-spam-url-)

  8. Илья:

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

  9. Марина:

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

    • admin:

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

  10. Сергей:

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

    • admin:

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

Сделать заказ
Онлайн помощь по WordPress