Главная » 2014 » Ноябрь » 8 » Очень удобное веритикальное меню (Javascript)
08.11.2014, 11:28

Очень удобное веритикальное меню





Удобное вертикальное меню для вашего сайта. Располагается оно слева. При наведении мышки на пункт меню, он раскрывается.

Приступим к установке.

1) В head необходимо подключить саму библиотеку jquery и стили css, которые вы найдете в архиве, по ссылке ниже:

Код
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

2) В body, мы разместим сам код меню и скрипт, отвечающий за его анимацию:
Код
<ul id="navigation">
  <li class="home"><a href="" title="Home"></a></li>
  <li class="about"><a href="" title="About"></a></li>
  <li class="search"><a href="" title="Search"></a></li>
  <li class="photos"><a href="" title="Photos"></a></li>
  <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
  <li class="podcasts"><a href="" title="Podcasts"></a></li>
  <li class="contact"><a href="" title="Contact"></a></li>
  </ul>
  <script type="text/javascript">
  $(function() {
  $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

  $('#navigation > li').hover(
  function () {
  $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
  $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
  );
  });
  </script>

Думаю, при добавлении новых пунктов или удалении старых, вопросов не возникнет. Но, если они все же появятся, прошу в комменты.

Демо в архиве.
Материал взят с сайта infoscript.ru
Теги: Скачать Очень удобное веритикальное меню
Скачать "Очень удобное веритикальное меню"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 2009 | Добавил: antisept | Рейтинг: 5.0/1 |
Теги: очень, Удобное, меню, веритикальное
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]