jQuery - скользящее меню в шапке сайта (Sliding Top Menu)

В закрытом состоянии:

В открытом:

Скользящие меню очень эффективных в случаях когда у нас ограниченное пространство на сайте, и часть функциональнях блоков приходится скрывать.

Это скользящее меню с привязкой к верхней границе браузера, оно основано на известном фреймворке jQuery. Открыть это меню можно при помощи нажатия кнопки Open it или же при помощи любого другого тега с идентичным именем класса.

Для такого меню можно найти достаточно много применений - информационный блок, форма авторизации и т.д

Шаг 1 - HTML:

1. <div id="sliderWrap">
2.     <div id="openCloseIdentifier"></div>
3.     <div id="slider">
4.         <div id="sliderContent">
5.             Isn't this nice?
6.         </div>
7.         <div id="openCloseWrap">
8.             <a href="#" class="topMenuAction" id="topMenuImage">
9.                 <img src="open.png" alt="open" />
10.             </a>
11.         </div>
12.     </div>
13. </div>

Шаг 2 - CSS:

1. <style type="text/css"><br />body {<br />margin: 0;<br />font-size:16px;<br />color: #000000;<br />font-family:Arial, Helvetica, sans-serif;<br />}<br />#sliderWrap {<br />margin: 0 auto;<br />width: 300px;<br />}<br />#slider {<br />position: absolute;<br />background-image:url(slider.png);<br />background-repeat:no-repeat;<br />background-position: bottom;<br />width: 300px;<br />height: 159px;<br />margin-top: -141px;<br />}<br />#slider img {<br />border: 0;<br />}<br />#sliderContent {<br />margin: 50px 0 0 50px;<br />position: absolute;<br / >text-align:center;<br />background-color:#FFFFCC;<br />color:#333333;<br />font-weight:bold;<br />padding: 10px;<br />}<br />#header {<br />margin: 0 auto;<br />width: 600px;<br />background-color: #F0F0F0;<br />height: 200px;<br />padding: 10px;<br />}<br />#openCloseWrap {<br />position:absolute;<br />margin: 143px 0 0 120px;<br />font-size:12px;<br />font-weight:bold;<br />}<br /></style>

С CSS файлом связано несколько важных моментов:

* #slider имеет абсолютное позиционирование , поэтому он может перекрывать контент.
* #slider имеет отрицательное значение top-margin которое скрывает его.
* #sliderContent имеет абсолютное позиционирование для того что бы не закрывать кнопки Open / Close
* #openCloseWrap содержит кнопки и имеет абсолютное позиционирование.

Шаг 3 - jQuery / JavaScript:

1. <script type="text/javascript"><br />$(document).ready(function() {<br />    $(".topMenuAction").click( function() {<br />        if ($("#openCloseIdentifier").is(":hidden")) {<br />            $("#slider").animate({<br />                marginTop: "-141px"<br />                }, 500 );<br />            $("#topMenuImage") .html('<img src="open.png" />');<br />            $("#openCloseIdentifier").show();<br />        } else {<br />            $("#slider").animate({<br />                marginTop: "0px"< br />                }, 500 );<br />            $("#topMenuImage").html('<img src="close.png" />');<br />            $("#openCloseIdentifier").hide();<br />        }<br />    }); <br />});<br /></script>

Основное назначения ява скрипта изменять значение margin элемента #slider и изменять изображения open / close .

У нас так же есть пустой элемент с именем openCloseIdentifier который показывает нам когда меню открыто, а когда закрыто. Мы просто прячем его когда меню открыто и показываем когда оно закрыто.

Здесь можно оставить свои комментарии.