Я думаю каждый из Вас видел сайты онлайн каталогов или магазинов. В самых крутых из них было такое меню, что вместо списка открывалась еще одна панель со своей собственной разметкой. Иногда даже с картинкой. Выглядит это красиво и сложно. Красоты я Вам не обещаю, но упростить понимание попробую
Mega Menu
| В статье | Все статьи |
Раз уж пошла такая маза быстренько рассмотрим такую тему как Mega Menu. Ничего сложного в ней нету, несмотря на название. Идея состоит в том, что вместо подменю находится какой-нибудь блочный элемент, со своей собственной разметкой ( вместо ul -> div ). Идея остается таже. Сначала этот div спрятан, а при наведении на пункт 1-го уровня меню div появляется:
|
1 2 3 |
.menu_top > ul li:hover > div { display:block } |
А уже то что находится внутри и как это оформлять полностью зависит от Вас. Этот вид меню наиболее редкий, т.к. подразумевается индивидуальная разметка. Переходим к примерам
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 |
<div class="menu_top"> <ul> <li><a href="">Category 1</a> <div> <p>Lorem ipsum dolor sit amet, </p> <p>consectetur adipisicing elit. </p> <p>Ad adipisci asperiores beatae cum</p> <p>dolor dolorum eveniet ipsam ipsum libero obcaecati odio, quam quibusdam quidem recusandae, reiciendis repellendus tenetur totam, voluptate.</p> <p>Aperiam asperiores assumenda enim ipsa laudantium? Ab deleniti error optio tenetur velit. Aspernatur debitis dolorum eius facilis incidunt ipsa laboriosam laudantium maiores necessitatibus perferendis quam quo, quos reiciendis repudiandae ut!</p> </div> </li> <li><a href="">Category 2</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum, inventore ipsa maxime neque obcaecati pariatur, possimus qui quis reiciendis similique ullam. Dolorum eos fugit minus molestias necessitatibus reprehenderit sunt.</p> </div> </li> <li><a href="">Category 3</a></li> <li><a href="">Category 4</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolore doloribus eius enim error eum modi necessitatibus, neque soluta, totam vitae, voluptatem voluptates! Id itaque iusto molestiae omnis voluptas?</p> <p>Aperiam architecto consequuntur dicta distinctio ea, eaque explicabo fugiat magnam minus molestiae nobis perspiciatis possimus qui quisquam quos recusandae, sapiente sint ut veritatis voluptatum. Dignissimos ipsum molestiae nam sunt voluptas.</p> </div> </li> <li><a href="">Category 5</a></li> </ul> </div> |
Пример 1.
(example_1::github)
На flexbox’е
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.menu_top ul { width: 100%; /* чтобы растянуть на всю ширину контейнета (без этого justify-content - не работает) */ display: inline-flex; /* в строку */ position: relative; /* чтобы начинать отсчет от 1-го уровня*/ } .menu_top > ul > li { flex-grow: 1; /* если не указывать, то за элементы flex будет браться ссылки (<a>), то что первое содержит content */ } .menu_top > ul div { /* прячем div */ position: absolute; display: none; } .menu_top > ul li:hover > div { display: flex; /*flex-flow: row wrap; /!* много строчный flex *!/*/ left: 0; /* Чтобы начинать отсчет сначала (например ul, все зависит от того где будет position:relative)*/ } |
Пример 2.
(example_2::github)
Следующий пример я сделал используя SCSS, а за GRID у меня отвечает Susy (не хотеля я тянуть bootstrap и захламлять код бесполезными классами). Собирается это все при помочи GulpJS. Короче понтанулся
SCSS
|
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 |
@import "susy"; $susy: ( /* Инициализация susy */ columns: 12, // The number of columns in your grid gutters: 1/4, // The size of a gutter in relation to a single column //debug: (image: show) /* debug режим (показывает колонки) */ ); /* ................ */ .menu_top > ul { width: 100%; /* чтобы растянуть на всю ширину контейнета (без этого justify-content - не работает) */ display: inline-flex; /* в строку */ justify-content: space-between; /* равномерно по всех ширине */ position: relative; /* чтобы начинать отсчет от 1-го уровня*/ > li { flex-grow: 1; /* если не указывать, то за элементы flex будет брать ссылки (<a>) */ div { /* прячем div */ position: absolute; display: none; } &:hover div { @include container(100%); /* div - это наш контейнер на все ширину ul, который занимает все ширину wrapper */ display: block; left: 0; /* Чтобы начинать отсчет сначала (например ul, все зависит от того где будет position:relative)*/ p{ @include span(1 of 5); /* делим на 5 равных частей */ &:nth-child(5n){ @include span(1 of 5 last); /* указывает последний элемент (у него отсутсвует margin-right) */ } } } } } |