Создание мега-меню с помощью UIkit 3 Nav

Рассмотрим варианты создания мега-меню с помощью компонентов UIkit 3. В процессе создания понадобятся компоненты Навигационная панель, Навигация, Dropbar, Иконки.

Сначала создадим простейшее мега меню в навигационной панели. 

<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>...</li>
</ul>
</div>
</nav>

Внутри создадим 2 важных элемента: ссылку и выпадающий блок:

<a href="#">Ссылка</a>
<div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
<div class="uk-navbar-dropdown-grid uk-child-width-1-4" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="/">...</a></li>
</ul>
</div>
</div>
</div>

Смотрим разметку.

  • Компонент Drop по умолчанию показывает скрытый блок при наведении на предыдущий элемент в потоке. В нашем случае это элемент a.
  • Элемент с классом .uk-navbar-dropdown стилизует выпадающий блок.
  • Атрибут uk-drop содержит несколько параметров. boundary: !nav; означает, что выпадающий блок будет иметь ширину элемента nav. boundary-align выравнивает выпадающий блок по границе. Наконец, pos: bottom-justify у станавливает позицию всплытия — по ширине.
  • Класс .uk-child-width-1-4@m создает четырехколоночный вариант отображения меню для устройств с экраном шире 960px.
  • Обратите внимание на элемент div без опознавательных наков. Он нужен для поддержки всеми любимого IE.
  • Стилизующие классы .uk-nav и .uk-navbar-dropdown-nav взяты из компонента Навигация.
  • <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
    <li>
    <a href="#">Ссылка</a>
    <div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
    <div class="uk-navbar-dropdown-grid uk-child-width-1-4@m" uk-grid>
    <div>
    <ul class="uk-nav uk-navbar-dropdown-nav">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span></span>Активный</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    </ul>
    </div>
    <div>
    <ul class="uk-nav uk-navbar-dropdown-nav">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Активный</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    </ul>
    </div>
    <div>
    <ul class="uk-nav uk-navbar-dropdown-nav">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Активный</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    </ul>
    </div>
    <div>
    <ul class="uk-nav uk-navbar-dropdown-nav">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Активный</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    </ul>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </nav>

