Веб-дизайнеру
Веб-разработчику
Дополнительно
Круглое вращающееся меню на JQuery, зеленый стиль!
Скачать
Демо
↓ Также Вам будет интересно ↓
В этом уроке мы создадим невероятно красивое вращающееся меню на основе JQuery скрипта от Zachary Johnson, который может быть найден .
Мы создадим горизонтальное меню jquery с маленькими иконками, которые будут вращаться при наведении курсора. Кроме того, каждый пункт меню будет выдвигаться и показывать другие подпункты, вроде ссылок, формы поиска или даже можно вставить картинку, при желании (в общем, что угодно). Ещё советую посмотреть на другое, выдвигающееся меню навигации на JQuery – возможно, оно Вам понравиться больше.
Итак, давайте начнем, и Вы поймете, что на самом деле это не так сложно как кажется.
HTML код
Для этого меню мы не будем создавать маркированный список ul, но сделаем все на основе тегов div. Все меню будет обернуто в div с классом menu.
Каждый пункт меню будет иметь иконку, как элемент ссылки, а также весь контент с классом item_content, включающий в себя заголовок и все подпункты, или форма поиска:
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div class="menu"> <div class="item"> <a class="link icon_mail"></a> <div class="item_content"> <h2>Контакты</h2> <p> <a href="#">E-mail |</a> <a href="#">Twitter |</a> <a href="#">Facebook</a> </p> </div> </div> <div class="item"> <a class="link icon_help"></a> <div class="item_content"> <h2>Помощь</h2> <p> <a href="#">FAQ |</a> <a href="#">Онлайн помощь |</a> <a href="#">Тикет</a> </p> </div> </div> <div class="item"> <a class="link icon_find"></a> <div class="item_content"> <h2>Поиск</h2> <p> <input type="text"></input> <a href="">Искать</a> </p> </div> </div> <div class="item"> <a class="link icon_photos"></a> <div class="item_content"> <h2>Галерея изображений</h2> <p> <a href="#">Категории</a> <a href="#">Архив</a> <a href="#">Избранное</a> </p> </div> </div> <div class="item"> <a class="link icon_home"></a> <div class="item_content"> <h2>Начать здесь</h2> <p> <a href="#">Сервисы |</a> <a href="#">Портфолио |</a> <a href="#">Цены</a> </p> </div> </div> </div> |
Изначально div с классом item, будет таких же размеров, как и иконка, но при наведении расширится, и мы увидим его содержимое.
CSS стилизация
Общий стили для всего меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.menu{ width:800px; height:52px; position:relative; top:200px; left:100px; font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-transform: uppercase; } |
все элементы внутри item будут позиционированы float:right;, так как мы будем расширять пункты меню слева:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.item{ position:relative; background-color:#f0f0f0; float:right; width:52px; margin:0px 5px; height:52px; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden; } |
Далее мы определяем стили иконок (зададим класс для каждой ссылки) следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.link{ left:2px; top:2px; position:absolute; width:48px; height:48px; } .icon_home{ background:transparent url(../images/home.png) no-repeat top left; } .icon_mail{ background:transparent url(../images/mail.png) no-repeat top left; } .icon_help{ background:transparent url(../images/help.png) no-repeat top left; } .icon_find{ background:transparent url(../images/find.png) no-repeat top left; } .icon_photos{ background:transparent url(../images/photos.png) no-repeat top left; } |
Для других элементов, которые могут содержаться внутри, мы пропишем такие стили:
|
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 29 30 31 32 33 34 35 36 37 38 39 40 |
.item_content{ position:absolute; height:52px; width:220px; overflow:hidden; left:56px; top:7px; background:transparent; display:none; } .item_content h2{ color:#aaa; text-shadow: 1px 1px 1px #fff; background-color:transparent; font-size:14px; } .item_content a{ background-color:transparent; float:left; margin-right:7px; margin-top:3px; color:#bbb; text-shadow: 1px 1px 1px #fff; text-decoration:none; font-size:12px; } .item_content a:hover{ color:#0b965b; } .item_content p { background-color:transparent; display:none; } .item_content p input{ border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px; } |
С параметрами text-shadow, мы создали хороший эффект выгравированного текста. Ладно, все это хорошо, но ведь без Javascript это никуда не годится! Идем далее… 
Javascript скрипт
Сначала нам нужно подключить скрипты JQuery от Zachary Johnson, а затем добавим следующие функции:
|
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 29 30 31 32 33 34 35 36 37 38 39 |
$('.item').hover( function(){ var $this = $(this); expand($this); }, function(){ var $this = $(this); collapse($this); } ); function expand($elem){ var angle = 0; var t = setInterval(function () { if(angle == 1440){ clearInterval(t); return; } angle += 40; $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); },10); $elem.stop().animate({width:'268px'}, 1000) .find('.item_content').fadeIn(400,function(){ $(this).find('p').stop(true,true).fadeIn(600); }); } function collapse($elem){ var angle = 1440; var t = setInterval(function () { if(angle == 0){ clearInterval(t); return; } angle -= 40; $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); },10); $elem.stop().animate({width:'52px'}, 1000) .find('.item_content').stop(true,true).fadeOut() .find('p').stop(true,true).fadeOut(); } |
Чтобы облегчить задачу, мы создали две функции:
- функция расширения
expand– будет вращать значок вокруг себя 4 раза (360 х 4 = 1440). Мы также расширим пункт меню с помощью анимации увеличения его ширины. Затем мы показываем его содержимое. - функция закрытия
collapse– будет вращать значок назад, в первоначальное положение, уменьшает ширину и скрывает содержимое пункта меню.
И вот все готово! Я надеюсь, что вам понравилось! Жду Ваших комментариев! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Здравствуйте. Всё делал по описанию, но меню не работает. Вот сайт
/
Здравствуйте! Похоже, что Вы не подключили Javascript скрипты. Проверьте, пожалуйста, подключена ли к Вашему сайта библиотека JQuery, а также 2 файла js. Если все таки не получится, пишите я помогу.
JQuery у меня 1.7.2.
и js два файла тоже есть в папке js.
/
Кроме подключения файлов js, Вам необходимо также прописать javascript функции, которые приведены в конце статьи. Конкретно посмотреть на Ваш сайт не смог, так как он не работает.
Будут вопросы – пишите.
http://vashgruz.by/
Влад, подскажите, пожалуйста, что не так. Когда раскрывается меню, виден только первый уровень меню, а второй отсутствует.
/
Александр, в вашем случае эффект не работает должным образом по двум причинам:
1. Нет стандартного сброса стилей
*{margin: 0; padding: 0;}. При этом если сейчас его сделать, придётся поправлять и другие элементы сайта.2. Не применены все необходимые свойства для
.item_content pРешение:
Добавить к
.item_content pэто:background-color: transparent;float: left;
margin-right: 7px;
margin-top: 1px;
color: #bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
font-size: 12px;
+ для
.item_content h2дописать:margin: 0;И будет вам счастье:)