Лого SiteHere.ru

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

Круговая навигация с помощью 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

9 комментариев к записи
  • Андрей Николаевич

    Здравствуйте, Юрий.

    Мне, как и вам, тоже нравятся эти меню — потрясающие.

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

    Проблема такая: скачал код, к ссылкам подвесил тестовые страницы, при клике на любую ссылку вызывается страница, подвешенная к последней ссылке (и в первом, и во втором примере).

    Подскажите, каким образом обеспечить работоспособность меню?

    С уважением,

     

     
    • Юрий Немец

      Добрый день, Андрей!

      Вы сделали это прямо на демо-примере из статьи?

       
      • Андрей Николаевич

        Здравствуйте, Юрий.

        Да, я сделал это на демо-примере: скачал, разархивировал, в индексных страницах к ссылкам меню подвесил тестовые страницы, в результате при клике на ссылку в демо-1 выбрасывает на 5-ю страницу, в демо-2 на 7-ю, то есть открывается страница, подвешенная к последней ссылке.

        PS. Извиняюсь за запоздалый ответ: только сейчас увидел, что вы уже откликнулись на мой комментарий. А вопрос "как сделать эти меню работоспособными" мне действительно интересен.

         
        • Юрий Немец

          Можно сделать с помощью jQuery. Обрабатывать клик по элементу в меню и переадресовывать на соответствующую страницу.

          Например так:

          $( "#element" ).click(function() {
            window.location.href = "https://sitehere.ru";
          });

          Где:

          #element — идентификатор (ID) элемента меню, на который кликнули.

           
      • Андрей Николаевич

        Да.

         
  • Андрей Николаевич

    … сделал, как вы подсказали, всё работает, спасибо…

     
  • Александр

    Добрый день. Очень понравилось меню номер 2 . Все сделал как написано выше.
    Меню на сайте отображается анимация работает вот только при наведении мыши не подсвечиваются пункты меню и при нажатии не чего не происходит хотя ссылки в коде я вписал . Подскажите пожалуйста что я делаю не так. PS не судите строго мне 9 лет и я только учусь)))) За ранее спасибо!

     
    • Юрий Немец

      Здравствуйте, Александр!

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

       
      • Александр

        все сделал .. работает почему то только на мозиле. на хроме на яндекс браузере не работает.  ну очень хочется такую менюшку)) 

         

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

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