Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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.

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

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




Комментарии

  1. Владимир
    Thumb up Thumb down +4

    Здравствуйте. Очень пригодилось, спасибо.

    Но есть два важных вопроса:

    1. Как сделать, чтобы в адресной строке браузера, после нажатия кнопки открытия, НЕ появлялась «решетка», прописанная в #sidebar-toggle?

    2. Как сделать, чтобы данный вид меню появлялся только при определенном разрешении (например, на мобильных устройствах), а на десктопе было обычное горизонтальное меню?

    Ответить

    Alex Ermakov Ответ:

    Thumb up Thumb down 0

    А по поводу появления на определенных экранах режьте sidebar с помощью media query для нужных разрешений, к примеру

    @media screen and (max-width: 980px) {

    селектор{

    display:none;

    }

    }

    Ответить

    Леонид Ответ:

    Thumb up Thumb down 0

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

    Ответить

  2. виктор
    Thumb up Thumb down 0

    Вытягивание не работает в windows 8 в режиме метро (ie11)

    Ответить

  3. Alex Ermakov
    Thumb up Thumb down 0

    Владимир, решетка появляется из-за того, что наша «иконка гамбургер» упакована в тег a, попробуйте сменить его на другой элемент и все будет работать

    Ответить

  4. Олег
    Thumb up Thumb down +1

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

    Ответить

  5. Сергей
    Thumb up Thumb down 0

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

    спасибо автору!)

    еже такой вопрос, можно ли (если можно, то как =)) сделать такие меню с двух сторон?

    Ответить

  6. cyx
    Thumb up Thumb down +1

    Подскажите пожалуйста, как ее зафиксировать?

    Ответить

  7. Neo
    Thumb up Thumb down 0

    Здравствуйте. хотел сказать вам спасибо.

    Ответить

  8. Вадим
    Thumb up Thumb down +2

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

    Ответить

  9. Вадим
    Thumb up Thumb down 0

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

    Ответить

    Alex Ответ:

    Thumb up Thumb down +1

    position:fixed;

    Ответить

    Вадим Ответ:

    Thumb up Thumb down +1

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

    Ответить

    PaRtiZzaN Ответ:

    Thumb up Thumb down +1

    Скажите как сделать чтобы когда страница длинная крутилось вниз а то не скроллится...

    Ответить

  10. Дмитрий
    Thumb up Thumb down +2

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

    Ответить

  11. Анатолий
    Thumb up Thumb down 0

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

    Ответить

    Paha Ответ:

    Thumb up Thumb down -7

    Комментарий скрыт из-за рейтинга

    Ответить

    DIMAN Ответ:

    Thumb up Thumb down +3

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

    Ответить

  12. Александр
    Thumb up Thumb down 0

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

    Ответить

    Paha Ответ:

    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

  13. Dikkiy
    Thumb up Thumb down 0

    Подскажите пожалуйста

    Я немного тут переделал allmt.ru

    Все скроллится с мобильного, но

    контент скроллится только двумя пальцвми :(

    Ответить

  14. Андрей
    Thumb up Thumb down 0

    а если меню не выезжает при нажатии? Это в чем проблема подскажите пожалуйста?

    Ответить

  15. Максим
    Thumb up Thumb down -2

    что нужно сделатьчтоби била возиожна прокрутка сайта

    Ответить

  16. сергей
    Thumb up Thumb down 0

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

    Ответить

  17. Андрей
    Thumb up Thumb down +1

    Фуфло На сайте работает на мобильном на тач скрин вообще при проведении пальцем по экрану не реагирует никак.

    Ответить

  18. 4EPEII
    Thumb up Thumb down 0

    Спасибо большое, статья очень помогла =)

    Ответить

  19. FLexus
    Thumb up Thumb down 0

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

    Ответить

Оставить ответ


семь + 3 =

Вставить изображение