Slide Down Box Menu - скользящее меню с анимацией на jQuery и CSS3

Slide Down Box Menu - скользящее меню с анимацией на jQuery и CSS3

Разметка

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

Code

<ul id="sdt_menu" class="sdt_menu">
  <li>
  <a href="#">
  <img src="images/1.jpg" alt=""/>
  <span class="sdt_active"></span>
  <span class="sdt_wrap">
  <span class="sdt_link">Portfolio</span>
  <span class="sdt_descr">My work</span>
  </span>
  </a>
  <div class="sdt_box">
  <a href="#">Websites</a>
  <a href="#">Illustrations</a>
  <a href="#">Photography</a>
  </div>
  </li>
  ...
</ul>

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

CSS

Мы начнем с дизайна неупорядоченного списка:

Code

ul.sdt_menu{
  margin:0;
  padding:0;
  list-style: none;
  font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
  font-size:14px;
  width:1020px;
}

Далее, нам нужно удалить стандартное оформление text-decoration и outline для всех ссылок нашего меню:

Code

ul.sdt_menu a{
text-decoration:none;
outline:none;
}

Наши элементы списка будут иметь обтекание слева и расположены относительно, так как мы будем использовать абсолютное позиционирование для элементов внутри. Если бы мы этого не установили, то абсолютное положение элементов было бы по отношению ко всей странице:

Code

ul.sdt_menu li{
  float:left;
  width:170px;
  height:85px;
  position:relative;
  cursor:pointer;
}

Стили для оформления основных (заглавных) ссылок, к которым у нас относятся две строки с названием и описанием будут следующие:

Code

ul.sdt_menu li > a{
  position:absolute;
  top:0px;
  left:0px;
  width:170px;
  height:85px;
  z-index:12;
  background:transparent url(../images/overlay.png) no-repeat bottom right;
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow:0px 0px 2px #000;
  box-shadow:0px 0px 2px #000;
}

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

Мы используем фоновое изображение с полупрозрачным градиентом, которое создает эффект стекла. При использовании некоторых фоновых рисунков (как ,например, древесины в демо) получается красивый эффект. Убедитесь в этом, попробуйте различные текстуры -выглядит просто потрясающе!

Вы также можете играть с тенями, изменяя значения 2px 2px 6px # 000, добавив этим очень хороший эффект.

Стили для изображений будут оформлены следующим образом:

Code

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

Нам нужно заставить двигаться изображение, чтобы поднять его наверх, поэтому мы сделали для него абсолютное позиционирование "снизу", как точку отсчета. Мы также добавили для него неплохие тени. Первые два значения равны нулю, что делает тени равномерными по всему изображению. Мы использовали это и для элементов заглавных ссылок. Такие тени можно использовать как трюк, когда вы хотите создать световой эффект границы. Преимуществом является то, что тени на самом деле нет - и вам не нужно заниматься расчетами ширины или высоты элементов. Недостатком на данный момент является то, что CSS3 не поддерживается в IE.

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

Code

ul.sdt_menu li span.sdt_wrap{
  position:absolute;
  top:25px;
  left:0px;
  width:170px;
  height:60px;
  z-index:15;
}

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

Далее, мы определим стиль для серого блока, который скользит вниз. Мы зададим его высоту в 0 и расположим абсолютно, попутно нам нужно указать его расположение по высоте при анимации:

Code

ul.sdt_menu li span.sdt_active{
  position:absolute;
  background:#111;
  top:85px;
  width:170px;
  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;
}

Общие стили для строк и ссылок в блоке будут следующие:

Code

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

Название и описание будут оформлены следующим образом:

Code

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;
  font-size:10px;
  letter-spacing:1px;
}

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

Code

ul.sdt_menu li div.sdt_box{
  display:block;
  position:absolute;
  width:170px;
  overflow:hidden;
  height:170px;
  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;
}

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

Code

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

Когда мы помещаем указатель мыши на элемент списка, изображение увеличивается, и загружается его демонстрация, как sdt_active span и the sdt_wrap span. Если элемент имеет подменю (sdt_box), то происходит его сдвиг в сторону. Если элемент является последним в меню, то подменю сдвигается в поле слева, в противном случае в поле справа:

Code

$(function() {
  $('#sdt_menu > li').bind('mouseenter',function(){
  var $elem = $(this);
  $elem.find('img')
  .stop(true)
  .animate({
  'width':'170px',
  'height':'170px',
  'left':'0px'
  },400,'easeOutBack')
  .andSelf()
  .find('.sdt_wrap')
  .stop(true)
  .animate({'top':'140px'},500,'easeOutBack')
  .andSelf()
  .find('.sdt_active')
  .stop(true)
  .animate({'height':'170px'},300,function(){
  var $sub_menu = $elem.find('.sdt_box');
  if($sub_menu.length){
  var left = '170px';
  if($elem.parent().children().length == $elem.index()+1)
  left = '-170px';
  $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);
  });
});

И вот оно! Мы надеемся, что вам понравилось это маленькое меню, и оно оказалось полезным!

PS: Пожалуй, круче всего смотрится в Google Chrome!