Мега меню на CSS и jQuery

В нашем блоге уже очень много примеров навигации по сайту с применением CSS и jQuery:

Хочу предложить очередное адаптивное и простое в настройке мега-меню.!



ДЕМО
ИСХОДНИКИ


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

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

CSS Адаптивное Mega Меню

Как вы можете заметить из демонстрации, раскрывающийся список активируется одним касанием / щелчком. Мы могли бы достичь того же результата, используя вместо этого состояние: hover, без использования js (мы предоставляем резервный вариант: hover на случай, если javascript отключен). Однако эти решения должны основываться на том, что, по нашему мнению, является лучшим пользовательским интерфейсом. Пользователи обычно ожидают щелчка для доступа к новому контенту, в то время как эффекты: hover в основном обнаруживают «потенциальное действие». Вот почему мы предпочли щелкнуть: состояние наведения. Если вы не согласны, переключиться с одного подхода на другой - проще простого;)

Иконки: Nucleo Library


Создание структуры

HTML состоит из двух основных элементов: <header>, содержащего раскрывающийся список (.cd-dropdown-wrapper), и <main> для всего основного содержимого. .cd-dropdown-wrapper содержит .cd-dropdown-trigger, чтобы вызвать раскрывающийся список, и .cd-dropdown, который состоит из вложенных неупорядоченных списков.


<header>
   <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger" href="#0">Dropdown</a>
      <nav class="cd-dropdown">
         <h2>Title</h2>
         <a href="#0" class="cd-close">Close</a>
         <ul class="cd-dropdown-content">
            <li>
               <form class="cd-search">
                  <input type="search" placeholder="Search...">
               </form>
            </li>

            <li class="has-children">
               <a href="#0">Clothing</a>
               <ul class="cd-secondary-dropdown is-hidden">
                  <li class="go-back"><a href="#0">Menu</a></li>
                  <li class="see-all"><a href="#0">All Clothing</a></li>
                  <li class="has-children">
                     <a href="#0">Accessories</a>

                     <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="#0">All Accessories</a></li>
                        <li class="has-children">
                           <a href="#0">Beanies</a>
                           <ul class="is-hidden">
                              <li class="go-back"><a href="#0">Accessories</a></li>
                              <li class="see-all"><a href="#0">All Benies</a></li>
                              <li><a href="#0">Caps &amp; Hats</a></li>
                              <!-- other list items here -->
                           </ul>
                        </li>
                        <li class="has-children">
                           <a href="#0">Caps &amp; Hats</a>
                           <ul class="is-hidden">
                              <li class="go-back"><a href="#0">Accessories</a></li>
                              <li class="see-all"><a href="#0">All Caps &amp; Hats</a></li>
                              <li><a href="#0">Beanies</a></li>
                              <!-- other list items here -->
                           </ul>
                        </li>
                        <li><a href="#0">Glasses</a></li>
                        <!-- other list items here -->
                     </ul>
                  </li>

                  <li class="has-children">
                     <!-- other list items here -->
                  </li>

                  <li class="has-children">
                     <!-- other list items here -->
                  </li>

                  <li class="has-children">
                     <!-- other list items here -->
                  </li>
               </ul> <!-- .cd-secondary-dropdown -->
            </li> <!-- .has-children -->

            <li class="has-children">
               <!-- other list items here -->
            </li> <!-- .has-children -->

            <li class="has-children">
               <!-- other list items here -->
            </li> <!-- .has-children -->

            <li class="cd-divider">Divider</li>

            <li><a href="#0">Page 1</a></li>
            <!-- other list items here -->

         </ul> <!-- .cd-dropdown-content -->
      </nav> <!-- .cd-dropdown -->
   </div> <!-- .cd-dropdown-wrapper -->
</header>

<main class="cd-main-content">
   <!-- your content here -->
</main>


Добавление стиля

Для мобильных устройств основная идея заключалась в том, чтобы позволить пользователю полностью сосредоточиться на раскрывающемся контенте после его активации.

Вот почему мы присвоили раскрывающемуся списку фиксированное положение и установили его ширину и высоту на 100%. По умолчанию он скрыт прямо над окном просмотра (translateY (-100%)). Когда пользователь щелкает элемент триггера, класс .dropdown-is-active добавляется в раскрывающийся список, который переводится обратно в область просмотра.


.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);
}

Когда пользователь выбирает новый подуровень в раскрывающемся списке, видимые элементы переводятся влево за пределы области просмотра (с использованием класса .move-out), в то время как новые элементы возвращаются в область просмотра (удаляя класс .is-hidden класса из их родительский элемент <ul>).


.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%);
}

На больших устройствах (ширина области просмотра больше 1024 пикселей) вместо этого достаточно места для размещения содержимого рядом, без необходимости заменять видимый контент.


@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;
  }
}

Примечание

Если вы хотите, чтобы раскрывающийся список открывался слева, добавьте класс .open-to-left к элементу .cd-dropdown-wrapper.


Обработка событий

Мы мало что сделали в jQuery, кроме прослушивания события щелчка на определенных элементах (например, .cd-dropdown-trigger, .go-back) и добавления / удаления классов соответственно.

Примечание

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

Надеюсь, вам понравилось! 🎉


🔖 Выбор по тегам ×

Top