Лого www.SiteHere.ru

Меню для сайта в стиле аккордеона

Меню для сайта в стиле аккордеона

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

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

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

HTML часть

Мы будем использовать HTML5. Каждый элемент меню размещается в блоке <div>, который не имеет идентификатора и класса:

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
<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">Главная</label>
        <article class="ac-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallis 
               diam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aenean 
               non mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, non 
               euismod neque.</p>
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="checkbox" />
        <label for="ac-2">Об авторе</label>
        <article class="ac-medium">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallis 
               diam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aenean 
               non mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, non 
               euismod neque.</p>
        </article>
    </div>
    <div>
        <input id="ac-3" name="accordion-1" type="checkbox" />
        <label for="ac-3">Статьи</label>
        <article class="ac-large">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallis 
               diam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aenean 
               non mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, non 
               euismod neque.</p>
        </article>
    </div>
    <div>
        <input id="ac-4" name="accordion-1" type="checkbox" />
        <label for="ac-4">Контакты</label>
        <article class="ac-large">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallis 
               diam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aenean 
               non mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, non 
               euismod neque.</p>
        </article>
    </div>
</section>

CSS часть

Меню сделано на основе чекбоксов. То есть оно подобно тому как мы выбираем поля с галочками, только здесь мы открываем определенные пункты меню. А в CSS мы можем проверить выбран ли чекбокс с помощью атрибута :checked. Код представлен ниже:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
.ac-container {
    width: 400px;
    margin: 10px auto 30px auto;
    text-align: left;
}
.ac-container label {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover {
    background: #fff;
}
 
.ac-container input:checked + label,
.ac-container input:checked + label:hover {
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}
 
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;	
}
 
.ac-container input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
}
 
.ac-container input {
    display: none;
}
 
.ac-container article {
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
 
.ac-container article p {
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
 
.ac-container input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
 
.ac-container input:checked ~ article.ac-small {
    height: 140px;
}
 
.ac-container input:checked ~ article.ac-medium {
    height: 180px;
}
 
.ac-container input:checked ~ article.ac-large {
    height: 230px;
}

Вывод

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

Успехов!

Источник: tympanus.net

Меню для сайта в стиле аккордеона 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *