Expanding/collapsing javascript menu

In this post I’ll show you how to create an expanding/collapsing menu like Slashdot left menu used to be, using the YUI library and Dav Glass YUI effects widget.


The HTML markup for our menu is :

<div id="menu">
			<h1 id="menu-title">Menu</h1>
			<div id="menu-links">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>CSS</li>
				</ul>
			</div>
		</div>

We use 2 div tags, one for holding the menu itself and the other one which contains the links in an unordered list and 1 h1 tag for the title.

The CSS for the menu :

/** width of the menu */
#menu{
				width: 180px;
			}
			

/** the main title */
			#menu h1{
				line-height: 35px;
				color: #fff;
				/** simulate link */
				cursor: pointer;
				font-weight: bold;
				/** background image will change when menu expands/collapses */
				background: #666 url(images/block-arrow-expanded.gif) no-repeat scroll 30px 13px;
			}
			
/** the links */
			#menu-links li{
				line-height: 35px;
				border-bottom:1px solid #ddd;
				background-color: #eee;
			}

Please pay attention to the background for the #menu h1. It contains the image, which will change when the menu collapses or expands. When the menu collapses we’ll be using the block-arrow-collapsed.gif image and when the menu expands we’ll be using the block-arrow-expanded.gif image. You can find the images in the sample demo file in the images directory.

To do the collapsing/expanding effects, we need to include the following javascript files beforehand :

<!-- js -->
<script type="text/javascript"  src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/animation/animation-min.js"></script> 
<script type="text/javascript" src="js/tools-min.js"></script>
<script type="text/javascript" src="js/effects-min.js"></script>

We use Dav Glass YAHOO.Tools package and his effects widget along with yahoo-dom-event-animation aggregate file which are hosted on Yahoo servers.

Finally the javascript to do the magical stuff goes like that :

<script type="text/javascript">
			YAHOO.util.Event.addListener('menu-title', 'click', function(){
				if(YAHOO.util.Dom.getStyle('menu-links', 'display') == 'block'){
					new YAHOO.widget.Effects.BlindUp('menu-links', {seconds: 0.2});
					YAHOO.util.Dom.setStyle('menu-title', 'background-image', 'url(images/block-arrow-collapsed.gif)');
				}
				else{
					new YAHOO.widget.Effects.BlindDown('menu-links', {seconds: 0.2});
					YAHOO.util.Dom.setStyle('menu-title', 'background-image', 'url(images/block-arrow-expanded.gif)');
				}
			});
		</script>

In line 3 of the above listing, we wait when the user clicks on the menu-title container and we check the display attribute of our links. If the links are not currently displayed then we display them by using Dav’s BlindDown effect with a duration of 0.2 seconds ;-).

new YAHOO.widget.Effects.BlindDown('menu-links', {seconds: 0.2});

We also change the background image for the menu title by using the YAHOO.util.Dom.setStyle method:


YAHOO.util.Dom.setStyle('menu-title', 'background-image', 'url(images/block-arrow-expanded.gif)');

If the links are visible then we do the contrary, i.e we use the BlindUp effect and use the collapsed gif as background image.

Be Sociable, Share!

