Создаем раскрывающееся меню на CSS3

Несомненно, меню для сайта является незаменимым средством навигации пользователя по сайту. Но, как правило, навигация на сайтах скучная и обыденная. В данном уроке мы рассмотрим как создать замечательное раскрывающееся меню с помощью css и jquery. Идея заключается в том, что прямоугольник с пунктами меню при наведении мыши выскальзывает вниз, а миниатюра выскакивает наверх. Также в меню есть также прямоугольник для подменю, которое имеется у некоторых пунктов меню. Подменю будет выскальзывать влево или вправо..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

И так, приступим, для начала мы рассмотрим создание достаточно простой HTML-разметки, в который содержится в качестве пунктов ссылку на основной пункт и элемент div для подменю:

<li>

<span>

<span>Портфолио</span>

<span>Мои работы</span>

</span>

</a>

<div>

<a href="#">Веб сайты</a>

<a href="#">Иллюстрации</a>

<a href="#">Фотографии</a>

</div>

</li>

...

</ul>

В случае если подменю нет, то элемент div можно просто опустить. Изображение сначала не будет выводиться, так как мы установим для него ширину и высоту равной 0 в CSS.

Теперь рассмотрим стили CSS, для неупорядоченного списка:

ul.sdt_menu{

margin:0;

padding:0;

list-style: none;

font-family:"Myriad Pro", "Trebuchet MS", sans-serif;

font-size:14px;

width:1140px;

}

Также мы сбросим свойства text-decoration и outline для всех ссылок в нашем меню:

ul.sdt_menu a{

text-decoration:none;

outline:none;

}

Пункт списка будет смещаться влево и позиционироваться относительно, так как элементы внутри него будут позиционироваться абсолютно:

ul.sdt_menu li{

float:left;

width:190px;

height:85px;

position:relative;

cursor:pointer;

}

Стиль для основного элемента ссылки, в котором имеются два элемента span для заголовка и описания:

ul.sdt_menu li > a{

position:absolute;

top:0px;

left:0px;

width:190px;

height:85px;

z-index:12;

background:transparent url(../images/overlay.png) no-repeat bottom right;

-moz-box-shadow:0px 0px 2px #000 inset;

-webkit-box-shadow:0px 0px 2px #000 inset;

box-shadow:0px 0px 2px #000 inset;

}

Обратите внимание на свойство z-index: мы будем определять порядок расположения всех важных элементов, поэтому нужный всегда будет оставаться наверху. Мы используем фоновое изображение, которое создает эффект стекла с помощью полупрозрачного градиента.

Также можно изменять тени – установка значений 2px 2px 6px #000 inset создает прелестный эффект. Изображения будут иметь следующие стили:

ul.sdt_menu li a img{

border:none;

position:absolute;

width:0px;

height:0px;

bottom:0px;

left:85px;

z-index:100;

-moz-box-shadow:0px 0px 4px #000;

-webkit-box-shadow:0px 0px 4px #000;

box-shadow:0px 0px 4px #000;

}

Мы будем анимировать изображения так, как будто они появляются снизу, поэтому они позиционируются абсолютно с использованием свойства “bottom” в качестве исходной точки. Также используются тени. Первые два значения 0 устанавливают равномерное распределение тени вокруг изображения. Контейнер для элементов span заголовка и описания будет иметь следующий стиль:

ul.sdt_menu li span.sdt_wrap{

position:absolute;

top:25px;

left:0px;

width:190px;

height:60px;

z-index:15;

}

Если вы будете использовать более длинный текст, вам надо адаптировать данные значения. Также нужно скорректировать значения в анимации JavaScript.

ul.sdt_menu li span.sdt_active{

position:absolute;

background:#111;

top:85px;

width:190px;

height:0px;

left:0px;

z-index:14;

-moz-box-shadow:0px 0px 4px #000 inset;

-webkit-box-shadow:0px 0px 4px #000 inset;

box-shadow:0px 0px 4px #000 inset;

}

Стили для элементов span и ссылок в прямоугольниках:

ul.sdt_menu li span span.sdt_link,

ul.sdt_menu li span span.sdt_descr,

ul.sdt_menu li div.sdt_box a{

margin-left:15px;

text-transform:uppercase;

text-shadow:1px 1px 1px #000;

}

Заголовок и описание будут иметь следующие стили:

ul.sdt_menu li span span.sdt_link{

color:#fff;

font-size:24px;

float:left;

clear:both;

}

ul.sdt_menu li span span.sdt_descr{

color:#0B75AF;

float:left;

clear:both;

width:155px; /*Для тупого IE7*/

font-size:10px;

letter-spacing:1px;

}

Прямоугольник подменю изначально скрыт под серым прямоугольником. Затем, мы анимируем его выдвижение вправо или влево в зависимости от расположения пункта меню.

ul.sdt_menu li div.sdt_box{

display:block;

position:absolute;

width:190px;

overflow:hidden;

height:190px;

top:85px;

left:0px;

display:none;

background:#000;

}

ul.sdt_menu li div.sdt_box a{

float:left;

clear:both;

line-height:30px;

color:#0B75AF;

}

Первая ссылка в подменю должна иметь отступ сверху:

ul.sdt_menu li div.sdt_box a:first-child{

margin-top:15px;

}

ul.sdt_menu li div.sdt_box a:hover{

color:#fff;

}

Теперь рассмотрим JavaScript, Когда курсор мыши заходит на элемент списка, мы увеличиваем изображение и выводим оба элемента span sdt_active и sdt_wrap.

$(function() {

$('#sdt_menu > li').bind('mouseenter',function(){

var $elem = $(this);

$elem.find('img')

.stop(true)

.animate({

'width':'190px',

'height':'190px',

'left':'0px'

},400,'easeOutBack')

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'140px'},500,'easeOutBack')

.andSelf()

.find('.sdt_active')

.stop(true)

.animate({'height':'190px'},300,function(){

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length){

var left = '190px';

if($elem.parent().children().length == $elem.index()+1)

left = '-190px';

$sub_menu.show().animate({'left':left},200);

}

});

}).bind('mouseleave',function(){

var $elem = $(this);

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length)

$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')

.stop(true)

.animate({'height':'0px'},300)

.andSelf().find('img')

.stop(true)

.animate({

'width':'0px',

'height':'0px',

'left':'85px'},400)

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'25px'},500);

});

Если элемент имеет подменю (sdt_box), то его надо выдвинуть. Если элемент последний в списке, то подменю будет выдвигаться влево, а в остальных случаях вправо. Вот и все, меню готово к работе.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.