/index

Ettudis (n) A graphic site offering freebies ranging from website designs, tumblr themes to textures and other graphic resources.

about
designer
contact

terms of use

content
resources

links
sitemap

tagboard

heart(s)

CSS smooth drop-down menu

Learn how to code a smooth drop-down menu using only CSS! This tutorial requires you to have a basic knowledge of HTML and CSS. This effect works for Safari, Mozilla Firefox, Google Chrome and Opera.


The following is a live example of what we’re going to code today:

So first, we’re going to look at the HTML. To create this, we’ll need three div layers, and we will id them (class works too). One to contain the other two layers. The other will contain the visible label “content” and the other will contain the invisible-until-you-hover labels “artfolio, designs, icons, etc etc”. The set up will look something like this:
<div id="container">

<div id="visible_label" align="center"><a title="hover for more">content</a></div>

<div id="invisible_label">
<a href="http://google.com">google</a>
<a href="http://yahoo.com">yahoo</a>
<a href="http://msn.com">msn</a>
</div>
</div>

Notice how the a tag for “content” does not have a href attribute and only has a title attribute. That is because I do want that label to direct people anywhere so I did not specify a URL. However, by giving it a title, when people hover over it with a mouse, a pop-up smaller label (that states “hover for more”) will appear.

Okay, now that we have that set up, we can use the CSS to dictate what we want the HTML to do. #container is responsible for positioning the menu and doing the drop-down action. We will be using the transition, overflow and height properties to specify the drop-down action. What happens is that by using the :hover in the CSS, we can direct the HTML to reveal the invisible_label layer when the mouse hovers over the layer.

#container {
width:150px;
height:16px;
overflow:hidden;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease
}

#container:hover{
height: 216px;
}

For #container
width is how wide you want your menu to be.
height is how tall you want your visible label to be (ONLY!) My “content” label has a line-height of 16px so ideally, the height of the #container should be the height of your visible label ONLY. This is very important! I can’t tell you what height it has to be, you need to figure out yourself by fiddling with the height until you have the right number of pixels.
overflow must be “hidden” otherwise, the menu will not work! Basically, this selector make sures that only the visible_label layer is visible when the mouse is not hovering over it.
-webkit-transition etc etc is the transition which allows the menu to drop-down smoothly. I have explained this in my other tutorial but I’ll just do a quick recap. Basically, those properties and values are written in shorthand because it’s much simpler and clean to look at. -webkit-transition is for safari, google chrome while -moz-transition is for mozilla firefox and -o-transition is for opera. There are 3 parts to the selector. The first (“all”) is the property. The second (“2s”) is the duration and the third (“ease”) is the timing function.

transition-property – the values can be either none or all. “None” means there will be no transition and “all” means that there will be a transition.

transition-duration – the value (in seconds) will specify how long the transition will take. If you want a slow transition, use a larger value (ex: 1s) but if you want a quicker transition, use a smaller value (ex: 0.5s)

transition-timing-function – this property specifies how the animation will proceed over time. There are 6 values for this: linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier(x1, y1, x2, y2). We’re only going to look at the first 5 values because they’re the most basic, plus cubic-bezier is a bit difficult to explain.

  • linear – even speed throughout the transition
  • ease – starts out slow, speeds up, then slowly stops
  • ease-in – starts out slowest, then speeds up and stops
  • ease-out – starts out fast, then slows down and stops
  • ease-in-out – starts out slow, then speeds up and stops (slightly faster than “ease-in”)

For #container:hover

height should be the height of your invisible_label layer. By specifying this, when your mouse hovers over the div layer, it will drop-down to reveal the invisible_label layer.

Now, the #visible_label is the styling of your labels.

#visible_label a {
font: 9px/16px Georgia, "Times New Roman", Times, serif;
text-align: center;
background-color: #333333;
color: #F8F8F8;
width: 150px;
display: block;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease
}

Moving on, we can style the #invisible_label

#invisible_label a{
font: 9px/16px Georgia, "Times New Roman", Times, serif;
text-align: center;
background-color: #333333;
color: #f8f8f8;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
display:block;
padding:3px;
}

