Суть данного меню следующая, оно выглядит как обычное простое меню, которое можно ставить куда угодно. Но, когда пользователь начинает прокручивать страницу вниз, появляется фиксированная полоса-меню. Смотрите Демо
Установка:
1. Ставим стили, в таблицу стилей CSS
Код
/*main menu*/
#menu {
text-transform: uppercase;
text-align: center;
line-height: 50px;
background: #69c;
text-shadow:0 1px 1px black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#menu ul {padding:0; margin:0;}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li a:hover{
background: #36c;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}
#menu {
text-transform: uppercase;
text-align: center;
line-height: 50px;
background: #69c;
text-shadow:0 1px 1px black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#menu ul {padding:0; margin:0;}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li a:hover{
background: #36c;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}
2. Далее, ставим код меню, где хотите чтобы оно отображалось.
Код
<div id="menu" class="default">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/index/0-2">О сайте</a></li>
<li><a href="/index/0-3">Контакт</a></li>
<li><a href="/forum">Форум</a></li>
</ul>
</div>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/index/0-2">О сайте</a></li>
<li><a href="/index/0-3">Контакт</a></li>
<li><a href="/forum">Форум</a></li>
</ul>
</div>
3. Потом ставим скрипт для фиксации меню, в верхнюю часть сайта между <hеаd> и </hеаd>
Код
<script type="text/javascript">
$(document).ready(function(){
var $menu = $("#menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("default")
.fadeIn('fast');
});
}
});//scroll
$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
</script>
4. И ставим так же, между <hеаd> и </hеаd>
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
На этом всё! Меню проверено и оно рабочее. Если у вас оно не заработает, то ищите проблемы в скриптах или CSS на вашем сайте.
