В нашем блоге уже очень много примеров навигации по сайту с применением CSS и jQuery:
- Полноэкранная навигация на jQuery
- Полноэкранная всплывающая навигация на CSS и jQuery
- Адаптивная навигация по сайту на jQuery и CSS
- Многоуровневая расширяемая навигация на CSS и jQuery
Хочу предложить очередное адаптивное и простое в настройке мега-меню.!
Одна из самых сложных задач при работе над веб-проектами с большим количеством контента - облегчить пользователю навигацию по этому контенту. Один из примеров, который мы все можем придумать, - это Amazon: бесконечные категории, каждая со своими подкатегориями ... вот почему в настоящее время они обеспечивают удобную навигацию в виде мега-выпадающего элемента в верхнем левом углу. страницы.
Мы работали над аналогичной концепцией - гибким мега раскрывающимся списком с подкатегориями. Вот небольшая анимация, которую мы собрали, чтобы показать вам наш подход к мобильным и настольным устройствам:
Как вы можете заметить из демонстрации, раскрывающийся список активируется одним касанием / щелчком. Мы могли бы достичь того же результата, используя вместо этого состояние: hover, без использования js (мы предоставляем резервный вариант: hover на случай, если javascript отключен). Однако эти решения должны основываться на том, что, по нашему мнению, является лучшим пользовательским интерфейсом. Пользователи обычно ожидают щелчка для доступа к новому контенту, в то время как эффекты: hover в основном обнаруживают «потенциальное действие». Вот почему мы предпочли щелкнуть: состояние наведения. Если вы не согласны, переключиться с одного подхода на другой - проще простого;)
Иконки: Nucleo Library
Создание структуры
HTML состоит из двух основных элементов: <header>, содержащего раскрывающийся список (.cd-dropdown-wrapper), и <main> для всего основного содержимого.
.cd-dropdown-wrapper содержит .cd-dropdown-trigger, чтобы вызвать раскрывающийся список, и .cd-dropdown, который состоит из вложенных неупорядоченных списков.
<header>
<div class="cd-dropdown-wrapper">
<a class="cd-dropdown-trigger" href="#0">Dropdown</a>
<nav class="cd-dropdown">
<h2>Title</h2>
<a href="#0" class="cd-close">Close</a>
<ul class="cd-dropdown-content">
<li>
<form class="cd-search">
<input type="search" placeholder="Search...">
</form>
</li>
<li class="has-children">
<a href="#0">Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="#0">All Clothing</a></li>
<li class="has-children">
<a href="#0">Accessories</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="#0">All Accessories</a></li>
<li class="has-children">
<a href="#0">Beanies</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="#0">All Benies</a></li>
<li><a href="#0">Caps & Hats</a></li>
<!-- other list items here -->
</ul>
</li>
<li class="has-children">
<a href="#0">Caps & Hats</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="#0">All Caps & Hats</a></li>
<li><a href="#0">Beanies</a></li>
<!-- other list items here -->
</ul>
</li>
<li><a href="#0">Glasses</a></li>
<!-- other list items here -->
</ul>
</li>
<li class="has-children">
<!-- other list items here -->
</li>
<li class="has-children">
<!-- other list items here -->
</li>
<li class="has-children">
<!-- other list items here -->
</li>
</ul> <!-- .cd-secondary-dropdown -->
</li> <!-- .has-children -->
<li class="has-children">
<!-- other list items here -->
</li> <!-- .has-children -->
<li class="has-children">
<!-- other list items here -->
</li> <!-- .has-children -->
<li class="cd-divider">Divider</li>
<li><a href="#0">Page 1</a></li>
<!-- other list items here -->
</ul> <!-- .cd-dropdown-content -->
</nav> <!-- .cd-dropdown -->
</div> <!-- .cd-dropdown-wrapper -->
</header>
<main class="cd-main-content">
<!-- your content here -->
</main>
Добавление стиля
Для мобильных устройств основная идея заключалась в том, чтобы позволить пользователю полностью сосредоточиться на раскрывающемся контенте после его активации.
Вот почему мы присвоили раскрывающемуся списку фиксированное положение и установили его ширину и высоту на 100%. По умолчанию он скрыт прямо над окном просмотра (translateY (-100%)). Когда пользователь щелкает элемент триггера, класс .dropdown-is-active добавляется в раскрывающийся список, который переводится обратно в область просмотра.
.cd-dropdown {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-100%);
transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
transform: translateY(0);
}
Когда пользователь выбирает новый подуровень в раскрывающемся списке, видимые элементы переводятся влево за пределы области просмотра (с использованием класса .move-out), в то время как новые элементы возвращаются в область просмотра (удаляя класс .is-hidden класса из их родительский элемент <ul>).
.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
transform: translateX(100%);
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
/* push the dropdown items to the left when secondary dropdown slides in */
transform: translateX(-100%);
}
На больших устройствах (ширина области просмотра больше 1024 пикселей) вместо этого достаточно места для размещения содержимого рядом, без необходимости заменять видимый контент.
@media only screen and (min-width: 1024px) {
.cd-dropdown {
position: absolute;
top: 100%;
/* reset style*/
height: auto;
width: auto;
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.cd-dropdown.dropdown-is-active {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
.cd-dropdown-content {
/* reset mobile style */
position: static;
height: auto;
width: 280px;
}
.cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
transform: translateX(0);
left: 100%;
height: auto;
}
.cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
/* reset mobile style */
transform: translateX(0);
}
.cd-dropdown-content > .has-children > ul {
visibility: hidden;
}
.cd-dropdown-content > .has-children:hover > ul {
/* when hover over .cd-dropdown-content items - show subnavigation */
visibility: visible;
}
.cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {
/* if .cd-secondary-dropdown is visible - show also subnavigation */
visibility: visible;
}
}
Примечание
Если вы хотите, чтобы раскрывающийся список открывался слева, добавьте класс .open-to-left к элементу .cd-dropdown-wrapper.
Обработка событий
Мы мало что сделали в jQuery, кроме прослушивания события щелчка на определенных элементах (например, .cd-dropdown-trigger, .go-back) и добавления / удаления классов соответственно.
Примечание
Мы интегрировали плагин jQuery-menu-aim плагин, который различает пользователей, пытающихся навести указатель мыши на раскрывающийся элемент, и пользователя, пытающегося перейти к содержимому подменю.
Надеюсь, вам понравилось! 🎉
