Создание вытягиваемого бокового меню для веб-сайта

28 февраля 2014 | Опубликовано в css | 33 Комментариев »

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

Демонстрация работы – Скачать исходный код

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

1. Структура

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 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. Создание простого бокового меню

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <h1>Creating Swipeable Side Menu For the Web</h1>
            <p>"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."</p>
        </div>
    </div>
    </div>
</div>

CSS:

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

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
});

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

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

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

Демонстрация работы

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

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="swipe-area"></div>
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <h1>Creating Swipeable Side Menu For the Web</h1>
            <p>"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."</p>
        </div>
    </div>
</div>

CSS:

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

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });

});
$(".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. И это предотвращает запуск инструмента по выделению текста по умолчанию.

Демонстрация работы – Скачать исходный код

Заключение

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

Автор урока Pete R.

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

Смотрите также:

Опубликовано в css, февраля 28, 2014
Метки: css, верстка, меню css, меню jquery, меню навигации, созданию навигационного меню на CSS, урок css, урок верстка

�

Владимир
15 марта 2014 в 8:40
+4

Здравствуйте. Очень пригодилось, спасибо.
Но есть два важных вопроса:
1. Как сделать, чтобы в адресной строке браузера, после нажатия кнопки открытия, НЕ появлялась «решетка», прописанная в #sidebar-toggle?
2. Как сделать, чтобы данный вид меню появлялся только при определенном разрешении (например, на мобильных устройствах), а на десктопе было обычное горизонтальное меню?

Alex Ermakov Ответ:
сентября 15, 2014 at 2:21 пп

0

А по поводу появления на определенных экранах режьте sidebar с помощью media query для нужных разрешений, к примеру
@media screen and (max-width: 980px) {
селектор{
display:none;
}
}

Леонид Ответ:
августа 4, 2016 at 7:09 дп

0

Чтобы не выводилась решетка в адресную строку, для #sidebar-toggle в функции-обработчике можно использовать метод preventDefault ()
виктор
16 марта 2014 в 0:16
0

Вытягивание не работает в windows 8 в режиме метро (ie11)
Alex Ermakov
15 сентября 2014 в 14:17
0

Владимир, решетка появляется из-за того, что наша «иконка гамбургер» упакована в тег a, попробуйте сменить его на другой элемент и все будет работать
Олег
21 ноября 2014 в 12:36
+2

Классное меню! Подскажите пожалуйста, как модифицировать код, чтобы меню выезжало не кликом по верхнему блоку а просто путем наведение мышки на всю область меню, по разному менял селекторы, не получается желаемый эффект.
Сергей
23 ноября 2014 в 2:19
0

очень круто!)

спасибо автору!)
еже такой вопрос, можно ли (если можно, то как =)) сделать такие меню с двух сторон?
cyx
31 января 2015 в 20:26
+1

Подскажите пожалуйста, как ее зафиксировать?
Neo
3 февраля 2015 в 18:21
0

Здравствуйте. хотел сказать вам спасибо.
Вадим
7 февраля 2015 в 19:21
+2

Здравствуйте! Очень понравилось меню, однако при количестве текста, большем чем по высоте экрана, полоса прокрутки не отображается в браузере на ПК, Как это можно исправить?
Вадим
7 февраля 2015 в 21:40
0

Разобрался Но появился другой вопрос — как сделать, чтобы при прокрутке страницы вниз «иконка гамбургера» оставалась видимой?

Alex Ответ:
февраля 27, 2015 at 3:31 дп

+1

position:fixed;

Вадим Ответ:
февраля 27, 2015 at 10:37 дп

+1

Спасибо за ответ! Прошу прощения, я неправильно выразил свою мысль — я имел ввиду, чтобы оставалась видимой не только «иконка гамбургера», а и весь блок с меню... А так иконка остается, а само меню «выезжает» где-то вверхах Хотелось бы, чтобы весь блок был как-бы «приклеен» к левому краю, не зависимо от прокрутки страницы... Я только учусь, поэтому прошу прощения, если мои вопросы Вам покажутся несколько глупыми =)

PaRtiZzaN Ответ:
июня 9, 2015 at 7:49 пп

+1

Скажите как сделать чтобы когда страница длинная крутилось вниз а то не скроллится...
Дмитрий
1 апреля 2015 в 22:47
+2

Добрый день. Данное меню будет использовано в одном из моих следующих проектов, но необходимо изменить вот что: чтобы меню не сдвигало содержимое правого блока, а ложилось поверх него. Подскажите, как реализовать данную необходимость? Спасибо.
Анатолий
19 мая 2015 в 16:24
0

Вопрос установил это меню но перестал прокручиватся сам контент, подскажете что делать?

Paha Ответ:
сентября 3, 2015 at 5:17 пп

-7

Комментарий скрыт из-за рейтинга
Урок именно из за этого бага считаю лажой. Так как при тамком роскладе не прокручивается контент :-D :-D

DIMAN Ответ:
января 21, 2016 at 6:46 дп

+3

Прошу прощения, но убрать у body overflow никак не думали? Или сначала нужно обос*ать чужой труд, прежде чем головой подумать?
Александр
13 августа 2015 в 23:42
0

А возможно ли сделать так, чтобы меню выдвигалось справа и как?

Paha Ответ:
сентября 3, 2015 at 5:17 пп

-3

Комментарий скрыт из-за рейтинга
все left поменять на right, но почитайте выше, если вас устроит что контент не прокручивается))
Dikkiy
7 ноября 2015 в 1:12
0

Подскажите пожалуйста
Я немного тут переделал allmt.ru
Все скроллится с мобильного, но
контент скроллится только двумя пальцвми :(
Андрей
30 ноября 2015 в 19:15
0

а если меню не выезжает при нажатии? Это в чем проблема подскажите пожалуйста?
Максим
31 января 2016 в 15:08
-2

что нужно сделатьчтоби била возиожна прокрутка сайта
сергей
10 июля 2016 в 21:58
0

Здравствуйте. Подскажите пожалуйста. Как сделать, чтобы контент(текст) оставался на месте не смещался, меню выползало поверх, и кнопка меню чтобы оставалась всегда на одном месте даже при открытом меню.
Андрей
5 октября 2016 в 17:46
+1

Фуфло На сайте работает на мобильном на тач скрин вообще при проведении пальцем по экрану не реагирует никак.
4EPEII
29 ноября 2016 в 10:27
0

Спасибо большое, статья очень помогла =)
FLexus
23 июня 2017 в 12:19
0

Здравствуйте! Все сделал по инструкции, я делетант в этом деле, все получилось, но при нажатии на иконку меню все время выкидывает на главную страницу, как это исправить подскажите?