Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery

Главная » Скрипты для uCoz » Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery для uCoz

Установка:

После /head на нужных вам страницах вставляйте:

Code
<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>

Следующий код вставляйте в то место, где будет само меню:

Code
<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

Пример работы скрипта можно посмотреть здесь :edik2009.at.ua/forum
Источник материала : apocalypse.ucoz.kz

Скачать

Просмотров: 1227 | Комментариев: 0 | Опубликовал: edik2009 | Дата: 29.08.2010

 10.12.2009   

 

 До нового года оста... 

 02.12.2009   

 

 Поиск по всем модул... 

 05.11.2009   

 

 Сворачивающиеся бло... 

 23.12.2009   

 

 Нужно ознакомиться ... 

 25.01.2010   

 

 Code и Quote с закр... 


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.