Расширенное выпадающее меню
Реализация меню Mega dropdown, которое вмещает в себя множество подпунктов, превью галереи и прочих дополнений
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<header> <div class="cd-dropdown-wrapper"> <a class="cd-dropdown-trigger" href="#0">Выпадающее меню</a> <nav class="cd-dropdown"> <h2>Заголовок</h2> <a href="#0" class="cd-close">Закрыть</a> <ul class="cd-dropdown-content"> <li> <form class="cd-search"> <input type="search" placeholder="Поиск..."> </form> </li> <li class="has-children"> <a href="#">Одежда</a> <ul class="cd-secondary-dropdown is-hidden"> <li class="go-back"><a href="#0">Меню</a></li> <li class="see-all"><a href="#">Вся одежда</a></li> <li class="has-children"> <a href="#">Аксессуары</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Одежда</a></li> <li class="see-all"><a href="#">Все аксессуары</a></li> <li class="has-children"> <a href="#0">Шапочки</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Аксессуары</a></li> <li class="see-all"><a href="#">Все шапочки</a></li> <li><a href="#">Головные уборы</a></li> <li><a href="#">Подарки</a></li> <li><a href="#">Шарфы</a></li> </ul> </li> <li class="has-children"> <a href="#0">Головные уборы</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Аксессуары</a></li> <li class="see-all"><a href="#">Все головные уборы</a></li> <li><a href="#">Шапочки</a></li> <li><a href="#">Шапки</a></li> <li><a href="#">Головные уборы</a></li> </ul> </li> <li><a href="#">Очки</a></li> <li><a href="#">Перчатки</a></li> <li><a href="#">Ювелирные изделия</a></li> <li><a href="#">Шарфы</a></li> </ul> </li> <li class="has-children"> <a href="#">Верхняя одежда</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Одежда</a></li> <li class="see-all"><a href="#">Вся верхняя одежда</a></li> <li><a href="#">Повседневная брюки</a></li> <li class="has-children"> <a href="#0">Джинсы</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Верхняя одежда</a></li> <li class="see-all"><a href="#">Все джинсы</a></li> <li><a href="#">Рваные</a></li> <li><a href="#">Узкие</a></li> <li><a href="#">Зауженные</a></li> <li><a href="#">Прямые</a></li> </ul> </li> <li><a href="#0">Леггинсы</a></li> <li><a href="#0">Шорты</a></li> </ul> </li> </ul> <!-- .cd-secondary-dropdown --> </li> <!-- .has-children --> <li class="has-children"> <!-- другие элемента списка --> </li> <!-- .has-children --> <li class="has-children"> <!-- другие элемента списка --> </li> <!-- .has-children --> <li class="cd-divider">Разделитель</li> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> </ul> <!-- .cd-dropdown-content --> </nav> <!-- .cd-dropdown --> </div> <!-- .cd-dropdown-wrapper --> </header> <main class="cd-main-content"> <!-- your content here --> </main> |
2. И стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.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); } .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%); } @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; } } |
Собственно говоря, готово!
