[jQuery] Horizontal Reveal/Slideout Menu

[[EMAIL PROTECTED]]

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<br>E<br>N<br>U</p>
  <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