Урок 4.5. Добавление выпадающего меню в шапку, инструкция
“12 Технологий”

2005-2022

mail@greattemplates.ru

ЗАПУСК ШАБЛОНА

Выпадающее меню
в навигации сайта

Выпадающее меню – удобный способ сформировать емкое и при этом визуально компактное меню. Многие темы-шаблоны имеют встроенное визуальное оформление, но оно скрыто до той поры, пока в навигации не появится подразделы. Рассказываем, как реализовать.
demo

Бесплатный курс: уроки по созданию сайта самому

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

Уроки объединены в ПЛАН СБОРКИ, где в любой момент можно перейти на нужный урок, если это необходимо. Если сами не справитесь - зовите нас, поможем. Для этого есть коммерческие тарифы.

Шаблон как есть: https://wp.sborkatest.ru . Полученный результат уроков: https://sborkatest.ru


 

Добавляем выпадающее меню в навигацию

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

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

Делается это вот как.

Сперва добавляем в меню пустой раздел “Услуги” и не назначаем ему действие (т.е. по клику мышки ничего не произойдет).

Идем “Внешний вид” “Меню” :

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

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

Для этого здесь же открываем блок “Страницы” и выбираем вкладку “Все” :

добавление нескольких услуг одновременно

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

Если вы их видите – добавляем.

В результате у нас получится следующее:

результат добавления нескольких пунктов услуг

Как видим, все страницы на одном уровне. А нам нужно, чтобы все страницы услуг были как бы подразделами основного раздела Услуги. Чтобы это реализовать, “хватаем” мышкой каждую страницу услуг и перемещаем под раздел “Услуги” :

результат перемещения нескольких пунктов услуг

Формируем порядок и сохраняем.

Обновляем страницу нашего сайта и видим, что у нас появился раздел “Услуги” , а при наведении мышки выпадают 4 услуги в виде подразделов, то, что мы и хотели:

выпадающее меню на сайте

В итоге, у нас сформировалась навигация и теперь вы знаете, как добавлять новые Странички и новые пункты Меню.

 

Несколько меню

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

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

Иногда, если у вас получилось БОЛЬШОЕ меню, а создавать заново лень (т.е. по новому вводить те же пункты с некоторыми изменениями), вам может потребоваться отличный и специально созданный для этого плагин – “Menu Duplicator” , который буквально в пару кликов дублирует выбранное вами навигационное меню для дальнейшего редактирования.

  Как установить данный плагин – рассказываем в этой статье.

 

Что дальше?

  1. Следующий урок
  2. Общий план сборки

 

Делитесь, сохраняйте, чтобы не забыть: