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

3 votes
Published on 19 Jan 2013