Меню сайта
Категории раздела
| Скрипты для uCoz [3593] |
| Бесплатные шаблоны uCoz [3766] |
| Иконки форума групп [221] |
| Графика для сайта [2020] |
| PSD Макеты [132] |
| Кисти для фотошопа [265] |
| Уроки фотошопа на русском языке [18] |
| Стили для фотошопа [60] |
| Шрифты для фотошопа cs4 [47] |
| Web-master [3046] |
| Обзоры и статьи [74] |
| Шаблоны DLE [79] |
| Уникальные файлы от isuCoz [5] |
| Counter - Strike [29] |
Мини-чат
Наш опрос
Реклама
Статистика
Онлайн всего: 9
Гостей: 9
Пользователей: 0
Нас посетили:
Gamesik, mishailir, chek, adiladil123453, TamaraKo, qwertyz1, Pasha2047, (_MeX@NiC_), dj_sackura, xachen2, nDzМини-профиль
Поиск
Календарь
Партнёры сайта
Главная » 2010 » Август » 29 » Скрипты для uCoz » Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
Вы пришли к нам на портал что бы скачать\посмотреть Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery, если возникнут вопросы по данному файлу Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery, вы всегда можете задать свой вопрос на нашем форуме.
С уважением, администрация isucoz.com.
С уважением, администрация isucoz.com.
Скачать Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
Установка:
После /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>
<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>
<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
Источник материала : apocalypse.ucoz.kz
У вас есть сайт, но ты незнаешь какой у тебя тИЦ и ПР? Будь в курсе событий, поставь счетчик тИЦ и ПР на свой сайт! Счетчик тИЦ и ПР.
Добавил: edik2009 | Комментариев: 0 | Просмотров: 1591 | Добавлено: 29-Авг-2010
[Скачивать могут только зарегистрированные пользователи. Регистрация | Вход]
