Создание раскрывающихся меню — Поддержка WordPress.com

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

📌

Чтобы понять, какому разделу этого руководства следовать, зайдите на панель управления и проверьте Внешний вид с левой стороны. Если вы видите Editor , используйте Site Editor раздела этого руководства. В противном случае воспользуйтесь инструкциями WP Admin или Customizer .

В этом руководстве

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

1. На панели управления выберите Внешний вид → Редактор .
2. Выберите шаблон, содержащий меню, которое вы хотите изменить.
3. Открыть представление списка в верхнем левом углу экрана (это значок в виде трех горизонтальных линий друг над другом).
4. Найдите блок навигации (он может быть вложен в другие блоки, такие как Заголовок , Группа или Строка .)
5. Нажмите на пункт меню, который вы хотите сделать раскрывающимся.
6. Над пунктом меню появится панель инструментов, на которой находится кнопка Добавить подменю (иконка выглядит как изогнутая стрелка с тремя горизонтальными линиями рядом с ней.)

7. Нажмите кнопку Добавить подменю на панели инструментов, чтобы преобразовать этот пункт меню в раскрывающееся меню.
8. Щелкните значок + или параметры Добавить ссылку , которые появятся, чтобы добавить новые ссылки в новое раскрывающееся меню.

Добавление элемента раскрывающегося меню в редактор сайта

1. На панели управления выберите Внешний вид → Редактор .
2. Выберите шаблон, содержащий меню, которое вы хотите изменить.
3. Открыть представление списка в верхнем левом углу экрана (это значок в виде трех горизонтальных линий друг над другом).
4. Нажмите на Блок навигации (он может быть вложен в другие блоки, такие как Заголовок , Группа или Строка .)
5. В настройках боковой панели справа щелкните пункт меню, который вы хотите превратить в подменю.
6. Перетащите элемент меню и сделайте отступ, чтобы сделать его подменю.

Вы можете создать «некликабельный» пункт меню, который полезен при создании выпадающих меню. Элемент по-прежнему можно щелкнуть, но он не будет переходить на новую страницу. Выполните следующие шаги:

1. На панели инструментов выберите Внешний вид → Редактор .
2. Выберите шаблон, содержащий меню, которое вы хотите изменить.
3. Открыть представление списка в верхнем левом углу экрана (это значок в виде трех горизонтальных линий друг над другом).
4. Найдите блок навигации (он может быть вложен в другие блоки, такие как Заголовок , Группа или Строка .)
5. Щелкните пункт меню, который вы хотите превратить в неактивную ссылку, или добавьте новый пункт меню.
6. Над пунктом меню появится панель инструментов, где вы найдете кнопку Ссылка (иконка выглядит как буквальное звено из цепочки.)
7. Отредактируйте ссылку, щелкнув значок карандаша.
8. В поле URL поместите только символ #, как на изображении справа.
9. Нажмите Enter/Return на клавиатуре, чтобы подтвердить изменение.

Приведенный ниже GIF-файл демонстрирует процесс:

Чтобы создать пункт меню без ссылки, добавьте символ # в поле URL.

Чтобы создать раскрывающееся меню в WP Admin, перейдите в Внешний вид → Меню . Здесь вы можете перетащить элемент в меню, чтобы изменить его порядок.

Чтобы создать раскрывающееся меню, перетащите отдельные элементы вправо, чтобы «вложить» их под элемент, расположенный непосредственно над ним:

Вы можете отменить это, снова перетащив их влево. Нажмите Сохранить меню , когда закончите.

Чтобы создать раскрывающееся меню в Настройщике, выполните следующие действия:

1. Добавьте все элементы меню, которые вы хотите иметь в меню вашего сайта.
2. Нажмите на Reorder , которая появится под вашими пунктами меню.
3. Щелкните стрелку вправо > , чтобы вложить страницу под страницу выше, создав раскрывающийся элемент.
4. Если вас устраивает раскрывающееся меню, нажмите Готово .
5. Нажмите Сохранить изменения , чтобы опубликовать изменения на сайте.

Видеоруководство

Стенограмма видео

