jQuery: My First Experiment – Sliding Vertical Menu

Its about time I stopped being scared of the ‘new’ things on the internet that are not written in C# and started to embrace them.  As my previous post alludes to that fact that I am starting to take a closer look at front-end web design (or at least how to implement it!).

One thing I’m really keen to do is start having a play with jQuery, as this also ties in quite nicely with a project I am writing the functional specification for this week.

Sliding Vertical Menu

The first thing that I wanted to do was to have vertical navigation element that the user could hide, giving them more room to view large amounts of content (it’s not the worlds more exciting content, and it’s very verbose).

So, I have a list of things that I need to achieve:

1. Create a menu the site to the left of the content and allows the content to wrap around it
2. Provide some form of ‘handle’ to allow the user to close the menu
3. Provide some form of ‘handle’ to allow the user to see the menu again
4. Actually figure out how to show and hide the menu in jQuery

You can view my final solution to this at http://demos.interakting.co.uk/ (I’m no designer, so it’s not very pretty!).

View the Demo

HTML Markup

The HTML I use in this example was pretty straight forward and is as follows:

<div class="column" id="left">
    <div class="menu">
        <h3>Menu</h3>
        <ul>
            <li><a href="#1">Policy Guidance</a></li>
            <li><a href="#2">Court Cases</a></li>
            <li><a href="#3">Product Codes</a></li>
            <li><a href="#4">Notices</a></li>
            <li><a href="#5">Help</a></li>
        </ul>
    </div>
    <div class="hideMenuTrigger">
        <a href="#"><img alt="menuHandle" src="Images/MenuUp.gif" /></a></div>
    <div class="showMenuTrigger">
        <a href="#"><img alt="menuHandle" src="Images/MenuDown.gif" /></a></div>
</div>

As you can see, I’ve not included the whole page, you can get that from the demo.  But as for what we have here, you will see that I have a containing <div> which contains a <div> for the menu itself and then two further <div>s, one for each of the handles.

Give it Some Style

To style this all up, I created the following CSS: 

div.column
{
    width: 178px;
}
div#left
{
    float: left;
    background-color: #333333;
    margin: 0 10px 10px 0;
}

div#left ul
{
    list-style:none;
    width:100%;
}

div#left ul li
{
    padding: 3px 3px 3px 5px;
}

div#left ul li a
{
    text-decoration:none;
    font-weight:bolder;
    font-size:120%;
    display:block;
    width:100%;
}

div.menu
{
    border-left: solid 1px #CCC;
    border-right: solid 1px #CCC;
    text-align:center;    
}

div.menu h3
{
    display:block;
    width:100%;
    border-bottom: solid 1px #CCC;
    padding-bottom: 5px;
}

.hideMenuTrigger, .showMenuTrigger
{
    width: 100%;
    text-align: center;
    display: block;
}

.hideMenuTrigger a img, .showMenuTrigger a img
{
    border:0;
}

Fairly simple, so I probably don’t need to explain too much.  The left div floats to the left and allows other content to flow around it.

Action Man!

The next thing to do was figure out how to hook up to click events.  This was surprisingly straight forward after about 2 minutes reading on the jQuery documentation site.  Specifically, this lovely little page about ‘click(function)’.  The most tricky thing I found at first (being fairly new to CSS also), was how to select elements.  I found the Firebug add-on for FireFox invaluable for this at first, as you can inspect to DOM as jQuery sees it.

I ended up creating the following jQuery script:

   1:  $(document).ready(function() {

   2:   

   3:      $("div.showMenuTrigger").hide();

   4:   

   5:      $("div.hideMenuTrigger a img").click(function() {

   6:          $("div.menu").hide();//.slideUp("slow");

   7:          $("div.showMenuTrigger").toggle();

   8:          $("div.hideMenuTrigger").toggle();

   9:          return false;

  10:      });

  11:   

  12:      $("div.showMenuTrigger a img").click(function() {

  13:          $("div.menu").slideDown("fast");

  14:          $("div.showMenuTrigger").toggle();

  15:          $("div.hideMenuTrigger").toggle();

  16:          return false;

  17:      });

  18:  });

As you can see, its nice and small, but no doubt someone can suggest a better solution – I’m happy with it for a first stab.

I included line numbers so that I can try to explain things a little.  The first line deals with the document being loaded, and we do mean the document.  This is not waiting for all of the related images, purely the markup.

Line 3 hides the <div> containing the handle to show the menu, as by default is is already visible.

Starting at line 5 through to line 10, we have a function that responds to the handle to hide the menu (or more correctly, the image inside the handle) being clicked.  When this occurs we do three things:

1. Make the menu <div> hide
2. toggle the visibility of the showMenuTrigger <div>
3. toggle the visibility of the hideMenuTrigger <div>

The converse operation (lines 12 to 17) doe the opposite:

1. Make the menu <div> slide back down in to view
2. toggle the visibility of the showMenuTrigger <div>
3. toggle the visibility of the hideMenuTrigger <div>

You may note that I hade the menu <div> rather than sliding it up, this is because I seemed to be getting some errors with margins when sliding up an the text that was wrapping around the menu would not sit snugly where I wanted it to.

Summary

In summary, I’m marginally chuffed that I managed to learn something new here and even more so that it works OK in IE6!  I can see myself playing with a lot more of this stuff in the near future :)  Well, I hope so anyway!