X
Юрий Немец

Адаптивное меню для сайта

Все стремятся создать сайт что он правильно смотрелся на разных экранах(от маленьких разрешений 320х480 до 1920х1900, хотя они могут быть меньше и больше как в одну так и в другую сторону). И в этом уроке мы рассмотрим как создать адаптивное меню, которое будет правильно смотреться на разных устройствах. А это очень важно для пользователя, который просматривает ваш сайт с мобильного устройства.

Урок о том как создать адаптивный шаблон можно находится здесь — Как создать адаптируемый шаблон.

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

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



HTML часть

Подключите обязательно последнюю jQuery библиотеку(она доступна здесь). Структура следующая:

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

<nav  id="menu" class="nav"> 
    <ul>
        <li>
            <a  href="#" title="">
                <span  class="icon"> <i aria-hidden="true"  class="icon-home"></i></span><span>Главная</span>
            </a>
        </li>
        <li>     
            <a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"></i></span><span>Сервисы</span></a>  
        </li>
        <li>
            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-portfolio"></i></span><span>Портфолио</span></a>
        </li>
        <li>
            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-blog"></i></span><span>Блог</span></a>
        </li>
        <li>
            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-team"></i></span><span>Команда</span></a>   
        </li>
        <li>
            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-contact"></i></span><span>Контакты</span></a>
        </li>
    </ul>
</nav>

Чтобы использовать значок мы задаем специальные классы icon-name. Также чтобы использовать библиотеку Modernizr.js мы добавили к тегу <body> класс no-js, что позволяет показывать меню если Javascript отключен в браузере пользователя.



Javascript&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

.nav ul {
    max-width: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.5em;
    font-weight: 300;
}
 
.nav li span {
    display: block;
}
 
.nav a {
    display: block;
    color: rgba(249, 249, 249, .9);
    text-decoration: none;
    transition: color .5s, background .5s, height .5s;
}
 
.nav i{
    transform: translate3d(0, 0, 0);
}
 
a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Также при наведении все элементы меню затемняются:

1
2
3
4
5
6
7

.no-touch .nav ul:hover a {
    color: rgba(249, 249, 249, .5);
}
 
.no-touch .nav ul:hover a:hover {
    color: rgba(249, 249, 249, 0.99);
}

Каждый элемент меню имеет свой цвет:

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

.nav li:nth-child(6n+1) {
    background: rgb(208, 101, 3);
}
 
.nav li:nth-child(6n+2) {
    background: rgb(233, 147, 26);
}
 
.nav li:nth-child(6n+3) {
    background: rgb(22, 145, 190);
}
 
.nav li:nth-child(6n+4) {
    background: rgb(22, 107, 162);
}
 
.nav li:nth-child(6n+5) {
    background: rgb(27, 54, 71);
}
 
.nav li:nth-child(6n+6) {
    background: rgb(21, 40, 54);
}

При наведении элемент меню становится больше по вертикали, но увеличивается оно плавно:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.nav a {
    height: 9em;
}
 
.no-touch .nav a:hover ,
.no-touch .nav a:active ,
.no-touch .nav a:focus {
    height: 10em;
}  
 
.no-touch .nav a:hover .icon + span {
    margin-top: 3.2em;
    transition: margin .5s;
}

Для экранов от 520px до 799px также заданы другие значения свойств. А также для экранов меньше 520px свойства отличаются и задаются отдельно. Я не выкладываю весь код, потому что он немаленький, но вы можете скачать пример и увидеть как всё сделано.

Для очень маленьких экранов меню «прячется» и видна лишь кнопка(или переключатель) с помощью которого можно скрыть/раскрыть меню. Для этого в 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

var changeClass = function (r,className1,className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if( regex.test(r.className) ) {
        r.className = r.className.replace(regex,' '+className2+' ');
    }
    else{
        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
}; 
 
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');
 
document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
}
 
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
 
    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}


Вывод

Вот как данное меню адаптируется под разные разрешения экранов:

Ширина экрана 320px:


Ширина экрана 768px:

Успехов!

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

Категории: CSS3