Главная > Операторы связи > Боковое мобильное меню. Фиксированное боковое меню на чистом CSS

Боковое мобильное меню. Фиксированное боковое меню на чистом CSS

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

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

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

Animation Menu Demo

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

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

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

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

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 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:

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

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

  • Home
  • About
  • Blog
  • Click The Arrow
    • Alignment
    • Markup
    • Comments
  • Courses
  • Get In Touch

Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это 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.

  • Click The Arrow

    • 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%. Теперь желтая часть становится видимой, а прозрачная - скрыта.

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

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

    Продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана HTML -разметка, стилизованы все селекторы, теперь осталось добавить JS динамику.

    Обращаемся к библиотеке jQuery

    $(".menu-icon").on("click", function(e) {

    которая найдёт выезжающее меню с классом menu и применит метод toggleClass к меню. Метод toggleClass присваивает и удаляет классы у элемента.

    $(".menu").toggleClass("menu_active");

    При клике по иконке-бургеру слева выезжает меню . Теперь надо сделать так, чтобы контент отодвигался, уступая место меню. Для этого создадим новый класс section_active , который при событии будет двигать секцию с контентом на 25% вправо, как и меню.

    Section_active {
    transform: translateX(25%);
    }

    Добавим к селектору section плавность - transition в полсекунды. Чтобы секция не перекрывала собой иконку, то зададим ей позицию - relative , секция должна быть на нижнем слое - z-index: 0 .

    Section {
    transition: 0.5s;
    position: relative;
    z-index: 0;
    }

    Вытащим меню поверх секции

    Menu {
    z-index: 1;
    }

    Вернемся к jQuery , который найдет элемент section , присвоим ему класс section_active .

    $("section").toggleClass("section_active");
    })

    Итак, мы получили полностью адаптивное меню, которое хорошо работает на всех разрешениях экрана.

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

    Menu {
    left: 75%; /* вместо 0 */
    transform: translateX(100%); /* вместо -100% */
    }
    и одно значение у секции при клике

    Section_active {
    transform: translateX(-25%); /* вместо 25% */

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

    Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.

    1. Структура

    Body, html { height : 100 % 100 % ; width : 100 % ; } #sidebar { position : absolute ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; }

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

    2. Создание простого бокового меню

    Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } #sidebar { position : absolute ; left : -240px ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % 100 % 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }

    ;

    Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.

    После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.

    Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.

    3. Делаем меню вытягиваемым

    Creating Swipeable Side Menu For the Web

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } .swipe-area { position : absolute ; width : 50px ; left : 0 ; top : 0 ; height : 100 % ; background : #f3f3f3 ; z-index : 0 ; } #sidebar { background : #DF314D ; position : absolute ; width : 240px ; height : 100 % ; left : -240px ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % ; padding : 10px ; box-sizing: border-box; -moz-box-sizing: border-box; position : relative ; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; padding-left : 60px ; width : 100 % ; } .main-content .content h1{ font-weight : 100 ; } .main-content .content p{ width : 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }

    ; $(".swipe-area" ) .swipe ({ swipeStatus:function (event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right" ) { $(".container" ) .addClass ("open-sidebar" ) ; return false ; } if (phase=="move" && direction =="left" ) { $(".container" ) .removeClass ("open-sidebar" ) ; return false ; } } } ) ;

    Самая сложная часть этого урока - сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe , созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.

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

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

    В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.

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

    Заключение

    И это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.

    Перевод — Дежурка

    В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .

    Шаг 1. Подключаем шрифт с иконками, создаем пустой документ

    Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .

    Вот код странички с подключенными файлами:

    Фиксированное боковое меню

    Шаг 2. Добавляем HTML разметку фиксированного меню

    Вот и сам код разметки нашего фиксированного меню:

    Как вы заметили я применил тег – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный или вовсе его убрать, а идентификатор перенести к списку, вот так:


    Похожие статьи

    Mac не видит внешний жесткий диск Imac не видит внешний жесткий диск

    Mac не видит внешний жесткий диск Imac не видит внешний жесткий диск

    Что делать, если PUBG mobile не поддерживается на вашем устройстве — ТРИ способа лечения Gopro app не поддерживается на вашем устройстве

    Что делать, если PUBG mobile не поддерживается на вашем устройстве — ТРИ способа лечения Gopro app не поддерживается на вашем устройстве

    Аппаратная платформа и производительность

    Аппаратная платформа и производительность

    ×
    Close