Меню помогают вашим посетителям перемещаться по вашему сайту WordPress.com и даже могут облегчить поиск вашего сайта при поиске в Интернете. Если вы создаете новый сайт, создание меню будет частью контрольного списка настройки вашего сайта. А если вы редактируете существующий сайт, есть несколько мест, где можно начать работу с меню.

В «Моем доме» нажмите «Редактировать меню». Или в разделе «Дизайн» нажмите «Настроить».

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

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

Теперь вы можете создать свое меню.

Вы также можете добавить элементы, чтобы выбрать страницы и сообщения, которые вы хотите видеть в своем меню.

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

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

Вы даже можете создать новую страницу из меню Customizer и построить страницу позже.

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

Не забывайте сохранять свое меню.

Чтобы переупорядочить меню, нажмите «Изменить порядок» и используйте стрелки для перемещения элементов или просто перетаскивайте их, пока они не станут в нужном вам порядке.

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

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

Многие темы также предлагают меню социальных ссылок. Это меню, в котором значки используются как ссылки на ваши социальные каналы. Вы можете настроить ссылки на социальные сети здесь или в разделе «Маркетинг» на панели инструментов.

Чтобы узнать больше, посетите WordPress.com/support. Спасибо за просмотр.

Вы можете создать «некликабельный» пункт меню, который полезен при создании выпадающих меню. Элемент по-прежнему можно щелкнуть, но он не будет переходить на новую страницу. Выполните следующие действия:

1. Перейдите к Внешний вид → Настройка → Меню.
2. Выберите свое меню.
3. Щелкните Добавить элементы .
4. Щелкните параметр Пользовательские ссылки .
5. В 9В поле 0008 URL введите символ #, как показано на изображении справа.
6. В поле Link Text введите текст, который должен отображаться в вашем меню, как показано на изображении справа.
7. Нажмите Добавить в меню .
8. Щелкните Сохранить изменения .

Далее: Изменить порядок пунктов меню.

J3.x:Создание подменю — Joomla! Документация

Другие языки:

Deutsch • ‎English • ‎Nederlands • ‎eesti • ‎español • ‎français • ‎italiano

Учебник
Как создать подменю в Joomla! Сайт

Joomla!

3.x

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

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

Содержание

• 1 Шаг 1. Создайте свои статьи
• 2 Шаг 2. Создание пунктов меню родительского уровня
• 3 Шаг 3. Создание пунктов меню подуровня
• 4 Шаг 4. Настройка модуля меню
  • 4.1 Пример 1. Один модуль меню с элементами меню второго уровня
  • 4.2 Пример 2. Второй модуль меню с элементами меню дочернего уровня
• 5 подменю

Для начала меню функционируют с тремя основными конструкциями:

• Статьи — вам нужен контент для ссылки. Это также могут быть составные части, другие пункты меню или внешние ссылки.
• Меню — описывает пункты меню, тип навигации, их родительские/дочерние отношения с другими пунктами меню и порядок их отображения.
• Модуль меню — управляет положением и отображением меню.

Для этого урока начните с входа в систему администратора Joomla. Если вы не знаете, как войти в систему, ознакомьтесь с этой статьей: Вход и выход из административной панели.

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

Шаг 1. Создайте свои статьи Под собаками у нас будет

колли и шпиц . Под Кошками у нас будет бирманская и русская голубая . Таким образом, структура пунктов нашего примерного меню будет следующей:

• Собаки
  • Колли
  • Померанский шпиц
• Кошки
  • Бирманский
  • Русская голубая

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

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

После того, как ваше меню будет размещено в диспетчере меню, вы добавите элементы родительского меню, используя Системные ссылки  →  Внешний URL-адрес для каждой навигационной ссылки: Собаки и Кошки .

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

Вот шаги для создания образцов пунктов меню с использованием наших данных примера. Дополнительные сведения о создании пунктов меню см. в разделе Добавление нового пункта меню.

