Your Customers are Mobile, you will be too …

In this tutorial we will show you how to create a simple accordion menu with submenu’s that expand out smoothly as someone mouses over the top of them. The simple animation we will be using is CSS3 with no javascript however it is supported by all the major browsers except for IE. With IE the menu will still work with all the same functionality it just won’t slide out smoothly. If someone mouses over a sub menu it will just appear, other browsers however it will look great.

This menu is pretty much the same as the Simple CSS accordion menu I did last week but has been tweaked up to include this animation. When Completed the menu will look like this:

CSS3: Simple Slideout Accordion Menu

As with any CSS/HTML menu we create we will start out with the HTML. An unordered list <UL> with each of our list links as a list item <LI>. Our submenus will be unordered lists embedded within those list item.

<div id="verticalmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Latest News</a> <ul> <li><a href="#">Today</a></li> <li><a href="#">Yesterday</a></li> <li><a href="#">This Week</a></li> </ul> </li> <li><a href="#">Products</a> <ul> <li><a href="#">Wordpress Templates</a></li> <li><a href="#">Joomla Templates</a></li> <li><a href="#">Drupal Templates</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Flash Advertising</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </div>

I have covered this many times in other tutorials so for now lets move onto the CSS.

First lets style up the menu, remove the list style and set the padding and margin to 0px (this removes the unwanted indent that the lists are still left with when you remove the list style.). I have given my menu a width and a border with nice border-radius. I have removed the text decoration from my anchors so my links dont have an underline under them.

#verticalmenu { width: 230px; font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-weight: bold; border: 1px solid #03F; border-radius: 10px; padding-right: 10px; padding-left: 10px; } #verticalmenu a { text-decoration: none; display: block; } #verticalmenu ul { list-style-type: none; margin: 0px; padding: 0px; }

Pretty standard menu so far. Lets give our link text their respective colors and heights. Now normally for a menu we would use display:block and display:none to hide an unhide our submenu items. Do not do this for this menu. Instead we are going to apply an opacity of zero to the <ul> tags of our submenus and a height of 0px to our ul li ul li a tags. This is how we will height our submenus. Display:block and display:none properties will destroy our animation, transition will not work with that property it will however work with opacity and height.

#verticalmenu ul li a { color: #03F; height: 20px; } #verticalmenu ul li ul { padding-right: 10px; padding-left: 15px; opacity: 0.0; } #verticalmenu ul li ul li { height: 0px; } #verticalmenu ul li ul li a { color: #09F; margin-left: 0px; padding: 0px; height: 0px; }

Ok now we got that going we now need to make our menu function.

#verticalmenu ul li a:hover { color: #900; } #verticalmenu ul li:hover ul { opacity:1.0; } #verticalmenu ul li:hover ul li { height:20px; }

Pretty easy and self explainitory. Our heights and opacity are now set to show when we hover over them. If we test it now the menu will work but it won’t slide out nicely like we want. We have to add our transition to 2 of the properties to make that work:

#verticalmenu ul li ul { padding-right: 10px; padding-left: 15px; opacity: 0.0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out } #verticalmenu ul li ul li { height: 0px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out -webkit-transition: all 0.5s ease-in-out }

Now our menu will slide out nicely in all browsers except for IE which will function like it did in the last section we tested.

Hope you enjoyed this and found it helpful. See you again soon.

11 Responses to CSS3: Simple Slideout Accordion Menu

  • Hi! Thanks a lot for the menu code! It’s very nice!

    I’d like to ask you about slightly different menu look:
    – I’d like sub-menus to be displayed on click, at the same height just next to the main menu items (that would make two columns: main items > sub-items).
    – I would like sub-menus to change if I click another main menu item.

    Sorry, I’m not so much into coding so I can’t figure out how to do it myself…
    I’ll be very grateful for your help!

  • Thanks Stephen, I’ve done that :)! I had to use a little of Javascript indeed, but it wasn’t so complicated though :)

  • Hi Stephen, Thanks for the Tutorial. It was great.

    There is one little thing though. You should ad a semicolon at the end of the line:

    -o-transition: all 0.5s ease-in-out;

    This will help the transitions work in Safari.

  • Hi! I really appreciate your code. It’s exactly what I’m trying to do. Having a bit of trouble implementing it though. When not hovered over, there is a large gap between menu labels for labels that have a submenu.
    And I can’t get the submenu list to space evenly, where I have the top level labels set at a margin of 3, that works well, other than for those with a submenu.

    Here’s my html and css. Can you see what I’ve got wrong or am missing?

    #verticalmenu { width: 217px; }
    #verticalmenu a { text-decoration: none; display: block; font-family:’ff-meta-sc-web-pro'; font-size: 21px; font-weight: normal; line-height:26px; padding-top: 3px; padding-bottom: 3px; font-weight:400; text-transform:lowercase; }
    #verticalmenu li {list-style-type: none; }
    #verticalmenu li a { color: white; background: #959595; margin: 3px; height: 26px; border: 1px; border-color: #959595; border-radius: 8px; -moz-border-radius: 8px; text-align:center;}
    #verticalmenu li ul { padding-right: 0px; padding-left: 0px; opacity: 0.0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out }
    #verticalmenu li ul li { height: 0px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out -webkit-transition: all 0.5s ease-in-out }
    #verticalmenu li ul li a { width: 210px; color: #959595; background: #000; font-family:’ff-meta-sc-web-pro'; font-size: 21px; font-weight: normal; line-height:26px; padding-top: 3px; padding-bottom: 3px; font-weight:400; text-transform:lowercase; }
    #verticalmenu li a:hover { color: orange; }
    #verticalmenu li:hover ul { opacity:1.0; }
    #verticalmenu li:hover ul li { height:26px; }

    • Sorry had to edit your post to get rid of the menu code as it wouldn’t display correctly in the post. (as a menu rather than the code itself)

      Looking at it your problems looks like it is in this line:
      #verticalmenu li ul li a { width: 210px; color: #959595; background: #000; font-family:’ff-meta-sc-web-pro’; font-size: 21px; font-weight: normal; line-height:26px; padding-top: 3px; padding-bottom: 3px; font-weight:400; text-transform:lowercase; }

      This section has a height, 26px from line height, 3px from padding on top and 3px from padding on the bottom. This is while the menu items are not being hovered. Even though it may be hidden it still has a height. So try adding height: 0px; to it see if this fixes your problem.

      • Hey thanks for the fast reply! I made that edit and it worked great. I’m just having one last issue. The problem is a top level label, underneath a label that has a submenu. As soon as I approach the lower label, the submenu of the label above opens up. It makes it so the label underneath is not accessible. Any thoughts? I’d love to email you a working demo if you’d be interested in seeing.

  • Thanks! This was what I was looking for.

    But I figured you have to add “overflow:hidden;” to #verticalmenu ul { } to make it work without problems with IE8 as well.

    #verticalmenu ul { list-style-type: none; margin: 0px; padding: 0px; overflow:hidden; }

  • Hey Stephen, I’ve got this on my site and it is working almost perfectly. I’m just having the issue of the drop down menu showing up too easily as the mouse approaches other labels. Could I email you the link of my test page to check it out?

  • Brad, I was having the same problem and did what “B S” says in his post right above your last one. It seemed to fix the problem perfectly.

    Also, thanks to Steven for posting this; it was extremely helpful!

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: