Мега меню в полноэкранном модальном окне

Используем полноэкранное модальное окно в качестве основного навигационного меню сайта. Предполагается, что вы уже имеете работать с UIkit. Если нет, данный пример будет похож на серию "как нарисовать сову".

Для создания подобного меню используются следующие компоненты:

Сначала создадим разметку модального окна:

  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-full-example" uk-toggle>Открыть</a>

    <div id="modal-full-example" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
    <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
    <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
    <div class="uk-background-cover" style="background-image: url('/images/photo.jpg');" uk-height-viewport></div>
    <div class="uk-padding-large">
    <h1>Заголовок</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>
    </div>
    </div>

Создаем в модальном окне двухколоночный макет. Зададим левой колонке ширину в 25% для больших экранов, 30% для маленьких. Оставшуюся ширину заберет правая колонка. Равную высоту колонок можно установить с помощью атрибута uk-height-match.

<div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-1-3@m uk-width-1-4@l uk-flex uk-flex-middle uk-flex-center uk-light"></div>
<div class="uk-width-expand"></div>
</div>

Левая колонка будет содержать меню-переключатель из компонента Переключатель. Это позволит разместить в модальном окне очень большое количество информации. По сути, в этом примере будет создано 4 полноэкранных страницы сайта.

<!-- Это навигация, содержащая переключающие элементы -->
<ul uk-switcher>
<li><a href="#"></a></li>
</ul>

<!-- Это контейнер элементов содержимого -->
<ul class="uk-switcher">
<li></li>
</ul>

Далее следует объединить код воедино. В левую колонку добавим список с элементами управления переключателем, в правую переместим список с содержимым. Для выбора списка с контентом переключателя задаем класс .menu-list и подключаемся по нему: uk-switcher="connect: .menu-list. Добавим служебных классов и анимаций переходов.

<div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-1-3@m uk-width-1-4@l uk-flex uk-flex-middle uk-flex-center uk-light">
<ul class="uk-nav uk-nav-default ui-navbar-center" uk-switcher="connect: .menu-list; animation: uk-animation-fade;">
<li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: home"></span></span> Главная</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: cart"></span> Каталог</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: users"></span> О нас</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: location"></span> Контакты</a></li>
</ul>
</div>
<div class="uk-width-expand">
<ul class="menu-list uk-switcher">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>

Далее берем разметку мега-меню из примера мега меню nav, переделываем и вставляем в контейнер модального окна. В первую страницу вставим содержимое из указанного выше примера, во второй разместится навигация, на третьей странице вставим видеофон и текст с плиткой. Содержимым 4 страницы будет iframe с картой Google.

Готовое мега-меню в модальном окне

  • Открыть 
  • <a class="uk-button uk-button-default" href="#gls-modal-mega-menu" uk-toggle>Открыть</a>

    <div id="gls-modal-mega-menu" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog uk-background-secondary">
    <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>

    <div uk-grid class="uk-grid uk-grid-small">
    <div class="uk-width-1-3@m uk-width-1-4@l uk-flex uk-flex-middle uk-flex-center uk-light column">
    <ul class="uk-nav uk-nav-default ui-navbar-center" uk-switcher="connect: .menu-list; animation: uk-animation-fade;">
    <li class="uk-active"><a href="#"><span class="uk-margin-small-right" uk-icon="icon: home"></span></span> Главная</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: cart"></span> Каталог</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: users"></span> О нас</a></li>
    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: location"></span> Контакты</a></li>
    </ul>
    </div>
    <div class="uk-width-expand column">
    <ul class="menu-list uk-switcher">
    <li class="uk-active">
    <div class="uk-grid-small uk-child-width-auto uk-flex-middle" uk-grid>
    <div uk-height-viewport>
    <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>
    </div>
    </div>
    </li>
    <li>
    <div class="uk-background-cover uk-padding-large" uk-img data-src="/images/dark.jpg" data-width="1800" data-height="1200" alt="UIkit Modal" uk-height-viewport>
    <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-3@m uk-grid-match uk-flex-middle uk-flex-center uk-light uk-height-1-1" uk-grid>
    <div>
    <ul class="uk-nav-default uk-nav-parent-icon uk-nav-center" uk-nav>
    <li class="uk-nav-header">Фотокамеры</li>
    <li class="uk-parent">
    <a href="#">Зеркальные</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Nikon</a>
    </li>
    <li>
    <a href="#">Canon</a>
    </li>
    </ul>
    </li>
    <li class="uk-parent">
    <a href="#">Мыльницы</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Nikon</a>
    </li>
    <li>
    <a href="#">Canon</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <div>
    <ul class="uk-nav-default uk-nav-parent-icon uk-nav-center" uk-nav>
    <li class="uk-nav-header">Объективы</li>
    <li class="uk-parent">
    <a href="#">Для зеркальных камер</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Canon</a>
    </li>
    <li>
    <a href="#">Nikon</a>
    </li>
    </ul>
    </li>
    <li class="uk-parent">
    <a href="#">Для беззеркальных камер</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Canon</a>
    </li>
    <li>
    <a href="#">Nikon</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <div>
    <ul class="uk-nav-default uk-nav-parent-icon uk-nav-center" uk-nav>
    <li class="uk-nav-header">Аксессуары</li>
    <li class="uk-parent">
    <a href="#">Фотосумки</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Маленькие</a>
    </li>
    <li>
    <a href="#">Большие</a>
    </li>
    </ul>
    </li>
    <li class="uk-parent">
    <a href="#">Зарядники</a>
    <ul class="uk-nav-sub">
    <li>
    <a href="#">Nikon</a>
    </li>
    <li>
    <a href="#">Canon</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </li>
    <li>

    <div class="uk-cover-container" uk-height-viewport>
    <video uk-video autoplay loop muted playsinline uk-cover>
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
    </video>
    <div class="uk-overlay uk-overlay-primary uk-position-bottom">
    <h3>О компании</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h4>Преимущества</h4>
    <div class="uk-grid uk-child-width-1-3@s uk-grid-small" uk-grid>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Красиво</div></div>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Вкусно</div></div>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Полезно</div></div>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Быстро</div></div>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Качественно</div></div>
    <div><div class="uk-tile uk-tile-primary uk-text-center uk-padding-small">Дешево</div></div>
    </div>
    </div>
    <canvas width="1920" height="1080"></canvas>

    </div>

    </li>
    <li>
    <div class="uk-grid uk-grid-small uk-child-width-1-1 uk-flex-middle" uk-grid>
    <div>
    <div class="uk-cover-container uk-inline" uk-height-viewport>
    <canvas width="1920" height="1080"></canvas>
    <iframe uk-cover src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d472.03222376183646!2d37.617790973193046!3d55.75196480225693!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a50b315e573%3A0xa886bf5a3d9b2e68!2z0JzQvtGB0LrQvtCy0YHQutC40Lkg0JrRgNC10LzQu9GM!5e0!3m2!1sru!2sru!4v1548833744610" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    <div class="uk-overlay uk-overlay-primary uk-position-bottom">
    <h3>Контакты</h3>
    <ul class="uk-list uk-list-bullet">
    <li>Телефон: 8 800 000 1234</li>
    <li>Телефон: 8 800 000 1235</li>
    <li>Email: mail@mail</li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>