Sliding Menus are very effective in areas where we have limited space .This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

Step 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>

Step 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>

With the CSS file there are few major points:

• #slider has to be positioned absolutely, so it can overlay the other content.
• #slider has a negative top-margin which hides it.
• #sliderContent is positioned absolutely to not to crack the open/close buttons
• #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / 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>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

JQuery Sliding Top Menu Demo

JQuery Sliding Top Menu Download

Leave your comments