Меню для сайту в стилі google nexus

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

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

Дивіться також урок про те як створити адаптивне меню - Адаптивне меню для сайту.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Меню буде складатися з двох частин: перша це верхня частина, яка в шапці, і друга - бічне меню:

1234567891011
lt;ul id="Gn-menu" class="Gn-menu-main"gt;lt;li class="Gn-trigger"gt;lt;a class="Gn-icon gn-icon-menu"gt; lt;spangt; Menult;/spangt; lt;/agt;="Gn-menu-wrapper"gt; ...lt;/navgt;lt;/ligt;lt;ligt; lt;a href="Http://sitehere.ru" target="_blank"gt; SiteHere.RUlt;/agt; lt;/ligt;lt;ligt; ... lt;/ligt; ...lt;/ulgt;

усередині елемента

123456789101112131415161718192021222324252627
="Gn-menu-wrapper"gt;lt;div class="Gn-scroller"gt;lt;ul class="Gn-menu"gt;lt;li class="Gn-search-item"gt;lt;input placeholder="Пошук ..." type="Search" class="Gn-search"gt;lt;a class="Gn-icon gn-icon-search"gt; lt;spangt; Пошукlt;/spangt; lt;/agt;lt;/ligt;lt;ligt;lt;a class="Gn-icon gn-icon-download"gt; Завантаженняlt;/agt;lt;ul class="Gn-submenu"gt;lt;ligt; lt;a class="Gn-icon gn-icon-illustrator"gt; Векторна графікаlt;/agt; lt;/ligt;lt;ligt; lt;a class="Gn-icon gn-icon-photoshop"gt; Photoshop файлиlt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt; lt;a class="Gn-icon gn-icon-cog"gt; Налаштуванняlt;/agt; lt;/ligt;lt;ligt; lt;a class="Gn-icon gn-icon-help"gt; Допомогаlt;/agt; lt;/ligt;lt;ligt;lt;a class="Gn-icon gn-icon-archive"gt; Архівиlt;/agt;lt;ul class="Gn-submenu"gt;lt;ligt; lt;a class="Gn-icon gn-icon-article"gt; Статтіlt;/agt; lt;/ligt;lt;ligt; lt;a class="Gn-icon gn-icon-pictures"gt; Зображенняlt;/agt; lt;/ligt;lt;ligt; lt;a class="Gn-icon gn-icon-videos"gt; Відеоlt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt;lt;/divgt;lt;/navgt;

CSS частина

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

123456789101112
.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-}

Тепер визначимо властивості тільки для головного списку:

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


Стиль посилань в меню:

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

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

123456
.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-}

Перший елемент меню це буде перемикач для показу / приховування меню:

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

Останній елемент списку буде мати обтікання справа:

Відео: Огляд Samsung Galaxy Nexus (I9250) від Video-shoper.ru

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

Спочатку меню приховано і показується при наведенні на перемикач:

Відео: Збільшуємо гучність динаміка і навушників Nexus 5 | Nexusx.ru

12345678910111213141516171819202122232425
.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-}

Щоб розділити візуально елементи меню задамо тінь:

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

Як ви помітили елемент «Пошук» має відмінні властивості:

12345678910111213141516171819202122232425262728
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:

123456789101112131415161718192021222324
.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, а вам лише залишається підключити даний файл на сторінку та прописати наступні рядки:

123
lt;scriptgt; new gnMenu (document.getElementById ( `gn-menu ")) -lt;/scriptgt;

висновок

Красиве виїжджає меню в стилі Flat. Також рекомендую подивитися дане меню - Створення висувається меню.

Успіхів!

джерело: tympanus.net

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!