Кругова навігація за допомогою css перетворень

У цьому уроці ми створимо красиве з`являється меню в стилі Flat. Якщо ви вже читали мої минулі статті, то знаєте що таке стиль Flat. Дане меню не буде займати місце на сторінці і можливо викликано користувачем тільки при необхідності. Вмикач знаходиться внизу сторінки і там зафіксовано при прокручуванні сторінки. При появі меню решта сайту затемнюється.

Інші варіанти з`являється меню в стилі Flat - Анимированное висувається меню.

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

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

В уроці ми будемо розглядати перший демо з прикладу.

HTML частина

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

1234567891011

lt;button class="Cn-button" id="Cn-button"gt; +lt;/buttongt;lt;div class="Cn-wrapper" id="Cn-wrapper"gt;lt;ulgt;lt;ligt; lt;a href="#"gt; lt;span class="Icon-picture"gt; lt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;span class="Icon-headphones"gt; lt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;span class="Icon-home"gt; lt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;span class="Icon-facetime-video"gt; lt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;span class="Icon-envelope-alt"gt; lt;/spangt; lt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;lt;div id="Cn-overlay" class="Cn-overlay"gt; lt;/divgt;

Відео: Навігаційне меню CSS

Джерело іконок - тут.

CSS частина

Ми використовуємо бібліотеку Modernizr.js для перевірки підтримки CSS3 функцій браузером.

Почнемо перетворення нашої сторінки. Спершу задамо стилі для навігації. Вона буде зафіксована внизу по центру, тобто при прокручуванні сторінки буде залишатися на одному і тому ж місці завжди:

+12345678910111213141516171819

.csstransforms .cn-wrapper {font-size:1em-width: 26em-height: 26em-overflow: hidden-position: fixed-z-index: 10-bottom: -13em-left: 50%-border-radius: 50%-margin-left: -13em-transform: scale(0.1)-transition: all .3s ease-}.csstransforms .opened-nav {border-radius: 50%-transform: scale(1)-}

Задаємо стилі для перемикача:

1234567891011121314151617181920212223

