Home
 

03

Apr

10

jQuery Expanding Menu Plugin

Attached Files


ExpandingMenu.zip(3.5 KB)

Demo >>

Overview

Having looked around for a simple expanding menu and finding nothing I liked, I decided to make my own using the fantastic jQuery javascript framework.

jQuery is a great way to add another layer of usability to a site and give it some flare. There is so much good about jQuery that I won't go into it here, but to summarise it's fast, easy to use and x-browser compatible. It also has great documentation and a rich set of tutorials, all found at jquery.com.

It pretty much does what it says on the tin, but hopefully you will find it elegant and easy to implement.

Usage

Note. these instructions are for a static site, a tutorial on implementing this menu in SilverStripe will follow shortly.

To get the menu working all you need to do is link the relevant files, add the initialisation code and then ensure your HTML markup is correct. So first add this to the bottom of your page, just before the </body> tag.

You will notice that I am using Google's AJAX library to link to jQuery. This is a good idea for several reasons outlined in this post on Encosia. It would still work just as well having your own hosted jQuery library which you can download from the jQuery site.

There are a few variables you can set; speed, colorFade, colorOpen, colorClosed and event. Here is a quick explanation of each:

  • Speed ("Fast", "Slow" or a value in milliseconds such as 1000) The speed at which the menu expands.
  • colorFade (true, false) Enables or disables the color fading of the holder link as the menu expands. If false then colorOpen and colorClosed are ignored and the links will be styled by their CSS styles.
  • colorOpen (hex color value such as #000000) The color of the holder link when the menu is open.
  • colorClosed (hex color value such as #000000) The color of the holder link when the menu is closed.
  • event (any event, such as "click" or "mouseover") The event that triggers the menu to expand.

Then you simply need to create a set of nested <ul>s looking something like this:

If you want to have any of the sections open at the start simply add the class "open" to the holder link. This class is added to the holder links each time their section is expanded allowing you to style the open and closed states of the menu.

You may also want to hide the section links initially by adding ul ul {display:none} to your CSS so that they do not appear then disappear as the page loads. However the downside to this is that the section links will not be accessible if javascript is disabled.

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

Aram is a web designer/developer running London based agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Comments (10)

  • has anyone been successful in implementing this solution into ss - i've been trying with no success...

    Posted by ignacio rodriguez, 20/05/2010 7:53am (2 months ago)

  • Is there a simple way to modify this menu so that only one section can be open at the a time? i.e. clicking a 2nd section would close the first and open the second at the same time?
    Thanks!

    Posted by Luke, 04/02/2010 5:26pm (6 months ago)

  • Hi Aram. Like the way your script looks and works - was wondering if you have any further information on integrating it with SilverStripe navigation through the CMS ("tutorial to follow")?

    Posted by mike, 20/01/2010 9:18pm (6 months ago)

  • Thanks to Aram and specially to Dave Berry.
    Used this to include like toggle containers in site content and works like a charme.

    Posted by mathiasmex, 29/12/2009 2:32pm (7 months ago)

  • I have done this with several silverstripe sites that I have done. Its actually quite easy.

    The two js files in the zip file put into your /mysite/javascript folder
    inside that same folder create a new js file (I called mine expandCustom.js) and put the following in it:
    jQuery(document).ready(function() {

    jQuery.noConflict();

    jQuery('.holder').ExpandingMenu({
    speed: "slow",
    colorFade : false,
    colorClosed: "#5888a6",
    colorOpen: "#5888a6",
    event : "click"
    });
    });

    /mysite/code/Page.php add the following includes
    Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"); // you will need this line if you haven't included jquery before
    Requirements::javascript("mysite/javascript/jquery.color.fade.js");
    Requirements::javascript("mysite/javascript/jquery.expanding.menu.js");
    Requirements::javascript("mysite/javascript/expandCustom.js");

    then on the necessary ss page(s) use your typical un-ordered lists, here is mine:
    <ul id="RulesList">
    <% control ArchiveNews %>
    <li><a class="holder" id="Section{$Pos}" href="#">$Date.Format(F) $Date.Year</a>
    <ul class="bobo">
    <% control Courses %>
    <li class="extNews ruleContent"><a href="$ExternalLink" title="Go to $ExternalLink" class="$LinkingMode levela" target="_blank"><span><em>$MenuTitle.XML</em></span></a></li>
    <% end_control %>
    </ul>
    </li>
    <% end_control %>
    </ul>
    the id="Section{$Pos} allows the jquery to see unique ids and thus the expanding menu will work.

    Posted by Dave Berry, 07/12/2009 4:19pm (8 months ago)

  • Hi Luke

    Just swap all the '$' signs for 'jQuery' that should do it.

    Aram

    Posted by aram, 03/12/2009 6:27pm (8 months ago)

  • I discovered why it was not working... it conflicts with prototype. Do you know of a way to make the two co-exist happily?

    Posted by Luke, 03/12/2009 2:36pm (8 months ago)

  • When I use this code I get the firebug error \"$(document).ready is not a function\" on the first line of code. Any ideas why this might be? I will happily contribute directions for implementing this through SilverStripe if I figure it out.

    Posted by Luke, 03/12/2009 11:03am (8 months ago)

  • Thank you for this manual!. I am waiting for your tutorial on implementing this menu in SilverStripe. I see some areas on my hp where I can use it.
    More of the jQuery stuff please!

    Posted by ConnyLo, 23/10/2009 3:53am (9 months ago)

  • I hope your still planning to make a SilverStripe tutorial on JQuery Aram??

    Cos i'm completely stuck using the damn thing

    Posted by Chris, 02/08/2009 1:39pm (12 months ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment