Просте меню в стилі youtube

Існує величезна безліч різних меню: горизонтальних, вертикальних і кругових, що висуваються, що з`являються і тих, які видно відразу при завантаженні на сайті. Кожен вибирає для свого сайту то, яке більше подобається і підходить по дизайну. Я також опублікував вже чимало уроків про те як створити ту чи іншу меню. Вибір робити звичайно вам. А в цьому уроці ми створимо меню в стилі Youtube.

Ось уроки (як створити меню) опубліковані ранньому:

Кругова навігація за допомогою CSS перетворень
Анимированное висувається меню
Меню, що випадає на CSS3
CSS3 меню в стилі мінімалізм
Адаптивне меню для сайту
CSS3 навігація з переходами
Меню для сайту в стилі акордеона
Класне меню для сайту на основі спрайтів
Створення висувається меню
Випадає горизонтальне меню з пошуком на CSS3 і HTML5
Цікаве вертикальне меню на CSS3
Красиве горизонтальне меню за допомогою CSS

Приступимо!

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

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

HTML частина

Меню буде повністю знаходиться всередині тега

, а всередині знаходиться перемикач і саме меню в ненумерований списку. Кожен елемент списку містить текстову частину і іконку:

Відео: Створюємо сайт на HTML5 + CSS3 | Урок №4 - Створюємо просте меню для нашого сайту

123456789101112

class="Dr-menu"gt;lt;div class="Dr-trigger"gt; lt;span class="Dr-icon dr-icon-menu"gt; lt;/spangt; lt;a class="Dr-label"gt; Аккаунтlt;/agt; lt;/divgt;lt;ulgt;lt;ligt; lt;a class="Dr-icon dr-icon-user" href="#"gt; Ваше ім`яlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-camera" href="#"gt; Відеоlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-heart» href="#"gt; Вибраніlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-bullhorn" href="#"gt; Абонементиlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-download" href="#"gt; Завантаженняlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-settings" href="#"gt; Налаштуванняlt;/agt; lt;/ligt;lt;ligt; lt;a class="Dr-icon dr-icon-switch" href="#"gt; Вихідlt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

CSS частина

Для початку пропишемо клас, щоб потім ми могли використовувати іконки з файлу:

Відео: Joomla 3 Просте меню (Частина 1)

12345678910

@ Font-face {font-family: `Icomoon`-src:url(`../fonts/icomoon.eot`)-src:url(`../fonts/icomoon.eot?#iefix`) format(`Embedded-opentype`),url(`../fonts/icomoon.woff`) format(`Woff`),url(`../fonts/icomoon.ttf`) format(`Truetype`),url(`../fonts/icomoon.svg#icomoon`) format(`Svg`)-font-weight: normal-font-style: normal-}

тег

має також деякі властивості, такі як розмір тексту, висота рядка, колір і так далі:

1234567891011

.dr-menu {width: 100%-max-width: 400px-min-width: 300px-position: relative-font-size: 1.3em-line-height: 2.5-font-weight: 400-color: #fff-padding-top: 2em-}

Перемикач, який знаходиться всередині тега

має абсолютне позиціонування і z-index 100 щоб меню не перекривало перемикач:

.dr-menu gt; div {cursor: pointer-position: absolute-width: 100%-z-index: 100-}

Іконка перемикача також має абсолютне позиціонування:

123456789

.dr-menu gt; div .dr-icon {top: 0-left: 0-position: absolute-font-size: 150%-line-height: 1.6-padding: 0 10px-transition: all 0.4s ease-}

Після того як ми натиснули на перемикач меню присвоюється властивість dr-menu-open:

.dr-menu.dr-menu-open gt; div .dr-icon {color: # 60a773-left: 100%-transform: translateX(-100%)-}

Для перемикача встановимо іконку з трьох смужок:

12345678

.dr-menu gt; div .dr-icon: after {content: " e008"-position: absolute-font-size: 50%-line-height: 3.25-left: -10%-opacity: 0-}

Елементи списку будуть з`являтися з деякою затримкою:

1234567891011121314151617181920212223

.dr-menu.dr-menu-open ul li: nth-child(2) {transition-delay: 35ms-}.dr-menu.dr-menu-open ul li: nth-child(3) {transition-delay: 70ms-}.dr-menu.dr-menu-open ul li: nth-child(4) {transition-delay: 105ms-}.dr-menu.dr-menu-open ul li: nth-child(5) {transition-delay: 140ms-}.dr-menu.dr-menu-open ul li: nth-child(6) {transition-delay: 175ms-}.dr-menu.dr-menu-open ul li: nth-child(7) {transition-delay: 205ms-}

Відео: Створюємо просте меню Вконтакте

І останнім кроком встановимо іконки для кожного пункту меню:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

.dr-icon: before,.dr-icon: after {position: relative-font-family: `Icomoon`-speak: none-font-style: normal-font-weight: normal-font-variant: normal-text-transform: none--webkit-font-smoothing: antialiased-}.dr-menu ul .dr-icon: before {margin-right: 15px-}.dr-icon-bullhorn: before {content: " e000"-}.dr-icon-camera: before {content: " e002"-}.dr-icon-heart: before {content: " e003"-}.dr-icon-settings: before {content: " e004"-}.dr-icon-switch: before {content: " e005"-}.dr-icon-download: before {content: " e006"-}.dr-icon-user: before {content: " e001"-}.dr-icon-menu: before {content: " e007"-}

javascript частина

Нам треба зробити так, щоб при кліці на перемикач меню присвоювався клас dr-menu-open. Іконка перемикача переміщується вправо, а при повторному натисканні все вертається назад:

Відео: | # 3 | Як зробити просте меню для групи в ВКонтакте ?!

1234567891011121314151617181920212223242526

var YTMenu = (function() {function init() {[].slice.call( document.querySelectorAll( `.dr-menu` ) ).forEach( function( el, i ) {var trigger = el.querySelector( `Div.dr-trigger` ),icon = trigger.querySelector( "Span.dr-icon-menu ` ),open = false-trigger.addEventListener( `Click`, function( event ) {if( !open ) {el.className += `Dr-menu-open`-open = true-}}, false )-icon.addEventListener( `Click`, function( event ) {if( open ) {event.stopPropagation()-open = false-el.className = el.className.replace(/ Bdr-menu-open b /,``)-return false-}}, false )-} )-}init()-})()-