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

В открытом:

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

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

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

Шаг 1 – HTML:

Isn’t this nice?

Шаг 2 – CSS:

body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}

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

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

Шаг 3 – jQuery / JavaScript:



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

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

Посмотреть в работе

Скачать пример