Exore LTD » jQuery » Меню для сайта в стиле Google Nexus
Лого SiteHere.ru

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

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

Меню для сайта в стиле Google Nexus

Меню для сайта в стиле Google Nexus

Сегодня мы рассмотрим как создать меню как в Google Nexus 7. Меню будет появляться слева при наведении на переключатель. Изначально будут видны лишь иконки пунктов меню, но при наведении на любой из пунктов будет появляться текстовая часть каждого элемента меню. Для создания данного меню будет использован неупорядоченный список, вложенный список, а также некоторые CSS переходы. А также чтобы меню правильно смотрелось на маленьких экранах зададим специальные свойства media-queries.

Смотрите также урок о том как создать адаптивное меню — Адаптивное меню для сайта.

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

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



HTML часть

Меню будет состоять из двух частей: первая это верхняя часть, которая в шапке, и вторая — боковое меню:

1
2
3
4
5
6
7
8
9
10
11

<ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
            ...
        </nav>
    </li>
    <li><a href="https://sitehere.ru" target="_blank">SiteHere.RU</a></li>
    <li> ... </li>
    ...
</ul>

Внутри элемента <nav> находится ненумерованный список:

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 class="gn-menu-wrapper">
    <div class="gn-scroller">
        <ul class="gn-menu">
            <li class="gn-search-item">
                <input placeholder="Поиск..." type="search" class="gn-search">
                <a class="gn-icon gn-icon-search"><span>Поиск</span></a>
            </li>
            <li>
                <a class="gn-icon gn-icon-download">Загрузки</a>
                <ul class="gn-submenu">
                    <li><a class="gn-icon gn-icon-illustrator">Векторная графика</a></li>
                    <li><a class="gn-icon gn-icon-photoshop">Photoshop файлы</a></li>
                </ul>
            </li>
            <li><a class="gn-icon gn-icon-cog">Настройки</a></li>
            <li><a class="gn-icon gn-icon-help">Помощь</a></li>
            <li>
                <a class="gn-icon gn-icon-archive">Архивы</a>
                <ul class="gn-submenu">
                    <li><a class="gn-icon gn-icon-article">Статьи</a></li>
                    <li><a class="gn-icon gn-icon-pictures">Изображения</a></li>
                    <li><a class="gn-icon gn-icon-videos">Видео</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>


CSS часть

Сначала зададим свойства всем спискам(а также вложенным):

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

.gn-menu-main,
.gn-menu-main ul {
    margin: 0;
    padding: 0;
    background: white;
    color: #5f6f81;
    list-style: none;
    text-transform: none;
    font-weight: 300;
    font-family: 'Lato', Arial, sans-serif;
    line-height: 60px;
}

Теперь определим свойства только для главного списка:

1
2
3
4
5
6
7
8

.gn-menu-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    font-size: 13px;
}

Стиль ссылок в меню:

1
2
3
4
5
6
7

.gn-menu-main a {
    display: block;
    height: 100%;
    color: #5f6f81;
    text-decoration: none;
    cursor: pointer;
}

При наведении ссылки и поля ввода изменяют свой цвет:

1
2
3
4
5
6

.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
    background: #5f6f81;
    color: white;
}

Первый элемент меню это будет переключатель для показа/скрытия меню:

1
2
3
4
5

.gn-menu-main li.gn-trigger {
    position: relative;
    width: 60px;
    user-select: none;
}

Последний элемент списка будет иметь обтекание справа:

1
2
3
4
5

.gn-menu-main > li:last-child {
    float: right;
    border-right: none;
    border-left: 1px solid #c6d0da;
}

Изначально меню скрыто и показывается при наведении на переключатель:

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

.gn-menu-wrapper {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 60px;
    border-top: 1px solid #c6d0da;
    background: white;
    transform: translateX(-60px);
    transition: transform 0.3s, width 0.3s;
}
 
.gn-scroller {
    position: absolute;
    overflow-y: scroll;
    width: 370px;
    height: 100%;
}
 
.gn-menu {
    border-bottom: 1px solid #c6d0da;
    text-align: left;
    font-size: 18px;
}

Чтобы разделить визуально элементы меню зададим тень:

1
2
3
4

.gn-menu li:not(:first-child),
.gn-menu li li {
    box-shadow: inset 0 1px #c6d0da
}

Как вы заметили элемент «Поиск» имеет отличительные свойства:

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

input.gn-search {
    position: relative;
    z-index: 10;
    padding-left: 60px;
    outline: none;
    border: none;
    background: transparent;
    color: #5f6f81;
    font-weight: 300;
    font-family: Arial, sans-serif;
    cursor: pointer;
}
 
.gn-search::-webkit-input-placeholder {
    color: #5f6f81
}
 
.gn-search:-moz-placeholder {
    color: #5f6f81
}
 
.gn-search::-moz-placeholder {
    color: #5f6f81
}
 
.gn-search:-ms-input-placeholder {
    color: #5f6f81
}

И затем пропишем свойства для атрибута placeholder:

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

.gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder {
    color: transparent
}
 
input.gn-search:focus {
    cursor: text
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder {
    color: white
}
 
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
    color: white
}


Javascript часть

С помощью Javascript сделаем так, чтобы при наведении на переключатель сначала появлялись лишь иконки, а уже потом при наведении на иконки появлялась текстовая часть элементов меню. А также при повторном клике на переключателе меню должно скрываться. Весь функционал реализован и размещен в файле gnmenu.js, а вам лишь остается подключить данный файл к странице и прописать следующие строки:

1
2
3

<script>
    new gnMenu( document.getElementById( 'gn-menu' ) );
</script>


Вывод

Красивое выезжающее меню в стиле Flat. Также рекомендую посмотреть данное меню — Создание выдвигающегося меню.


Успехов!

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

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

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

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

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

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