Comments (31)

  1. 5:06 am, July 18, 2008vijayan  / Reply

    Rien compris!!!! Merci quand meme si t’as fait un truc sympa…mais vraiment…rien capté !!!!

  2. 5:30 am, July 18, 2008asvin  / Reply

    o moins tone essaye compran ;-)

  3. 6:46 am, July 20, 2008Dav Glass  / Reply

    Nice article!!

  4. 9:43 pm, July 20, 2008asvin  / Reply

    thanks Dav

  5. 7:03 pm, August 11, 2008shinshuri  / Reply

    Dave:

    Is it possible to create the same menu effect using the tag rather than the and tags?

    Thanks!

  6. 7:04 pm, August 11, 2008shinshuri  / Reply

    Dave, Ok my last comment dis not post correctly.

    I was asking if I could create the menu using a DIV tag rather than the UL and il tags.

    Thanks!

  7. 10:13 pm, August 11, 2008asvin  / Reply

    Shinshuri,

    In fact, it’s Asvin not Dav. ;-) Yes, you can use DIV tags instead of the list. Makes no difference, it should work no problem, you’ll just have to modify the stylesheet. Let me know if you want a helping hand.

  8. 10:18 pm, August 11, 2008shinshuri  / Reply

    Hey thanks a bunch. I’ll let you know if I do need help.

  9. 3:04 am, August 12, 2008shinshuri  / Reply

    Asvin:

    I think I’m gonna need some help on trying to implement this expand and collapse method in my code using the DIV tag instead of the List tags. I’d like to take you up on the offer to help me.

    Also, once the .js file is implemented will there be issues of having to access Yahoo’s server to run this in the client internal to my organization?

    Let me know Thanks!

  10. 10:41 pm, August 12, 2008ShinShuri  / Reply

    Hi Asvin:

    Can you help me with coding the DIV tag in the expand/collapse menu? Or maybe entertain some questions, etc.

    Thanks,

    Shin

  11. 10:49 pm, August 12, 2008asvin  / Reply

    Shin,

    Sure will help you, just give me till tomorrow, i’am overloaded at work ;-)
    Don’t worry will help u

  12. 8:42 pm, August 13, 2008asvin  / Reply

    Shin,

    check out this demo which doesn’t use any LI :
    http://htmlblog.net/demo/yui-menu-slashdot/div.html

    Concerning including the yahoo libraries, no problem, you can download them and extract them to your internal web server.
    Download it here :
    http://sourceforge.net/project/downloading.php?group_id=165715&filename=yui_2.5.2.zip

    Let me know if it’s OK for you.

  13. 12:04 pm, August 23, 2008Prashant Raju  / Reply

    When you double click on the arrow the div doesn’t appear – it may be a bug and the only fix is to refresh.

  14. 8:23 am, August 25, 2008Prashant Raju  / Reply

    Why did you not approve my comment about the bug?

  15. 9:31 am, August 25, 2008asvin  / Reply

    Yeah seems like a bug, will try to correct it ;-) was overloaded with spam comments over the weekend, Akismet didn’t detect them. ;-)

  16. 10:35 am, August 25, 2008asvin  / Reply

    Prashant

    I’ve decreased the number of seconds for the blind effects and it seems ok, it’s an ugly hack but it seems ok though.

  17. 7:55 pm, August 27, 2008marcell  / Reply

    Nice Thx

  18. 7:32 pm, August 28, 2008SergiuGothic  / Reply

    hello, great tutorial, but when i enter the page, menu is espanded, how i can make to be collapsed?

  19. 2:20 pm, August 29, 2008asvin  / Reply

    thanks Sergiu,
    If you want the menu to be collapsed after page load, you can add a listener which calls the function after page load. You must modify the javascript to this :

    var updateMenu = function(){
    if(YAHOO.util.Dom.getStyle(‘menu-links’, ‘display’) == ‘block’){
    new YAHOO.widget.Effects.BlindUp(‘menu-links’, {seconds: 0.01});
    YAHOO.util.Dom.setStyle(‘menu-title’, ‘background-image’, ‘url(images/block-arrow-collapsed.gif)’);
    }
    else{
    new YAHOO.widget.Effects.BlindDown(‘menu-links’, {seconds: 0.01});
    YAHOO.util.Dom.setStyle(‘menu-title’, ‘background-image’, ‘url(images/block-arrow-expanded.gif)’);
    }
    };

    YAHOO.util.Event.addListener(‘menu-title’, ‘click’, updateMenu);
    YAHOO.util.Event.addListener(window, ‘load’, updateMenu);

    Check out this link for demo :
    http://htmlblog.net/demo/yui-menu-slashdot/folded.html

  20. 5:04 pm, August 29, 2008SergiuGothic  / Reply

    thank you a lot, asvin, it works now :)

  21. 3:42 pm, August 30, 2008asvin  / Reply

    no problem Sergiu, my pleasure ;-)

  22. 4:49 pm, September 15, 2008soman  / Reply

    Hi

    thanks for this. I m noob in web design field. It will help me.

    thanks

  23. 11:20 pm, October 2, 2008david  / Reply

    This is great js. Could you help me out on the most efficient way to impliment more than one of these menus on a single page though? Right now everything relies on ID tags and a repeated javascript code with the new id tag stuck in there each time. I’m new to js, so I’m wondering if there is a better way of having one lump code that can determine which one is being clicked and expand that instead of needing a new function for each menu.

  24. 1:44 pm, October 9, 2008asvin  / Reply

    Hi David,
    Don’t worry I haven’t forgotten you, I’am kinda busy these days with my motherboard fried at home, connection problems, will help you

  25. 3:31 pm, December 1, 2008Jesse  / Reply

    Thanks asvin, works great :) just hope there’s no super humans using my site that click faster than 0.1 seconds.

    David, I simply added a second function in the html page and labeled my second group as id=”menu-title2″ and id=”menu-links2″.

    replace this with the old

    YAHOO.util.Event.addListener(‘menu-title’, ‘click’, function(){
    if(YAHOO.util.Dom.getStyle(‘menu-links’, ‘display’) == ‘block’){
    new YAHOO.widget.Effects.BlindUp(‘menu-links’, {seconds: 0.1});
    } else{ new YAHOO.widget.Effects.BlindDown(‘menu-links’, {seconds: 0.1}); }
    });
    YAHOO.util.Event.addListener(‘menu-title2′, ‘click’, function(){
    if(YAHOO.util.Dom.getStyle(‘menu-links2′, ‘display’) == ‘block’){
    new YAHOO.widget.Effects.BlindUp(‘menu-links2′, {seconds: 0.1});
    } else{ new YAHOO.widget.Effects.BlindDown(‘menu-links2′, {seconds: 0.1}); }
    });

  26. 5:05 pm, December 1, 2008Sukdev Garai  / Reply

    It is nice and helpfull example.

  27. 11:34 am, January 16, 2009zap  / Reply

    Hey,

    Thanks so much! This will really help me in my project..

    One more thing…

    ..I totally have no idea how to do it but I am hoping you could help me on how to create search engines..

    please mail me.. thx!

  28. 5:20 pm, February 24, 2009Salsan Jose  / Reply

    It seems good.
    I was looking a menu like this.
    Thank you.

  29. 6:20 am, July 3, 2009Oleh  / Reply

    To say the true, I’m disappointed because of last hour was a waste of time. I was trying to put this menu to work. Even it was not ready to just include to existing website because of many reasons including using such a general name as “menu” for IDs and CSS that just kills all existing design, in the end I got final disappointment. It does not allow to have multiple top menu items? Unbelievably hard, non-working solution.

  30. 8:34 am, July 7, 2009Hammad  / Reply

    Awesome code, thanks for sharing.

  31. 11:48 am, May 25, 2010itniche  / Reply

    awesome stuff.. please post more

Leave a Reply

Allowed Tags - You may use these HTML tags and attributes in your comment.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pingbacks (3)

  1. 4:22 am, March 2, 2009Favicon of solrhack.wordpress.comone bad apple « Solrhack