.cn-button {border:none-background:none-color: white-text-align: Center-font-size: 1.5em-padding-bottom: 1em-height: 3.5em-width: 3.5em-background-color: # 111-position: fixed-left: 50%-margin-left: -1.75em-bottom: -1.75em-border-radius: 50%-cursor: pointer-z-index: 11}.cn-button: hover,.cn-button: active,.cn-button: focus{background-color: # 222-}

Відео: CSS Tutorials For Beginners

Коли меню запущено, тоді воно повинно перекривати всю сторінку сайту, тому необхідно задати для цього наступні властивості:

+12345678910111213141516171819

.cn-overlay{width:100%height:100%-background-color: rgba(0,0,0,0.6)-position:fixed-top:0-left:0-bottom:0-right:0-opacity:0-transition: all .3s ease-z-index:2-pointer-events:none-}.cn-overlay.on-overlay{pointer-events:auto-opacity:1-}

Задаємо стиль для елементів меню:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980

.csstransforms .cn-wrapper li {position: absolute-font-size: 1.5em-width: 10em-height: 10em-transform-origin: 100% 100%-overflow: hidden-left: 50%-top: 50%-margin-top: -1.3em-margin-left: -10em-transition: border .3s ease-}.csstransforms .cn-wrapper li a {display: block-font-size: 1.18em-height: 14.5em-width: 14.5em-position: absolute-position: fixed-bottom: -7.25em-right: -7.25em-border-radius: 50%-text-decoration: none-color: #fff-padding-top: 1.8em-text-align: center-transform: skew(-50deg) rotate(-70deg) scale(1)-transition: opacity 0.3s, color 0.3s-}.csstransforms .cn-wrapper li a span {font-size: 1.1em-opacity: 0.7-}.csstransforms .cn-wrapper li: First-child {transform: rotate(-10deg) skew(50deg)-}.csstransforms .cn-wrapper li: nth-child(2) {transform: rotate(30deg) skew(50deg)-}.csstransforms .cn-wrapper li: nth-child(3) {transform: rotate(70deg) skew(50deg)}.csstransforms .cn-wrapper li: nth-child(4) {transform: rotate(110deg) skew(50deg)-}.csstransforms .cn-wrapper li: nth-child(5) {transform: rotate(150deg) skew(50deg)-}.csstransforms .cn-wrapper li: nth-child(odd) a {background-color: # a11313-background-color: hsla(0, 88%, 63%, 1)-}.csstransforms .cn-wrapper li: nth-child(even) a {background-color: # a61414-background-color: hsla(0, 88%, 65%, 1)-}/ * Стиль при натисканні * /.csstransforms .cn-wrapper li.active a {background-color: # b31515-background-color: hsla(0, 88%, 70%, 1)-}/ * Стиль при наведенні * /.csstransforms .cn-wrapper li:not(.active) a: hover,.csstransforms .cn-wrapper li:not(.active) a: active,.csstransforms .cn-wrapper li:not(.active) a: focus {background-color: # b31515-background-color: hsla(0, 88%, 70%, 1)-}

А також пропишемо деякі властивості для браузерів, які не підтримують CSS3 перетворення:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

.no-csstransforms .cn-wrapper{font-size:1em-height:5em-width:25.15em-bottom:0-margin-left: -12.5em-overflow: hidden-position: fixed-z-index: 10-left:50%-border:1px solid #ddd-}.no-csstransforms .cn-button{display:none-}.no-csstransforms .cn-wrapper li{position:static-float:left-font-size:1em-height:5em-width:5em-background-color: #eee-text-align:center-line-height:5em-}.no-csstransforms .cn-wrapper li a{display:block-width:100%-height:100%-text-decoration:none-color:inherit-font-size:1.3em-border-right: 1px solid #ddd-}.no-csstransforms .cn-wrapper li a: Last-child{border:none-}.no-csstransforms .cn-wrapper li a: hover,.no-csstransforms .cn-wrapper li a: active,.no-csstransforms .cn-wrapper li a: focus{background-color: white-}.no-csstransforms .cn-wrapper li.active a {background-color: # 6F325C-color: #fff-}

Щоб меню було адаптивним і правильно виглядало на маленьким екранах задамо наступні властивості:

Відео: CSS Tips & Tricks # 3 - CSS-only Tooltip

12345678910111213141516171819202122

@media screen and (max-width: 480px) {.csstransforms .cn-wrapper{font-size:.68em-}.cn-button{font-size:1em-}.csstransforms .cn-wrapper li {font-size:1.52em-}}@media screen and (max-width: 320px) {.no-csstransforms .cn-wrapper {width:15.15px-margin-left: -7.5em-}.no-csstransforms .cn-wrapper li {height:3em-width:3em-}}

javascript частина

Ми додамо обробник, який буде визначати відкриття і закриття навігації:

123456789101112131415161718192021222324252627282930313233343536373839404142

(function(){var button = document.getElementById(`Cn-button`),wrapper = document.getElementById(`Cn-wrapper`),overlay = document.getElementById(`Cn-overlay`)-// натискання на кнопку коли меню відкрито або закритоvar open = false-button.addEventListener(`Click`, handler, false)-button.addEventListener("Focus", handler, false)-wrapper.addEventListener(`Click`, cnhandle, false)-function cnhandle(e) {e.stopPropagation()-}function handler(e) {if (!e) var e = window.event-e.stopPropagation()-if(!open) {openNav()-}else{closeNav()-}}function openNav() {open = true-button.innerHTML = ";"-classie.add(overlay, `On-overlay`)-classie.add(wrapper, `Opened-nav`)-}function closeNav() {open = false-button.innerHTML = "+"-classie.remove(overlay, `On-overlay`)-classie.remove(wrapper, `Opened-nav`)-}document.addEventListener(`Click`, closeNav)-})()-

висновок

На цьому все. Приголомшливі меню. Мені вони дуже подобаються як і ті, які були в минулій статті. Якщо вони вас подобаються також, застосовуйте у себе на сайті :).

Успіхів!

джерело: tympanus.net

Відео: HTML5 Tutorial For Beginners - 6 of 6 - CSS Page Layout

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