|
|
Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Фиксированное горизонтальное меню (помогите разобраться со вставкой) |
Фиксированное горизонтальное меню |
Сразу покажу пример как это должно быть ДЕМО
Вот ИСТОЧНИК где показаны всё и 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 |
Smart0597, между <head> и </head>
вставляй так: Цитата <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> |
| |||
| |||