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!

34 thoughts on “Expanding/collapsing javascript menu”

  1. 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!

  2. 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.

  3. 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!

  4. Shin,

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

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

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

  7. 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.

  8. 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

  9. 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.

  10. 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

  11. 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}); }
    });

  12. 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!

  13. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *