Фиксированное горизонтальное меню на CSS
 | |
| Это горизонтальное меню отличается тем, что при прокрутке в низ страницы, они становится вверх, если вы даже поставили под шапку сайта. Также на нем присутствует эффект, который заключается как стилистике так и при наведение курсора. По умолчанию когда оно поднимется вверх, то будет прозрачным. Что оттенок цвета вы сами ставите под свой сайт, все настройки идут в CSS. Но только вы на его наведете курсор, так меню становится в оттенке цвета уже не прозрачным и также категорий или разделы, что на нем прописали стоят под эффектом красивым. вообщем как поняли, вы устанавливаете его по умолчанию и выставляете размер ширины, где оно может быть фиксировано, что показано на демонстраций, которые вы можете посмотреть. Но только вы начали опускать страницу, то здесь автоматически срабатывает и устанавливается в самый потолок монитора и уже будет на весь экран. Оно подойдет под блог или полноценный интернет ресурс. Так как сейчас много порталов идут с различными фиксаторами и элементами на разнообразные эффекты. Где И так горизонтальное меню безусловно подойдет на на такие площадки. Но главное, оно будет нести функцию навигаций для пользователя, который безусловно заметит его.Что можно в него под ссылки поставить самые актуальные запросы по вашему сайту, что и будет отличным решение, это уникальность его в работе. Здесь наблюдаем его по умолчанию, как пример, вы только зашли на сайт.  Это вы выбераете куда перейти и уже видим, что прозрачность исчезла.  Приступаем к установке: Для начало основной код, который выставляем, где хотите его видеть. Код <div id="menu" class="default"> <ul> <li><a href="http://zornet.ru/">Главная zornet.ru</a></li> <li><a href="http://zornet.ru/load/84">Меню для сайта</a></li> <li><a href="http://zornet.ru/load/81">Скрипты</a></li> <li><a href="http://zornet.ru/load/145">Блог сайта zornet.ru</a></li> </ul> </div> Таблица стилей и ставим в 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; } Нужно выставить скрипт, что отвечает за фиксацию и здесь также его ставим вверх сайта в 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> Если у тебя не конструктор uCoz, так как там идет библиотека уже в теле сайта, вам нужно поставить на страницах в hеаd где будет меню. Код <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script> На этом вся установка, не забываем все сохранить и также демонстрацию на материал посмотреть. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
