X
Юрий Немец

Создание выдвигающегося меню

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

Пример меню можно увидеть здесь:

Посмотреть примерСкачать



Подключение jQuery

Первым делом подключаем библиотеку. Скачать ее можно — здесь.

1

<script type="text/javascript" src="js/jquery.js"></script>



HTML часть

Сейчас добавим меню в виде списка:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Статьи</a></li>
            <li><a href="#">Видео</a></li>
            <li><a href="#">Выход</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">
            <!-- Произвольный контент -->
        </div>
    </div>
</div>



CSS часть

CSS кода немного, а эффект получается очень красивым:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

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



Javascript часть

И допишем небольшой код на JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript">
    $(window).load(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;
                    }
                }
        }); 
    });
</script>

Итак, вот мы и создали выезжающее меню. Данное меню прилично сэкономит вам место на сайте, при его использовании.

Успехов!

Источник: onextrapixel.com

Категории: jQuery