Светлое горизонтальное меню с эффектами jQuery
Красивое светлое меню с эффектов jQuery , располагается в горизонтальном положении.
Меню светлое и красиво будет смотреться в любом дизайне особенно на светлом.
Особенности:
При наведении на ссылки категория меню с легка подсвечивается и придает эффект светлой обводки.
Установка:
Скачиваем архив и заливаем к себе на сайт в корень директивы папку "images"
В CSS прописываем:
Код
ul.SlidingMenu {
list-style: none;
padding: 0em;
margin: 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;
}
#Description {
background: #0858C7;
background: rgba(80,80,80,0.5);
margin: 15px 0px 0px 165px;
padding: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#Description pre {
background: #FFF;
background: rgba(255,255,255,0.8);
color: #008;
overflow: auto;
font-size: 14px;
border: 1px solid #FFF;
padding: 5px;
}
Между head /head вставляем:
Код
<link rel="stylesheet" href="/images/jquery.sliding-menu.css" type="text/css" media="screen" />
Этот скрипт прописываем перед /body:
Код
<script type="text/javascript" src="/images/jquery.sliding-menu.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();
jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 });
});
</script>
Ставим там где хотим видеть меню:
Код
<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="#">FAQ сайта</a></li>
</ul>
<div class="ClearFix"></div>
</div>
