Меню для сайту у вигляді колеса

На сайті вже був урок на тему як створити кругову навігацію. Вона була в стилі Flat і з`являлася при натисканні на перемикач, який розташовувався по центрі сторінки внизу і був зафіксований. Якщо когось вона зацікавила, тоді посилання знаходиться в повній новині. А в цьому уроці ми створимо також круговий меню в вигляді колеса. З одного боку якось дивно звучить, але все ж у вигляді колеса # 128578; . У прикладі є 5 демо, де показуються різні настройки плагіна і ефект при цих налаштуваннях. Можливо вам сподобається якийсь із них.

Схожий урок про те, що створити кругову навігацію:

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

Отже ..

Відео: Створення адаптивного меню для сайту (однорівнева меню)

Приклад можна побачити тут:

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

HTML частина

Як завжди (і точніше як в минулих уроках) необхідно підключити дві бібліотеки:

Відео: Як створити меню для сайту-Урок HTML5 # 2

12

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.wheelmenu.js"gt; lt;/scriptgt;

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

12345678910111213

lt;div class="Pointer"gt; Натисни!lt;/divgt;lt;ul id="Wheel"gt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-home"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-music"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-video"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-heart"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-user"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-trash"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-envelope"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-camera"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-picture"gt; lt;/igt; lt;/agt; lt;/ligt;lt;li class="Item"gt; lt;a href="#home"gt; lt;i class="Customicon-eye-open"gt; lt;/igt; lt;/agt; lt;/ligt;lt;/ulgt;

CSS частина

У стилях ми задаємо діаметр невидимого кола, по якому «розташовуються» елементи меню:

Відео: 1870910 Вимикач (рульове колесо - перемикачі телефону і меню)

1234567891011121314151617181920212223

.wheel-button {position: relative-}.wheel {margin: 0-padding: 0-list-style: none-width: 200px- / * Тут визначається діаметр кола * /height: 200px- / * Тут визначається діаметр кола * /visibility: hidden-position: relative-display: none-}.wheel li {overflow: hidden-float:left-}.wheel li a {display: block-}

jQuery частина

Знову ж невелика функція, в якій ми прописуємо необхідні параметри:

12345

$(".wheel-button").wheelmenu({animation: "Fly",animationSpeed: "Medium",angle: "All"})-

де:

• .wheel-button - це селектор кнопки після натискання на яку відкриється меню.
• animation - то, з яким ефектом буде розкриватися меню. Приймає наступні значення: fade і fly.
• animationSpeed - це швидкість відкриття меню. Приймає значення: slow, medium і fast.
• angle - це кут під яким відкривається меню. Його можна визначати як сторони світу по-англійськи: all, N, NE, E, SE, S, SW, W і NW. Або можна задати кут в квадратних дужках, наприклад, як в демо 5 - [0, 270].

висновок

Простий у використанні плагін, якщо дане меню здалося вам цікавим застосовуйте його на своєму сайті.

Успіхів!

джерело: onextrapixel.com

Відео: Як змінити меню сайту ucoz - вертикальне і горизонтальне меню