Мега меню с различным содержимым

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

  • <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
    <li>
    <a href="#">Ссылка</a>
    <div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
    <div class="uk-grid-small" uk-grid>
    <div class="uk-width-1-4@m uk-flex uk-flex-center uk-flex-middle uk-tile uk-tile-secondary">
    <ul class="uk-nav uk-nav-default">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span></span>Активный</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li class="uk-nav-header">Заголовок</li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Ссылка</a></li>
    </ul>
    </div>
    <div class="uk-width-3-4@m">
    <div uk-height-match="target: .form" class="uk-grid-small uk-child-width-1-3@m" uk-grid>
    <div>
    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
    <img alt="UIKit Мега меню" data-src="/images/dark-s.jpg" data-width="1000" height="667" uk-img>
    <div class="uk-position-center">
    <ul class="uk-iconnav">
    <li><a href="#" uk-icon="icon: plus"></a></li>
    <li><a href="#" uk-icon="icon: file-edit"></a></li>
    <li><a href="#" uk-icon="icon: copy"></a></li>
    </ul>
    </div>
    </div>
    </div>

    <div>
    <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
    <img alt="UIKit Мега меню" data-src="/images/photo2-s.jpg" data-width="1000" height="667" uk-img>
    <div class="uk-position-center">
    <div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove uk-text-center">Заголовок</h4></div>
    <div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove uk-text-center">Подзаголовок</h4></div>
    </div>
    </div>
    </div>

    <div>
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img uk-img data-src="/images/photo7-s.jpg" data-width="750" data-height="500" alt="UIkit мега меню">
    <img uk-img class="uk-transition-scale-up uk-position-cover" data-src="/images/photo3-s.jpg" data-width="750" height="500" alt="UIkit mega menu">
    </div>
    </div>

    <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow="animation: push; autoplay: true; autoplay-interval: 900">
    <ul class="uk-slideshow-items uk-height-1-1">
    <li>
    <img uk-img alt="UIKit Мега меню" data-src="/images/photo7-s.jpg" data-width="750" height="500" uk-cover>
    </li>

    <li>
    <img uk-img alt="UIKit Мега меню" data-src="/images/photo8-s.jpg" data-width="750" height="500" uk-cover >
    </li>

    <li>
    <img uk-img alt="UIKit Мега меню" data-src="/images/photo9-s.jpg" data-width="750" height="500" uk-cover>
    </li>
    </ul>
    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

    </div>

    <div>
    <div class="uk-inline">
    <div class="uk-position-center-left uk-light">
    <ul class="uk-dotnav uk-dotnav-vertical uk-margin-left" uk-switcher="connect: #nav-sw; animation: uk-animation-fade">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>
    </div>
    <ul id="nav-sw" class="uk-switcher">
    <li><img uk-img data-src="/images/photo4-s.jpg" data-width="750" data-height="500" alt="uikit nav"></li>
    <li><img uk-img data-src="/images/photo5-s.jpg" data-width="750" data-height="500" alt="uikit nav"></li>
    <li><img uk-img data-src="/images/photo6-s.jpg" data-width="750" data-height="500" alt="uikit nav"></li>
    </ul>
    </div>
    </div>

    <div>
    <div class="uk-inline uk-background-primary">
    <img uk-img data-src="/images/photo5-s.jpg" data-width="750" data-height="500" alt="UIkit nav">
    <div class="uk-position-center uk-light">
    <p class="uk-h4 uk-margin-remove">Клуб</p>
    </div>
    </div>
    </div>

    <div>
    <div class="uk-tile uk-tile-muted uk-text-center"><span uk-icon="icon: desktop; ratio: 2"></span></div>
    </div>

    <div>
    <div class="uk-tile uk-tile-secondary uk-text-center"><span uk-icon="icon: world; ratio: 2"></span></div>
    </div>

    <div>
    <div class="uk-tile uk-tile-primary uk-text-center"><span uk-icon="icon: image; ratio: 2"></span></div>
    </div>

    <div uk-height-match="target: > div"  class="uk-width-1-1@m">
    <div class="uk-child-width-1-2@m uk-grid-small" uk-grid>
    <div>
    <div class="uk-light uk-background-secondary uk-padding form">
    <h3>Заголовок</h3>
    <p>Расчудесный текст</p>
    <button class="uk-button uk-button-default">Кнопка</button>
    </div>
    </div>

    <div>
    <div class="uk-dark uk-background-muted uk-padding form">
    <form class="uk-grid-small" uk-grid>
    <h3>Подписаться на рассылку</h3>
    <div class="uk-width-1-1">
    <div class="uk-inline">
    <a class="uk-form-icon" href="#" uk-icon="icon: mail"></a>
    <input class="uk-input" type="text" placeholder="Email...">
    </div>
    </div>
    <div class="uk-width-1-1">
    <button class="uk-button uk-button-default">Подписаться</button>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </nav>

Мы можем наполнить мега-меню не только ссылками, но и любыми другими элементами. Например, плиткой. Создадим разметку плитки и поместим в нее иконку. Добавим несколько изображений.

<div class="uk-tile uk-tile-primary uk-text-center"><span uk-icon="icon: image; ratio: 2"></span></div>

И совместим с эффектами переходов. Все варианты переходов смотрите в разделе Переходы.

<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img alt="UIKit Мега меню" data-src="/images/dark-s.jpg" data-width="1000" height="667" uk-img>
<div class="uk-position-center">
<div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove uk-text-center">Заголовок</h4></div>
<div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove uk-text-center">Подзаголовок</h4></div>
</div>
</div>

Вставим небольшой слайдер с автопрокруткой. Изображения будем подгружать с помощью Lazy Load из компонента Изображения.

<ul class="uk-slideshow-items">
<li>
<img alt="UIKit Мега меню" data-src="/images/light-s.jpg" data-width="1000" height="667" uk-cover uk-img>
</li>
<li>
<img alt="UIKit Мега меню" data-src="/images/dark-s.jpg" data-width="1000" height="667" uk-cover uk-img>
</li>
<li>
<img alt="UIKit Мега меню" data-src="/images/photo-s.jpg" data-width="1000" height="667" uk-cover uk-img>
</li>
</ul>

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

Необходимо также изменить разметку внутри:

<div class="uk-navbar-dropdown" uk-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;">
<div class="uk-grid-small" uk-grid>
<!-- Левая колонка с простой навигацией -->
<div class="uk-width-1-4@m uk-flex uk-flex-center uk-flex-middle uk-tile uk-tile-secondary">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#"><...</a></li>
</ul>
</div>
<!-- Правая колонка с различными элементами -->
<div class="uk-width-3-4@m">
<!-- Добавляем вложенную сетку и задаем всем элементам внутри одинаковую высоту -->
<div uk-height-match="target: > div > div" class="uk-grid-small uk-child-width-1-3@m" uk-grid>
<div>...</div>
<div>...</div>
</div>
</div>
</div>
</div>