Создать выпадающее меню в Joomla при помощи модулей и Bootstrap
Иван Мельников
Время на чтение: 5 минут
1 115
У каждого свои предпочтения: одним нравится горизонтальное меню, другие грезят о вертикальном, а для некоторых главное, чтобы оно было выпадающего типа. Все эти запросы можно осуществить при помощи движка Joomla. Если постараетесь, дочитаете статью до конца, то потом сможете самостоятельно сгенерировать выпадающее меню различного формата. Кроме того, вы узнаете, какой модуль подходит для формирования меню с эффектом выпадения.
Содержание
- Как сделать выпадающее навигационное меню стандартными возможностями Joomla
- Как создать выпадающее меню в Bootstrap
- Модуль Ari Ext Menu
- Модуль Jquery Jumpmenu JT
Как сделать выпадающее навигационное меню стандартными возможностями Joomla
Мало кто из вас захочет загружать и устанавливать какие-то дополнительные инструменты для формирования собственного меню, потому разберем, что можно сделать без загрузки расширений.
Во многом ваши возможности зависят от установленного шаблона на сайте Joomla.
Как правило, в третьей версии Joomla большинство тем оформления имеют в своем арсенале выпадающее меню, потому вы практически гарантировано сможете его сделать без дополнительных инструментов.
Чтобы изменить формат меню и сделать его выпадающим, вам необходимо зайти в «Менеджер расширений». Затем перейдите в модули и найдите в списке стандартное расширение для элемента меню Joomla. Вам необходимо открыть «Основные параметры» модуля, чтобы изменить его тип. Потом перейдите в «Дополнительные параметры», пока не доберетесь до суффиксов CSS-классов в настройках. Именно от выбранного суффикса зависит то, как будет отображаться модуль в Joomla. Вам необходимо выбрать пункт vmenu (возможно, в названии будут присутствовать и другие буквы). Также не забудьте выбрать «Отображение на всех страницах», дабы избежать путаницы.
Далее вам предстоит сделать для настроенного выпадающего меню пункты.
Это легко осуществить через «Менеджер меню». Найдите имя необходимого меню и раздел настроек «Пункты меню». И не забудьте после всего проделанного очистить кэш сайт, иначе посетители долгое время не заметят нововведений!
Есть еще один способ, как без использования Bootstrap и посторонних модулей сделать выпадающее навигационное меню в Joomla 3. Для этого вам необходимо будет лишь создать пункты меню специального типа. Перейдите в настройки определенной менюшки и в окно создания пунктов. Далее напишите имя пункта, а в типе укажите «Статьи» и выберите ссылку на необходимую страницу. Не забудьте указать родительское меню и сохранить изменения.
Как создать выпадающее меню в Bootstrap
Учтите, что это не самый легкий путь. Куда проще просто скачать специальный модуль и подкорректировать его CSS файл для обеспечения индивидуального дизайна.
Но если легких путей вы не ищите, и хотите попрактиковаться в Bootstrap, тогда коротко разберем этот метод.
Чтобы создать меню в Bootstrap, необходимо использовать элемент navbar — это сокращенно навигационный бар. Вы сможете создать меню любого типа при помощи данного элемента, но нужно будет поработать с прописью его функций. Navbar в Bootstrap можно будет сделать адаптивным, с привязкой к прокрутке (как поисковая строка в Яндексе) и фиксированным. Вам нужно будет заключить navbar в специальный тег <nav>. Чтобы в Bootstrap сделать именно меню навигации, вам нужно будет оформить его в виде списка с тегами <ul><li>. Для формирования выпадающего эффекта укажите для родительского элемента li класс dropdown, а для дочерних — dropdown-menu.
Модуль Ari Ext Menu
Это мощный, высоко настраиваемый модуль для Joomla.
Рекомендуется скачивать данное расширение с проверенных источников, так как иногда злоумышленники внедряют в структуру модуля вредоносное ПО для заражения сайтов вирусами. Модуль поддерживает любую ориентацию для меню (горизонтальную и вертикальную). Вам придется разобраться в настройках модуля самостоятельно, так как админка расширения доступна только на трех языках: английский, испанский и словацкий.
Большое преимущество использования именно модуля Ari Ext Menu для формирования выпадающего меню — это совместимость с любым браузером мира, а также автоматическая адаптация менюшки под устройства с маленькими расширениями. Установка расширения ничем не отличается от стандартной. Еще одна особенность модуля — это наличие анимационного эффекта. Он настраивается через пункт настроек Transittion type в админке — есть два вида анимации. Также в админке вы сможете настроить оформление расширения. А если доступных возможностей для вас окажется мало, то можете отредактировать файл menu.min.
css, который определяет стиль элемента.
Обычно, описанного выше расширения достаточно, чтобы реализовать любую задумку в меню навигации. Но модуль Jquery Jumpmenu JT также заслуживает место быть в данном обзоре, так как имеет одну отличительную особенность — он занимает минимум места на сайте, потому не сильно нагружает браузеры юзеров и повышает скорость загрузки менюшки. Кроме того, созданная вами навигация так же будет адаптивной, как и с Ari Ext Menu. Установка модуля производится через стандартные возможности Joomla. Скачайте архив расширения и установите его в админке при помощи специального менеджера. Не забудьте определить позицию для модуля.
Меню навигации с выпадающим списком на чистом CSS
Чтобы сделать меню навигации с выпадающим списком на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.
Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”.
Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.
Разметка
<nav> <div>Website</div> <ul> <li> <input type="radio" name="nav-group"> <label for="home">Home</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> <li> <input type="radio" name="nav-group"> <label for="css">CSS</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> <li> <input type="radio" name="nav-group"> <label for="dropdown">Dropdown</label> <label for="nav-close"></label> <div> <div> <ul> <li><a href="#">More about us 1</a></li> <li><a href="#">More about us 2</a></li> <li><a href="#">More about us 3</a></li> </ul> </div> </div> </li> </ul> <input type="radio" name="nav-group"> </nav>
Стили
.nav-main { width: 100%; background-color: #222; height: 70px; color: #fff; } .nav-main .logo { float: left; height: 40px; padding: 15px 30px; font-size: 1.4em; line-height: 40px; } .nav-main > ul { margin: 0; padding: 0; float: left; list-style-type: none; } .nav-main > ul > li { float: left; } .nav-option { display: none; } .nav-option:checked ~ .nav-content { max-height: 400px; -webkit-transition: max-height 0.4s ease-in; -moz-transition: max-height 0.4s ease-in; transition: max-height 0.4s ease-in; } .nav-option:checked + label { background-color: #444; } .nav-option:checked ~ .nav-close { display: block; } .nav-item { display: inline-block; padding: 15px 20px; height: 40px; line-height: 40px; margin: 0; } .nav-item:hover { background-color: #444; cursor: pointer; } .nav-content { position: absolute; top: 70px; overflow: hidden; max-height: 0; background-color: #222; color: #fff; } .nav-content a { color: #fff; text-decoration: none; } .nav-content a:hover { text-decoration: underline; } .
nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;
}
.nav-main .logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}
.nav-main > ul > li {
float: left;
}
.nav-option {
display: none;
}
.nav-option:checked ~ .nav-content {
max-height: 400px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}
.nav-option:checked + label {
background-color: #444;
}
.nav-option:checked ~ .nav-close {
display: block;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
margin: 0;
}
.nav-item:hover {
background-color: #444;
cursor: pointer;
}
.nav-content {
position: absolute;
top: 70px;
overflow: hidden;
max-height: 0;
background-color: #222;
color: #fff;
}
.nav-content a {
color: #fff;
text-decoration: none;
}
.nav-content a:hover {
text-decoration: underline;
}
.
nav-sub {
padding: 20px;
}
.nav-sub ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub ul a {
display: inline-block;
padding: 5px 0;
}
.nav-close {
display: none;
position: absolute;
top: 70px;
left: 0;
height: 100%;
width: 100%;
}
.nav-close-option {
display: none;
}
Результат:
Смотреть результат
Теги: css
Редактировать
Как создать выпадающее меню в WordPress
Опубликовано в Marketing, Performance by Erin Myers
Последнее обновление 19 августа 2022 г. . Чрезвычайно важно, чтобы ваши пользователи могли легко и быстро получить доступ ко всему, что им нужно на вашем сайте.
Особенно, если у вас накопилось много страниц и сообщений, хорошо спланированная панель навигации или меню облегчит пользователям изучение всего, что вы можете предложить. Эта простая функция также может помочь снизить показатель отказов, удерживая посетителей дольше
В этой статье мы рассмотрим, как создать выпадающую строку меню навигации в WordPress.
Давайте начнем!
Как добавить раскрывающееся меню: шаг за шагом
Существует несколько типов навигационных меню, которые вы могли видеть при посещении различных веб-сайтов. Рассмотрим несколько самых популярных вариантов.
Возможно, наиболее распространенным типом является меню заголовка:
Однако боковые меню также очень заметны:
Вы также увидите множество гамбургер-меню на мобильных сайтах, которые быстро раскрываются и расширяются при нажатии значка гамбургера. нажал:
Последний пример — который мы также создадим позже в этом посте — раскрывающееся меню навигации или панель навигации. Подобно гамбургер-меню, этот стиль экономит место на экране, поскольку большая часть содержимого скрыта до тех пор, пока оно не понадобится:
Имейте в виду, что некоторые темы не поддерживают раскрывающиеся меню. Итак, первое, что вам нужно сделать, это подтвердить, что ваша тема предлагает эту опцию. Обычно вы можете узнать это, проверив документацию темы.
Хотя можно создать собственное раскрывающееся меню навигации в формате html или css, если ваша тема по умолчанию ограничена.
В следующем пошаговом руководстве мы покажем вам, как использовать встроенные функции WordPress для создания меню. Преимущество этого метода заключается в том, что вы сохраните любой созданный вами пункт меню, даже если вы измените темы или добавите новые плагины на свой сайт в будущем.
Шаг 1: Создание пунктов меню
Чтобы начать, перейдите к Внешний вид > Меню на панели управления WordPress. Доступные параметры будут частично определяться вашей текущей темой.
Нажмите на Вкладка «Редактировать меню» , где вы можете выбрать создание нового меню:
Введите имя в поле ввода в разделе Структура меню , а затем нажмите Создать меню :
После создания в по крайней мере одно меню, вы должны увидеть новую вкладку под названием Управление местоположениями , прямо рядом с Редактировать меню .
Теперь вы можете добавлять пункты в меню. Вы можете включать страницы, сообщения и пользовательские URL-адреса. Например, чтобы добавить страницу, установите флажки рядом с содержимым, которое вы хотите добавить в разделе Pages раздел справа, а затем выберите Добавить в меню :
Тот же процесс применяется к сообщениям. Если вы хотите добавить ссылку в свое меню, разверните раздел Пользовательские ссылки и введите URL-адрес, а также некоторый пользовательский текст:
Вы можете выполнить аналогичные действия, чтобы добавить категории в свое главное меню, развернув Категории раздел. Любой элемент меню, созданный таким образом, откроет страницу, содержащую весь контент, содержащийся в определенной категории.
Шаг 2: Настройка структуры меню
На данном этапе ваше меню еще не организовано. Все просто будет отображаться в том порядке, в котором оно было добавлено.
Также пока нет функции раскрывающегося списка. Поэтому следующим шагом будет решение этих двух проблем.
Для этого вы можете просто перетаскивать пункты меню туда, куда вы хотите. Вы даже можете создавать элементы подменю таким образом. Например, мы перечислили три конкретных сообщения в блоге, чтобы они отображались в более широком списке 9.0033 Блог пункт меню:
После того, как вы закончите настройку структуры меню и добавление каждого элемента раскрывающегося списка, обязательно сохраните изменения. Также обратите внимание, что в зависимости от вашей темы вам может потребоваться присвоить новое меню местоположению. Соответствующие параметры можно найти в разделе «Настройки меню» :
Затем вы можете проверить свой сайт на внешнем интерфейсе, чтобы увидеть меню в действии. Любые подпункты будут отображаться в виде раскрывающегося меню:
Помните, что меню навигации должно облегчить просмотр вашего веб-сайта. Поэтому вам нужно ограничить количество элементов, которые вы добавляете в свои меню, чтобы они не запутались и не загромождали их.
Шаг 3: Добавьте CSS в ваше меню
Вы также можете добавить собственный стиль в раскрывающееся меню, используя классы CSS. Для этого нажмите Параметры экрана в верхней части панели управления:
Установите флажок Классы CSS :
Это позволит вам создать собственное раскрывающееся меню CSS. Это также ограничит любые пользовательские стили элементами, к которым применяются ваши определенные классы.
Шаг 4. Предварительный просмотр меню
Теперь ваше меню почти готово к работе. Однако, прежде чем завершить его, вы можете проверить его в настройщике WordPress. Вы можете переключать непрозрачность, наведение, размер шрифта и многое другое, наблюдая за их эффектами в режиме реального времени.
Щелкните Управление с помощью интерактивного предварительного просмотра , чтобы войти в оперативный редактор:
При необходимости здесь можно внести дополнительные изменения, такие как добавление, удаление или изменение порядка пунктов меню:
Для предварительного просмотра вам не потребуется новая вкладка ваши изменения, так как настройщик показывает вам предварительный просмотр вашего веб-сайта в реальном времени.
Шаг 5. Опубликуйте свое меню
Когда вы будете готовы, вы можете сделать свое новое раскрывающееся меню одним щелчком мыши. Просто нажмите кнопку Опубликовать :
Это оживит меню на вашем сайте и позволит посетителям начать им пользоваться.
Также стоит отметить, что если вы создали несколько меню и хотите разместить их в разных местах, вы также можете использовать для этого Настройщик:
С помощью Настройщика вы можете назначить меню всем различным местам, поддерживаемым ваша тема.
Плагины раскрывающегося меню
Конечно, если вы предпочитаете использовать плагины для создания раскрывающихся меню, есть несколько доступных вариантов. Вот некоторые из лучших плагинов меню для WordPress, как бесплатных, так и премиальных:
- Max Mega Menu : Бесплатный плагин, который добавляет множество опций к существующему редактору меню.
- Hero Menu : Инструмент с широкими возможностями настройки, ориентированный на скорость отклика.
- УберМеню : Решение, которое дает вам максимальный контроль над стилем и функциональностью ваших меню.
Любой из этих инструментов может выполнить свою работу. Так что, какой из них вы выберете, будет зависеть от личных предпочтений и конкретных функций, которые вы ищете.
Настройте свой сайт с помощью WP Engine
Важно создавать визуально привлекательные и доступные веб-сайты. Один простой метод, который помогает в обеих этих областях, — это создание раскрывающихся навигационных меню. Эта опция меню привлекательна и проста в использовании, а также экономит место на экране.
Чтобы поддерживать удобный веб-сайт, вам также потребуется доступ к нужным ресурсам и надежный хостинг. Наши планы могут помочь!
Пример создания выпадающего меню с помощью CSS :focus-within
В сегодняшнем примере будет создано чистое выпадающее меню CSS с использованием псевдокласса :focus-within .
Вы можете увидеть в видео ниже рабочий пример:
Как работает псевдоселектор CSS :focus-within
:focus-within выбирает элемент, если этот элемент содержит дочерние элементы, находящиеся в фокусе.
Он связан с псевдоклассом :focus , просто он сработает, если будет выбрано что-то, что содержится в этом элементе.
В отличие от :focus , который применяется непосредственно к самому элементу, правила :focus-within применяются к родительскому элементу сфокусированного элемента.
Создание выпадающего меню CSS с помощью :focus-within
Чтобы создать меню, мы начнем с базовой структуры HTML, подобной приведенной ниже:
<дел>
menu-container {
дисплей: встроенный гибкий;
flex-направление: строка;
граница: сплошная 2px #000000;
курсор: указатель;
}
.меню {
положение: родственник;
прокладка: 0rem 0.5rem;
}
.меню > .меню-контент {
дисплей: нет;
} 
