Как создать боковое выпадающее меню с помощью CSS и jQuery

  • CSS
  • 4,513
  • 0
  • 0
  • 0
  • 8 месяцев назад

В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте. 4ZvbJjXyYsO7vLvU0OhV1JJnbHAvKgrqBLS2aalE1RktHWguJ3XHnAPN-W3nCCPsXdVWmja9aghuXYKdsH0Bj_7IHKuPUQj-BGFJrkjv5Ovql0kDMDCZzB7G4rcRk-yDUatNdZ3lOZ4nhuo5Eg

Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.

Демо | Скачать

Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation Menu Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Для начала необходимо загрузить Normalize.css  и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome. Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.

Иконка-гамбургер

Иконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.

<span class="toggle-button">
     <div class="menu-bar menu-bar-top"></div>
     <div class="menu-bar menu-bar-middle"></div>
     <div class="menu-bar menu-bar-bottom"></div>
</span>

Стили выглядят следующим образом:

.toggle-button {
  position: fixed;
  width: 44px;
  height: 40px;
  padding: 4px;
  transition: .25s;
  z-index: 15;
}
.toggle-button:hover {
  cursor: pointer;
}
.toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 80%;
  transition: .5s;
}
.toggle-button .menu-bar-top {
  border: 4px solid #555;
  border-bottom: none;
  top: 0;
}
.toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #555;
  margin-top: 7px;
  margin-bottom: 7px;
  top: 4px;
}
.toggle-button .menu-bar-bottom {
  border: 4px solid #555;
  border-top: none;
  top: 22px;
}
.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
}
.button-open .menu-bar-middle {
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
}
.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -7px);
  transition: .5s;
}

Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс .menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:

$(document).ready(function() {
  var $toggleButton = $('.toggle-button');
  $toggleButton.on('click', function() {
    $(this).toggleClass('button-open');
  });
});

Для тех, кто не знаком с jQuery - мы инициализируем переменную с  $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript.  Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass(), которая переключает класс .button-open.

Когда добавлен класс .button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:

https://s.codepen.io/matthewcain/fullembedgrid/MypKKq?type=embed&animations=run

Выпадающее меню навигации

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

<div class="menu-wrap">
    <div class="menu-sidebar">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li class="menu-item-has-children"><a href="#">Click The Arrow</a>
                <span class="sidebar-menu-arrow"></span>
                <ul class="sub-menu">
                    <li><a href="#">Alignment</a></li>
                    <li><a href="#">Markup</a></li>
                    <li><a href="#">Comments</a></li>
                </ul>
            </li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Get In Touch</a></li>
        </ul>           
    </div>
</div>

Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс .menu-wrap. Посмотрите на его стили:

.menu-wrap {
    background-color: #6968AB;
    position: fixed;
    top: 0;
    height: 100%;
    width: 280px;
    margin-left: -280px;
    font-size: 1em;
    font-weight: 700;
    overflow: auto;
    transition: .25s;
    z-index: 10;
}

Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:

$(document).ready(function() {
    var $toggleButton = $('.toggle-button'),
        $menuWrap = $('.menu-wrap');
    $toggleButton.on('click', function() {
        $(this).toggleClass('button-open');
        $menuWrap.toggleClass('menu-show');
    });
});

Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса .menu-show равно 0, это добавит эффект тени.

.menu-show {
    margin-left: 0;
    box-shadow: 4px 2px 15px 1px #B9ADAD;
}

Подменю и ссылки

Вы можете заметить, что в одном из элементов списка есть класс .menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом .sidebar-menu-arrow.

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
    <ul class="sub-menu">
    <!-- List items -->
    </ul>
</li>

span имеет ::after pseudo-element  и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:

$(document).ready(function() {
    var $sidebarArrow = $('.sidebar-menu-arrow');
    $sidebarArrow.click(function() {
        $(this).next().slideToggle(300);
    });
});

Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь  нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем  - slideToggle. Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр - длительность анимации.

Элементы меню в примере имеют hover-эффект. Он создается с использованием ::after pseudo-element. Код выглядит так:

.menu-sidebar li > a::after {
    content: "";
    display: block;
    height: 0.15em;
    position: absolute;
    top: 100%;
    width: 102%;
    left: 50%;
    transform: translate(-50%);
    background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
    transition: background-position .2s .1s ease-out;
    background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
    background-position: -100% 0;
}

::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.

.menu-sidebar li > a::after {
  background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

Половина лини здесь прозрачная, а вторая половина - желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная - скрыта.

https://s.codepen.io/matthewca...

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

Демо | Скачать

Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!