Установка:
После /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
Скачать
