Фиксированное горизонтальное меню

Сообщение # 1 | 16:59:19 03 Янв 2013

Сразу покажу пример как это должно быть ДЕМО
Вот ИСТОЧНИК где показаны всё и html и css и так далее.

HTML структуру взял эту вставил

Код

<div id="menu" class="default">
         <ul>
             <li><a href="#">Главная</a></li>
             <li><a href="#">Joolma</a></li>
             <li><a href="#">WordPress</a></li>
             <li><a href="#">HTML5&CSS3</a></li>
             <li><a href="#">PHP</a></li>
         </ul>
</div>

CSS 3 этот

Код

#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;
         }

куда вставить мне этоти jQuery эффекты? подскажите кто знает.

Код

$(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

Страница 1 из 1 1
Модератор форума: JonMagon