Гарантийный ремонт ноутбуков, ремонт мониторов в сервисном центре “Стаханов”

Источник

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

Это скользящее сверху меню создано с помощью jQuery. Меню работает с помощью кнопок “Открыть” и “Закрыть”, которые могут быть любым тегом с заданным классом.

Вы также можете использовать его как информационное окно, диалог входа и по-другому.

Посмотрите пример, как работает меню.

Делаем?

Шаг 1й: html

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn’t this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

Шаг 2й: CSS

<style type="text/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;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

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

Шай 3й: Javascript

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

Главный фокус здесь в изменении смещения края #slider и изменение кнопок “открыть/закрыть”.

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

Затем все, что мы делаем:
если openCloseIdentifier = hidden, тогда закрываем, или если openCloseIdentifier = visible, тогда открываем меню.

Эффект может быть ускорен путем замены значения 500 в коде JavaScript на меньший номер.

P.S. Стрелочки “вверх” и “вниз” взяты из Crystal Clear.

Популярность: 44%