#invisible_label a:hover{
background-color: #f8f8f8;
color: #333333;
}

Here, I have included :hover for the a tag (a:hover) so when you hover over the links, it will change to a different style. And using the transition property (for the a tag, #invisible_label a), I can make it so that the hover effect is smooth and delays for a couple of seconds.

And ta-da! That’s all there is to it. Now, this did take a lot of time for me to figure out and write the tutorial, so if you could kindly credit me in a credits page (or something of the sort), that would be lovely. This pretty much goes for all tutorials.

15 Comments »

  1. Comment by Virginie — August 19, 2011 @ 11:38 am

    Are you sure the code is right ? It doesn’t work on my themes. It works like this :

    content
    google yahoo msn

    As if there weren’t a “hidden” in the css or something like this.
    Maybe something is missing (like a script, no ?).
    I did everything you said.

  2. Comment by ans — September 16, 2011 @ 1:25 pm

    Hi Virginie, the codes are right. There’s no script for it. Before today, wordpress kept reformatting my quotations (which makes copy and pasting the codes, HTML unfriendly) but I’ve figured out a way to do it so now, you can just copy and paste the codes.

  3. Comment by ena — September 22, 2011 @ 2:42 am

    thanks for this gread tutorial 😀
    Is there a way the hover part laysers over the other parts… so it don’zt goes down if you hover? beacuase that looks very silly, where I placed my navigation (: but looks great though

  4. Comment by lena — October 1, 2011 @ 3:31 pm

    Hey ans, I love this tutorial but I was using it for a new layout I’m going to use and I wanted to use the dropdown menu 4 times in a row but, when ever I rollover the first one, the other 3 go down it. Do you thinkk you can help me?

  5. Comment by Lenny — January 21, 2012 @ 12:10 am

    Is it necessary to clear the whole content of the html and paste the given html above?

  6. Comment by Lenny — January 21, 2012 @ 12:12 am

    Is it necessary to clear the entire html and replace it with the html above?

  7. Comment by ans — February 16, 2012 @ 2:27 am

    Hi Lenny, no you do not. You can just enter the html wherever you want to place the drop-down menu.

  8. Comment by Maria — February 26, 2012 @ 3:30 am

    Thank you so much for the codes! But now I had to adjust the width because it too small.

  9. Comment by erin — July 9, 2012 @ 3:18 pm

    hi! this is an amazing code! it works perfectly, but is there a way to make the links like pictures? i want to link a picture and place it on the slide down menu, but whenever i do that, it either doesn’t show up, or only the first picture will show up. is there a way to fix this?

  10. Comment by Sei — April 5, 2013 @ 3:54 pm

    Thanks ! It worked !

  11. Comment by brenda — June 15, 2013 @ 3:44 pm

    How do you put them side by side?

  12. Trackback by professional resume service kelowna — October 30, 2014 @ 9:45 pm

    professional resume service kelowna…

    v.22 Ettudis // » CSS smooth drop-down menu…

  13. Comment by alexanderwmsq.tumblr.com — December 22, 2014 @ 4:40 am

    You’re so awesome! I don’t believe I’ve read through a single
    thing like that before. So wonderful to discover someone with a few unique thoughts on this subject matter.
    Seriously.. many thanks for starting this up.
    This web site is one thing that is needed on the internet, someone with a bit
    of originality!

  14. Comment by gynecomastia in boys — January 16, 2015 @ 3:47 pm

    However, this leaves a scar, but in certain situations, the
    long part of the scar can be avoided. Gynecomastia is the enlargement of the mammary glands in males.

    Generally correct gynecomastia will be brought on by hormonal imbalance
    in the body the place that the excess estrogen stage can be above the actual androgen hormone or testosterone.

  15. Comment by Stan — January 18, 2017 @ 3:39 am

    This is very helpful! I’ve been trying to find this specific type of dropbox. Thank you!

RSS feed for comments on this post. TrackBack URL

Leave a comment

*

15 Comments