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.
You can also use it as an info box, login area & more.
Click here to see the final working demo of this jQuery sliding menu.
It presents the menu when closed like this:
And when opened:
Click here to see the final working demo of this jQuery sliding menu.
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.
P.S. Down & up arrow icons are from the Crystal Clear icon set.
