Exore LTD » CSS3 » Адаптивное меню для сайта
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

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

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

Все стремятся создать сайт что он правильно смотрелся на разных экранах(от маленьких разрешений 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:
320x480


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

Успехов!

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

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • Александр

    Спасибо за отличный урок, вот бы еще понять как хотя бы примерно как сделать подменю

     
    Ответить
    • Юрий Немец

      Добрый день, Александр!

      Чтобы сделать подменю, необходимо иметь базовые навыки HTML и CSS. Сложно вам что-то посоветовать в решении задачи, потому что только вы представляете как должно выглядеть подменю, какая анимация должна быть у него и как оно должно появляться.

       
      Ответить
  • Антон

    подскажите пж, а как иконки поменять в меню, я что-то сильно туплю

     
    Ответить

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

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