Адаптивное выпадающее мега меню на CSS

Опубликовано: 5 февраля 2017 Обновлено: 30 апреля 2019 23 комментария

Урок посвящён созданию адаптивного выпадающего меню шириной во всю ширину страницы или блока навигации, на чистом CSS. Мега меню обычно используется на сайтах интернет-магазинов и любых других сайтах электронной коммерции, так как оно является оптимальным способом для организации и отображения содержимого.

Общий принцип создания мега меню не отличается от создания обычного горизонтального выпадающего меню. Разница заключается лишь в том, что относительное позиционирование получает не каждый элемент списка, в который вкладывается выпадающее меню, а меню верхнего уровня или любой другой блок-контейнер. В этом случае мы можем задать для выпадающего меню ширину 100%, которая будет равна ширине меню верхнего уровня, а не ширине элемента списка. Для выпадающего меню обычного размера нужно приписать класс и задать для него относительное позиционирование.

Каждый столбец внутри выпадающего меню представляет собой элемент списка, содержащий внутри заголовок (опционально) и вложенное меню.

Рис. 1. Контейнер для колонок мега меню
Рис. 2. Вложенное меню

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

Необходимые файлы раздела head

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<nav class="container">
  <ul class="top-menu">
    <li><a href="">Главная</a></li>
    <li class="dropdown-standart"><a href="" class="dropdown">Страницы</a>
      <ul class="submenu-standart">
        <li><a href="">Элемент списка</a></li>
        <li><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="" class="dropdown">Магазин</a>
      <ul class="submenu">
        <li><h3>Колонка 1</h3>
          <ul>
            <li><a href="">Элемент списка</a></li>
            <li><a href="">Элемент списка</a></li>
            <li><a href="">Элемент списка</a></li>
            <li><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><h3>Колонка 2</h3>
          <ul>
            <li><a href="">Элемент списка</a></li>
            <li><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>
          <ul>
            <li>
              <a href="" class="link-image">
              <img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg">
              </a>
            </li>
            <li><h3 class="image-header">Заголовок</h3></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Портфолио</a></li>
    <li><a href="">Блог</a></li>
  </ul>
</nav>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');
*{box-sizing: border-box;}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {text-decoration: none;}
.top-menu {
  background: white;
  position: relative;
}
.top-menu:after, 
.submenu:after {
  content: "";
  display: table;
  clear: both;
}
.top-menu > li {
  display: inline-block;
  float: left;
}
.top-menu > li > a {
  display: block;
  padding: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  transition: .2s linear;
}
.top-menu > li > a:hover {color: #B03062;}
.dropdown:after {
  content: "\f107";
  font-family: FontAwesome;
  margin-left: 4px;
  vertical-align: top;
}
.submenu, 
.submenu-standart {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,.07);
  background: white;
  padding: 25px 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,30px,0);
  transition: .5s ease-out;
  transform-origin: 0% 0%;
}
.submenu {width: 100%;}
.submenu-standart {
  min-width: 200px;
  padding: 10px 0;
}
.dropdown-standart {position: relative;}
.top-menu > li:hover .submenu, 
.top-menu > li:hover .submenu-standart {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}
.submenu > li {
  float: left;
  width: calc(100% / 3);
  padding: 0 18px;
  border-right: 1px solid #e5e5e5;
}
.submenu-standart li {padding: 0 18px;}
.submenu > li:last-child {border-right: none;}
.submenu img {
  display: block;
  width: 100%;
}
.submenu li a, 
.submenu-standart li a {
  display: block;
  padding: 5px 0;
  color: #666;
  font-size: 13px;
}
.submenu li .link-image {padding: 0;}
.submenu li a:hover {color: #B03062;}
.submenu h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.content {
  margin: 20px auto;
  padding: 0 20px;
}

Добавим адаптивность для мобильных устройств

@media(max-width:768px) {
  .top-menu li {
    width: 100%;
    height: auto!important;
  }
  .top-menu > li {border-bottom: 1px solid #e5e5e5;}
  .top-menu > li > a {padding: 18px}
  .submenu,
  .submenu-standart {
    position: relative;
    display: none;
    box-shadow: none;
    padding: 0;
    background: rgba(0,0,0,.02);
  }
  .submenu-standart {padding: 10px 0;}
  .submenu > li {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 18px;
  }
  .submenu h3 {margin: 0 0 10px}
  .submenu .image-header {margin: 10px 0}
  .submenu li:last-of-type {border-bottom: none}
  .top-menu > li:hover .submenu,
  .top-menu > li:hover .submenu-standart {display: block;}
}

Активация плагина matchHeight

jQuery(document).ready(function($) {
  $('.submenu > li').matchHeight();
});

See the Pen apGgYv by Elena (@html5book) on CodePen.

Эффекты для появления мега меню

В приведённом примере меню появляется, скользя снизу-вверх. Чтобы разнообразить свои проекты, можно воспользоваться одним из следующих эффектов:

1. Поворот из глубины экрана

.submenu {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);
  background: white;
  padding: 30px 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: 0% 0%;
  transition: .4s ease-in;
}
.top-menu > li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: perspective(600px) rotateX(0);
}

2. Скольжение сверху-вниз

.submenu {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);
  background: white;
  padding: 30px 0;
  position: absolute;
  left: 0;
  width: 100%;
  top: -60px;
  opacity: 0;
  z-index: -1;
  transition: .4s cubic-bezier(.6, .04, .98, .335);
}
.top-menu > li:hover .submenu {
  top: 100%;
  opacity: 1;
  z-index: 5;
}

3. Скольжение слева-направо

.submenu {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);
  background: white;
  padding: 30px 0;
  position: absolute;
  width: 100%;
  top: 100%;
  left: -60px;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  transition: .4s cubic-bezier(.455, .03, .515, .955);
}
.top-menu > li:hover .submenu {
  left: 0;
  opacity: 1;
  visibility: visible;
}

4. Эффект масштабирования

.submenu {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);
  background: white;
  padding: 30px 0;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  opacity: 0;
  z-index: 5;
  transform: scale3d(0,0,0);
  transform-origin: top left;
  transition: .4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.top-menu > li:hover .submenu {
  left: 0;
  opacity: 1;
  transform: scale3d(1,1,1);
}

Поделиться: