Меню в стиле рок-н-ролл на jQuery | Все о создании сайтов

В этом руководстве мы рассмотрим, как можно сделать меню в стиле рок-н-ролл с помощью jQuery. Мы будем использовать сторонний патч на вращение и масштабирование, который можно скачать здесь.

Мы создадим меню с маленькими иконками, которые будут крутится при наведении на них курсором мыши. Также сделаем автораскрытие контента из элемента меню, например поисковой формы.
Давайте посмотрим, что получится...

ПримерСкачать

Разметка

Для этого меню мы не будем создавать список, так будем использовать элементы div для каждого элемента меню. Мы расположим элементы меню так, что главный div наименовался, как menu. У каждого элемента будет иконка, как ссылка, и контент div с заголовком и параграфом, где мы и разместим поисковую форму:

<h2>Contact us</h2>

<p>

<a href="#">eMail</a>

<a href="#">Twitter</a>

<a href="#">Facebook</a>

</p>

</div>

<p>

<a href="#">Live Support</a>

<a href="#">Tickets</a>

</p>

</div>

<h2>Search</h2>

<p>

</p>

</div>

<h2>Image Gallery</h2>

<p>

<a href="#">Categories</a>

<a href="#">Archives</a>

<a href="#">Featured</a>

</p>

</div>

<h2>Start from here</h2>

<p>

<a href="#">Services</a>

<a href="#">Portfolio</a>

<a href="#">Pricing</a>

</p>

</div>

Изначально, элемент div окружает лишь иконку, но после наведения, раскрывается, показывая контент.

CSS

Общий стиль меню определяется следующим образом:

.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{

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;

}

Затем определим стили иконок (класс ссылки) следующим способом:

.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;

}

Другие элементы контента будут определены так:

.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;

}

С помощью белой тени от текста, мы получим эффект гравировки.

Теперь добавим немного магии.

JavaScript

Во-первых, нам нужен jQuery и два скрипта-патча от Zachary.
Затем, добавляем следующие функции:

$('.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();

}

Чтобы все было проще, мы создали две функции. Одна отвечает за разворот элемента, вторая — за его сворачивание. Функция разворота поворачивает иконку вокруг себя 4 раза (360 градусов умножить на 4, будет 1440 градусов). Мы также добавили анимацию разворачивания, с помощью плавного увеличения ширины элемента. Затем, появление контента.

Функция сворачивания поворачивает иконку в обратную сторону, уменьшая ширину элемента и пряча контент.

Вам понравилась статья? Напишите, чтобы вы хотели добавить или изменить...

Возможно, Вам будет интересно ↓↓↓

4 комментарий на “Меню в стиле рок-н-ролл на jQuery”

Михей

10.08.2011 at 14:22 | Ответить

Отличное руководство! 5+
Алексей

30.01.2013 at 22:40 | Ответить

Здравствуйте, крутое меню! Мне очень понравилось! Только, как его можно установить на тему wordpress вместо основного меню?
- 2Web
  
  01.02.2013 at 05:44 | Ответить
  
  Если только написать для этого плагин для wordpress или попытаться самому встроить это меню в вашу тему.
  - Алексей
    
    01.02.2013 at 12:26 | Ответить
    
    Написать плагин еще трудней будет (для меня), чем вставить этот код в header.php и в style.css. Пробовал самостоятельно прописать в несложной теме, ничего не получилось... Если кому под силу это сделать (вставить это меню в тему wordpress) то сделайте это, думаю не я один буду благодарен, а еще лучше, если это было снято на видео :)

Разметка

CSS

JavaScript

Возможно, Вам будет интересно ↓↓↓

4 комментарий на “Меню в стиле рок-н-ролл на jQuery”

Оставить комментарий Отменить ответ