1. Копируем данный код и вставляем в то место, где будет горизонтальное меню:
Код
<ul class="k84apomenu">
<div class="listact"></div>
<div class="k84apolist">
<a href="/"><li style="color:#fff !important;">Главная страница</li></a>
<a href="/forum"><li>Форум сайта</li></a>
<a href="/blog"><li>Блоги</li></a>
<a href="/gb"><li>Гостевая книга</li></a>
<a href="http://вашсайт.ру"><li>ваша ссылка</li></a>
</div>
</ul>
<script>
$(document).ready(function() {
// ApoTeam (c) 2013
$('.listact').css({'margin-left': $('.k84apomenu li:first').offset().left-48 + 'px', 'width': parseInt($('.k84apomenu li:first').css('width')) + 100 + 'px'});
$('.k84apomenu li').mouseover(function () {
$('.k84apomenu li').removeAttr('style');
$(this).attr('style', 'color:#fff !important');
$('.listact').css({'margin-left': $(this).offset().left-48 + 'px', 'width': parseInt($(this).css('width')) + 100 + 'px'});
});
// by k84pro & Apocalypse
});
</script>
2. Вставляем в CSS своего сайта:
Код
.k84apomenu {
width:100%;
height:70px;
background:url('http://pontov.ucoz.net/designs_100/k84maintube.png') repeat-x;
}
.k84apolist {
position:absolute;
z-index:2;
}
.k84apomenu li {
list-style:none;
display: inline-block;
margin:28px 10px 0px 0px;
padding-left:50px;
padding-right:50px;
font-weight: bold;
color:red;
text-decoration:italic;
transition:color .3s ease;
-o-transition:color .3s ease;
-webkit-transition:color .3s ease;
-moz-transition:color .3s ease;
}
.listact {
position:absolute;
color: #fff !important;
height: 70px;
text-align: center;
background: url('http://pontov.ucoz.net/designs_100/k84main.png') no-repeat;
background-size:100% 70px;
padding:28px 0px 0px -5px;
margin-top: 0px !important;
cursor:pointer;
transition:all .3s ease;
-o-transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
}