Pure CSS3 Hover Menu

19 Jan 2013 by Shingo Tamura
Pure CSS3 Hover Menu

Following on from my blog entry, Pure CSS Hover Menu, uploaded in 2009, this blog provides detailed instructions for the creation of an even cooler hover menu with CSS3. So, here it is...

Hover Menus Now Animate!

The menus now fade in as they slide down. These effects are created by setting the default value of certain CSS properties, and changing them on roll-over with the transition property in place.

Specifically, to achieve this you need to set the properties for: visibility, opacity, height, and transition, as shown in the CSS below:

(Note that, in the CSS example, I excluded browser/vendor specific properties such as -moz-transition, for simplicity. In the actual CSS file these properties are included.)

.hover-menu .menu {
    visibility: hidden;
    ...
    opacity: 0;
    ...
    height: 0;
    ...
    transition: all .3s linear;
}

To achieve the hover state, alter these properties as follows:

.hover-menu .trigger:hover .menu {
    visibility: visible;
    ...
    opacity: 1;
    ...
    height: 60px;
    ...
}

Utilising a minimalist approach, this is all you need to make it work. To make it more robust, however, read up on CSS3 transitions using visibility and delay.

Fewer Images Are Used

In fact, there's only one image used for the demo - the one for the background. This is all that is required. There are no images applied for the menu itself. I used CSS3 to make the menu look just like the previous version.

Gradient Row Highlight

Trigger element style

I created the highlight pointed in the picture purely with CSS3, utilising the following CSS:

.hover-menu .trigger:hover {
    background: #E1DBD4;
    background: -moz-linear-gradient(left, #ffffff 1%, #E0DAD3 7%, #E1DBD4 50%, #E0DAD3 94%, #ffffff 100%);
    background: -o-linear-gradient(left, #ffffff 1%, #E0DAD3 7%, #E1DBD4 50%, #E0DAD3 94%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ffffff), color-stop(7%,#E0DAD3), color-stop(50%,#E1DBD4), color-stop(94%,#E0DAD3), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(left, #ffffff 1%,#E0DAD3 7%,#E1DBD4 50%,#E0DAD3 94%,#ffffff 100%);
    background: -ms-linear-gradient(left, #ffffff 1%,#E0DAD3 7%,#E1DBD4 50%,#E0DAD3 94%,#ffffff 100%);
    background: linear-gradient(to right, #ffffff 1%,#E0DAD3 7%,#E1DBD4 50%,#E0DAD3 94%,#ffffff 100%);
}

Yes, it looks complicated, but I can't take credit for it. I didn't write this. It is easily accessible via the Ultimate CSS Gradient Generator from ColorZilla. I just copied and pasted the generated code to my CSS file. Simple!

Glassy Menu Frame

Menu frame style

To create the effect above, I used a mixture of border-radius, border, box-shadow and background-color using rgba, as follows (again, browser/vendor specific properties are excluded):

.hover-menu {
    border-radius: .5em;
    background-color: rgba(255, 255, 255, .25);
    border: solid 1px #484848;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.hover-menu .wrapper {
    border-radius: .5em;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: .25em;
}
.hover-menu ul {
    padding: 1em .5em;
    background-color: #fff;
    border-radius: .375em;
}

Feel free to download the demo and use it as you wish.

Compatibility

The demo works perfectly on Chrome, Firefox, and Safari. It also works adequately on IE7+.

Notes

I used IE HTML5 enabling script so that HTML5 will work on Firefox 2 and IE.

References

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

 
blog comments powered by Disqus

Related Blog Posts

  • Creating a purely CSS-driven hover menu using :hover.
  • Positioning elements using float and clear could be cumbersome to deal with. This tutorial will show you how to use them properly.
  • Learn how to create a horizontal menu with an unordered list, float and clear.