jSlickmenu - плагин CSS3 меню

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

HTML

В контейнере #menu помещается список, элементы которого и будут пунктами меню:

<div id="menu">
   <ul>
      <li>
         <a href="[ССЫЛКА]">
            <img src="[ПУТЬ ДО ИЗОБРАЖЕНИЯ]" alt="[ЗАГОЛОВОК]" />
         </a>
      </li>
      <!-- другие пункты меню -->
   </ul>
</div>

Атрибут ALT изображения будет использоваться в качестве всплывающего заголовка при наведении мыши на изображение.

CSS

Стили самого меню:

#slickmenu { margin-top:50px; height:150px;}
#slickmenu ul { list-style:none; }
#slickmenu ul li { display:block; position:absolute; }
#slickmenu ul li a { text-decoration:none; }
#slickmenu ul li a img { border: 3px solid #EEE; }
.infobox { display:none; background-color:#111111; position:absolute; text-decoration: none !important;
    background-color:#eeeeee; padding:3px; width:163px; font-size:12px; border-style:none; border:1px solid #eee; }
.infobox-arrow { display:none; width:40px; height:10px; margin-left:65px; position:absolute;
    background-image:url('../images/arrow.png'); background-position:center; background-repeat:no-repeat; }

JS

Подключаем jQuery и плагин

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jquery.jslickmenu.js"></script>

И инициализируем наш плагин:

$(document).ready(function(){
  $("#menu").jSlickmenu();
});

Опции

•     speed - скорость анимации при наведении
•     fadeopacity - непрозрачность при наведении
•     infomargin - Integer. Margin (в px) - отступы для заголовка появляющегося над изображением.
•     leftmargin - Integer. Margin (в px) отступы для отделения пунктов меню друг от друга.
•     css3rotate - Boolean. Поворачивать ли пункты меню используя CSS3
•     css3shadow - String. Свойство CSS3 box-shadow.
•     css3borderradius - Integer. Размер радиуса границы.
•     borderneutral - Integer. Ширина границы в px, при отсутствии наведения.
•     borderhover - Integer. Ширина границы в px, при наведении.

Вот пример инициализации из Демо 2:

$("#menu").jSlickmenu({
   speed : 100,
   fadeopacity : 0.1,
   infomargin : 15,
   leftmargin : 150,
   css3rotate : false,
   css3shadow : '#999 5px 10px 10px',
   css3borderradius : 3,
   borderneutral : 5,
   borderhover : 20   
});