Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

Background Slide In Menu

Author: Dynamic Drive

This CSS3 drop down menu positions its sub menus beneath their parent header to create an interesting effect when they are revealed. The sub menus slide in from underneath like an animated background, partially overlapping neighbouring menu headers  The end result is a drop down menu with a unique visual spin. We got our inspiration for this menu from the site TechStyle.

Background Slide In Menu works in all modern browsers on the desktop (for IE, that's IE9+), and is mobile friendly as well. On small screens, the menu expands to fill the entire width of the page so the links are easier to select using the finger.

Demo:

Some blank space added for demo

The CSS:

The HTML:

IMPORTANT: Notice in the HTML markup how the menu header links (those that lead to a drop down) use "javascript:vold(0)" as their "href" value. This is primarily to prevent touch screen devices from navigating to another page when the user taps on the header, instead of revealing a drop down menu.

Code Info

Rate this code:

Date Posted: 04/21/2017

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive