06 сен 2012
jSlickmenu - CSS3 меню
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно jSlickmenu - CSS3 меню .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
jSlickmenu - CSS3 меню

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


javascript

Подключаем jQuery и плагин
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" 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  
});


Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.