1. Перейдите к диспетчеру меню, нажав Меню →  Менеджер меню
2. На панели инструментов нажмите Новый
3. Для целей этого упражнения мы создаем ссылки-заполнители, используя Система →  Внешний URL Тип меню для пунктов меню родительского уровня Собаки и Кошки . Итак, в новом пункте меню нажмите кнопку выбора типа меню:
4. Щелкните Системные ссылки , затем прокрутите вниз и выберите Внешний URL .
5. Добавьте заголовок пункта меню («Собаки») и введите хэштег «#» в поле Ссылка .
6. Сохраните пункт меню.
7. Повторите шаги 2–6 для Кошки Пункт меню «Родительский уровень».

Шаг 3. Создание пунктов меню подуровня

бирманская и русская голубая . Для каждого созданного пункта меню мы установим Parentage на Dogs или Cats .

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

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

1. На панели инструментов нажмите «Создать».
2. В новом пункте меню нажмите кнопку выбора типа меню:
3. Выберите Статьи  →  Одиночная статья из отображаемого списка.
4. Вернувшись на страницу сведений об элементе меню, щелкните список Select Article .
5. В качестве примера выберите артикул Collies .
6. Вернувшись на страницу сведений о статье, заполните Заголовок пункта меню . Затем щелкните список выбора Parent Item , расположенный в крайнем правом столбце. Найдите и выберите родительский элемент Dogs , прокрутив список родительских элементов. Обратите внимание, что уровни меню отображаются с дефисами: «-» (один дефис) — самый высокий уровень, «—» (два дефиса) — второй уровень, «—» третий уровень и так далее.
7. Нажмите кнопку Сохранить и закрыть в верхней пуговице.
8. Повторите шаги 1-7 для остальных артикулов Померанский шпиц с родителем Собака и артикулами Бурма и Русская голубая для родителя Кошка .
9. Когда вы закончите работу с разделом «Элементы меню», менеджер пунктов меню должен выглядеть примерно так:

Шаг 4.

Настройка модуля меню[править]

На этом этапе у нас есть статьи и меню. Предметы сделаны. Теперь нам нужно обновить Модуль меню . В Joomla! модуль меню определяет три вещи:

1. Как выглядит меню.
2. Где на странице он будет отображаться.
3. На каких страницах он будет отображаться.

Мы сделаем два примера:

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

Примечание Мы сделаем оба примера, используя шаблон Protostar, включенный в ядро ​​Joomla! монтаж.

Пример 1 — один модуль меню с элементами меню второго уровня[править]

Чтобы отобразить это как один модуль, выполните следующие действия:

1. Перейдите к Extensions →  Module Manager и найдите модуль меню, связанный с вашим меню. Инструкции по созданию нового модуля меню см. в разделе Меню модуля
.
2. Щелкните имя модуля, связанное с вашим меню. В этом уроке мы выбираем Главное меню . Примечание. это изображение было отфильтровано путем выбора Меню в раскрывающемся списке Тип модуля.
3. В сведениях о модуле установите Начальный уровень на 1 , Конечный уровень на Все и установите Показать элементы подменю на Да .
4. Для этого руководства мы добавили некоторые стили на вкладке Advanced . В суффиксе класса меню мы ввели navbar-nav nav-pills . Вы также можете добавить navbar-nav nav-tabs для немного другого вида. Примечание: перед navbar-nav есть пробел.
5. Нажмите Сохранить и закрыть .
6. Перейдите к внешнему интерфейсу вашего сайта, и ваше меню должно выглядеть примерно так. В шаблоне Protostar элементы меню подуровня отображаются в виде элементов раскрывающегося меню.
7. Сгенерированный исходный код будет выглядеть следующим образом:

 

  
Главная
  
О нас
  
Собаки
    <ул>
      
Колли
      
Померанские шпицы
    
  
  
Кошки
    <ул>
      
бирманский 
      
Русский блюз
    
  
 

Пример 2. Второй модуль меню с элементами меню дочернего уровня[править]

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

1. Перейдите к Extensions →  Module Manager и найдите или создайте второй модуль меню, связанный с вашим меню. Инструкции по созданию нового модуля меню см. в разделе Меню модуля
.
2. Щелкните имя модуля, связанное с вашим меню.