Make an impressive sliding top menu

Sliding top menu is very effective in your website when the space is limited . I think it's the best for announcements , login form ...
When close

And when opened

Live demo here
I found in internet a script for sliding-top-menu ,and here is the instruction to make a sliding top menu ( for blogger ,of course ^^)

Step 1

Go to CSS section of your blogger template (between <b:skin> and </b:skin> tag) and paste this code :
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(http://dinhquanghuy.110mb.com/slidingmenu/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;
}
#wrd {
margin: 0 auto;
width: 600px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}

With the CSS 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 2:
Adding this Javascript between <head> and </head> tags
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/slidingmenu/jquery-1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".topMenuAction").click( function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-141px"
}, 500 );
$("#topMenuImage").html('<img src="http://dinhquanghuy.110mb.com/slidingmenu/open.png" alt="open" />');
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginTop: "0px"
}, 500 );
$("#topMenuImage").html('<img src="http://dinhquanghuy.110mb.com/slidingmenu/close.png" alt="close" />');
$("#openCloseIdentifier").hide();
}
});
});
</script>

if error occurred when inserting javascript code into Blogger template ,you can encode javascript at here and paste the result back to template file

Step 3
In the body section ( after <body> ) insert the code
<div id="sliderWrap">
<div style="display: block;" id="openCloseIdentifier"></div>
<div style="margin-top: -141px;" id="slider">
<div id="sliderContent">
The text goes here ...
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage"><img src="http://dinhquanghuy.110mb.com/slidingmenu/open.png" alt="open"></a>
</div>
</div>
</div>

Save template .Ok, you are done
You can add your text at "the text goes here" .
You can modify the CSS as you want
That's all .Enjoy it ! ^^
huy signature