X
Юрий Немец

Круговая навигация с помощью CSS преобразований

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

Другие варианты появляющегося меню в стиле Flat — Анимированное выдвигающееся меню.

Реальный пример можно увидеть здесь:

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

В уроке мы будем рассматривать первое демо из примера.



HTML часть

Навигация будет находится как и обычно, в ненумерованном списке. Кнопка для запуска меню и закрытия:

1
2
3
4
5
6
7
8
9
10
11

<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
   <ul>
       <li><a href="#"><span class="icon-picture"></span></a></li>
       <li><a href="#"><span class="icon-headphones"></span></a></li>
       <li><a href="#"><span class="icon-home"></span></a></li>
       <li><a href="#"><span class="icon-facetime-video"></span></a></li>
       <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
   </ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>

Источник иконок — здесь.



CSS часть

Мы используем библиотеку Modernizr.js для проверки поддержки CSS3 функций браузером.

Начнем преображение нашей страницы. Сперва зададим стили для навигации. Она будет зафиксирована внизу по центру, то есть при прокрутке страницы будет оставаться на одном и том же месте всегда:

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

.csstransforms .cn-wrapper {
    font-size:1em;
    width: 26em;
    height: 26em;
    overflow: hidden;
    position: fixed;
    z-index: 10;
    bottom: -13em;
    left: 50%;
    border-radius: 50%;
    margin-left: -13em;
    transform: scale(0.1);
    transition: all .3s ease;
}
 
.csstransforms .opened-nav {
    border-radius: 50%;
    transform: scale(1);
}

Задаем стили для переключателя:

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

.cn-button {
    border:none;
    background:none;
    color: white;
    text-align: Center;
    font-size: 1.5em;
    padding-bottom: 1em;
    height: 3.5em;
    width: 3.5em;
    background-color: #111;
    position: fixed;
    left: 50%;
    margin-left: -1.75em;
    bottom: -1.75em;
    border-radius: 50%;
    cursor: pointer;
    z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
    background-color: #222;
}

Когда меню запущено, тогда оно должно перекрывать всю страницу сайта, поэтому необходимо задать для этого следующие свойства:

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

.cn-overlay{
    width:100%
    height:100%;
    background-color: rgba(0,0,0,0.6);
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:0;
    transition: all .3s ease;
    z-index:2;
    pointer-events:none;
}
 
.cn-overlay.on-overlay{
    pointer-events:auto;
    opacity:1;
}

Задаем стиль для элементов меню:

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

.csstransforms .cn-wrapper li {
    position: absolute;
    font-size: 1.5em;
    width: 10em;
    height: 10em;
    transform-origin: 100% 100%;
    overflow: hidden;
    left: 50%;
    top: 50%;
    margin-top: -1.3em;
    margin-left: -10em;
    transition: border .3s ease;
}
 
.csstransforms .cn-wrapper li a {
    display: block;
    font-size: 1.18em;
    height: 14.5em;
    width: 14.5em;
    position: absolute;
    position: fixed;
    bottom: -7.25em;
    right: -7.25em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    padding-top: 1.8em;
    text-align: center;
    transform: skew(-50deg) rotate(-70deg) scale(1);
    transition: opacity 0.3s, color 0.3s;
}
 
.csstransforms .cn-wrapper li a span {
    font-size: 1.1em;
    opacity: 0.7;
}
 
.csstransforms .cn-wrapper li:first-child {
    transform: rotate(-10deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(2) {
    transform: rotate(30deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(3) {
    transform: rotate(70deg) skew(50deg)
}
 
.csstransforms .cn-wrapper li:nth-child(4) {
    transform: rotate(110deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(5) {
    transform: rotate(150deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(odd) a {
    background-color: #a11313;
    background-color: hsla(0, 88%, 63%, 1);
}
 
.csstransforms .cn-wrapper li:nth-child(even) a {
    background-color: #a61414;
    background-color: hsla(0, 88%, 65%, 1);
}
 
/* стиль при нажатии */
.csstransforms .cn-wrapper li.active a {
    background-color: #b31515;
    background-color: hsla(0, 88%, 70%, 1);
}
 
/* стиль при наведении */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
    background-color: #b31515;
    background-color: hsla(0, 88%, 70%, 1);
}

А также пропишем некоторые свойства для браузеров, которые не поддерживают CSS3 преобразования:

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

.no-csstransforms .cn-wrapper{
    font-size:1em;
    height:5em;
    width:25.15em;
    bottom:0;
    margin-left: -12.5em;
    overflow: hidden;
    position: fixed;
    z-index: 10;
    left:50%;
    border:1px solid #ddd;
}
 
.no-csstransforms .cn-button{
    display:none;
}
 
.no-csstransforms .cn-wrapper li{
    position:static;
    float:left;
    font-size:1em;
    height:5em;
    width:5em;
    background-color: #eee;
    text-align:center;
    line-height:5em;
}
 
.no-csstransforms .cn-wrapper li a{
    display:block;
    width:100%;
    height:100%;
    text-decoration:none;
    color:inherit;
    font-size:1.3em;
    border-right: 1px solid #ddd;
}
 
.no-csstransforms .cn-wrapper li a:last-child{
    border:none;
}
 
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus{
    background-color: white;
}
 
.no-csstransforms .cn-wrapper li.active a {
    background-color: #6F325C;
    color: #fff;
}

Чтобы меню было адаптивным и правильно смотрелось на маленьким экранах зададим следующие свойства:

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

@media screen and (max-width:480px){
  .csstransforms .cn-wrapper{
    font-size:.68em;
  }
  .cn-button{
    font-size:1em;
  }
  .csstransforms .cn-wrapper li {
    font-size:1.52em;
  }
}
 
@media screen and (max-width:320px) {
    .no-csstransforms .cn-wrapper {
      width:15.15px;
      margin-left: -7.5em;
    }
    .no-csstransforms .cn-wrapper li {
      height:3em;
      width:3em;
    }
}


Javascript часть

Мы добавим обработчик, который будет определять открытие и закрытие навигации:

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

(function(){
 
    var button = document.getElementById('cn-button'),
      wrapper = document.getElementById('cn-wrapper'),
      overlay = document.getElementById('cn-overlay');
 
    //нажатие по кнопке когда меню открыто или закрыто
    var open = false;
    button.addEventListener('click', handler, false);
    button.addEventListener('focus', handler, false);
    wrapper.addEventListener('click', cnhandle, false);
 
    function cnhandle(e) {
        e.stopPropagation();
    }
 
    function handler(e) {
        if (!e) var e = window.event;
        e.stopPropagation();
 
        if(!open) {
            openNav();
        }
        else{
            closeNav();
        }
    }
    function openNav() {
        open = true;
        button.innerHTML = "-";
        classie.add(overlay, 'on-overlay');
        classie.add(wrapper, 'opened-nav');
    }
    function closeNav() {
        open = false;
        button.innerHTML = "+";
        classie.remove(overlay, 'on-overlay');
        classie.remove(wrapper, 'opened-nav');
    }
    document.addEventListener('click', closeNav);
 
})();


Вывод

На этом всё. Потрясающие меню. Мне они очень нравятся как и те, которые были в прошлой статье. Если они вам нравятся также, применяйте у себя на сайте :).


Успехов!

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

Категории: CSS3