Главная » Файлы » Прочие скрипты » jQuery

Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
23.06.14, 09:03:00

Скачать файл




Интересное меню с оригинальной подсветкой пунктов. Замечательно смотрится на тёмных дизайнах

Для начала посмотрите ДЕМО

Установка:

После /head на нужных вам страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.sliding-menu.js"></script>
  <script type="text/javascript">
  jQuery(function(){  
jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();  
  });  
  </script>  
  <style>  
  body {  
font-family: "Arial","Verdana","Helvetica";  
font-size: 0.9em;  
margin: 1.5em;  
  }  
  ul.SlidingMenu {  
list-style: none;  
padding: 0em;  
  }  
  ul.SlidingMenu a {  
padding: 0.62em 1.5em;  
text-decoration: none;  
color: #FFF;  
outline: none;  
  }  
  ul.Horizontal li {  
float: left;  
  }  
  .ClearFix {  
clear: both;  
  }  
  #HorizontalSlidingMenu {  
background: url('/images/menubg.png') top left repeat-x;  
  }  
  #HorizontalSlidingMenu li.Background {  
background: url('/images/bg_menu_right.png') top right no-repeat;  
  }  
  #HorizontalSlidingMenu li.Background div{  
background: url('/images/bg_menu.png') top left no-repeat;  
height: 100%;  
margin-right: 31px;  
  }  
  </style>


Следующий код вставляйте в то место, где будет само меню:
Код
<div id="HorizontalSlidingMenu">
<ul class="SlidingMenu Horizontal">
<li><a href="#">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
<li><a href="#">Четвёртый пункт</a></li>
<li><a href="#">Пятый пункть</a></li>
</ul>
<div class="ClearFix"></div>
</div>


Далее залейте файлы из прикреплённого архива следующим образом:
jquery.sliding-menu.js - в папку js
Оставшиеся три картинки - в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: активного, красивое, оригинальной, горизонтальное, на, JQuery, пункта, Меню, подсветкой
Просмотров: 384 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: