[jQuery] Horizontal Reveal/Slideout Menu
Hi,
I am looking for a way to reveal (slide out) a menu from the side of a
page.
While there are plugins and examples of things that come close (i.e.
jquery.haccordion.js) I could not seem to find anything that does
exactly what I was looking for, so I knocked up the following:
I was wondering if anyone might be able to suggest improvements or
alternative approaches.
css:
body {background:#efefef;color:#222}
#wrapper {background:#fff;border:1px solid #000;margin:6em
auto;padding:3.5em 1em 1em;width:40em;}
#nav {background:#ccc;margin:0;padding:10px 0px 10px 0px;width:15px}
#nav ul {list-style-type: none;margin:0;text-indent: -9999px}
#nav p.navmenulabel {background:#eee;float:right;text-
align:center;cursor:pointer;}
#nav p.navmenulabel:hover,p.navmenulabel:focus,p.navmenulabel:active
{color:#CC0000;}
jquery:
$(document).ready(function() {
$('.navmenulabel').click(function() {
var mw = $("#nav").css("width");
if(mw == '15px'){
$("#nav").animate({
width: "150px",
}, "slow");
$(".menu").animate({
textIndent: "0px"
}, 600);
}else{
$("#nav").animate({
width: "15px",
}, "slow");
$(".menu").animate({
textIndent: "-9999px"
}, 1000);
}
});
});
html
<div id="wrapper">
<div id="nav">
<p class="navmenulabel">M
E
N
U
<ul class="menu">
<li><a href="#about">about</a></li>
<li><a href="#demo">demo</a></li>
<li><a href="#features">features</a></li>
<li><a href="#use">use</a></li>
<li><a href="#todo">todo</a></li>
<li><a href="#changelog">changelog</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
TIA