Quantcast
Channel: Ripper Design and Multimedia » Menu’s
Viewing all articles
Browse latest Browse all 10

CSS3: Simple Slideout Accordion Menu

0
0

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.

(Visited 414 times, 1 visits today)

Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images