Dynamic Drive CSS Library- Background Slide In Menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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:

<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">

<style>

.bgslidemenu {
    font: bold 16px 'Bitter', sans-serif; /* use google font */
    position: relative;
    width: 100%;
}

.bgslidemenu:after { /* clear menu */
    content: '';
    clear: both;
    display: block;
}

/* Top Level Menu */
.bgslidemenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    float: right; /* change to "left" to left align menu */
}

/* Top level list items */
.bgslidemenu ul li {
    position: relative;
    display: inline;
    margin-right: 20px; /* spacing between each top level menu item */
    float: left;
}

/* Top level menu items link style */
.bgslidemenu ul li a {
    display: block;
    position: relative;
    color: white;
    padding: 14px 10px;
    color: black;
    text-decoration: none;
}

.bgslidemenu ul li a:link, .bgslidemenu ul li a:visited {
    color: black;
}

/* Top level menu items link style on hover */
.bgslidemenu ul li:hover > a {
    color: purple !important;
}

/* LIs links with a sub UL style */
.bgslidemenu ul li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 25px;
}

/* LIs links with NO sub UL style */
.bgslidemenu ul li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 10px;
}

/* LIs links with a sub UL pseudo class (Add down arrow) */
.bgslidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: black;
    top: 50%;
    transform: translateY(-20%);
    right: 8px;
}

/* LIs links with NO sub UL pseudo class */
.bgslidemenu ul li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}

/* Sub ULs style */
.bgslidemenu ul li ul {
    position: absolute;
    left: -5000px;
    top: auto;
    opacity: 0;
    width: 200px; /* width of drop down menus */
    visibility: hidden;
    padding-top: 80px; /* Add large top padding to drop down menu */
    z-index: -1;
    background: #F3F3F3;
    transform: translateY(100px);
    -webkit-transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
}

/* Sub UL style on hover */
.bgslidemenu ul li:hover > ul {
    visibility: visible;
    left: -30px;
    transform: translateY(-80px); /* move drop down menu upwards (should be smaller than padding-top value above) */
    opacity: 1;
    -webkit-transition: opacity 1s, transform .5s;
    transition: opacity 1s, transform .5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.bgslidemenu ul li ul li {
    display: list-item;
    float: none;
    overflow: hidden;
}

/* Add animated line to sub menu item on Mouseover */
.bgslidemenu ul li ul li:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 5px;
    background: purple;
    left: 0;
    top: 50%;
    transform: translate3d(-100%, -50%, 0);
    transition: transform .3s;
}

.bgslidemenu ul ul li:hover:after {
    transform: translate3d(0, -50%, 0);
}

/* Sub Levels link style on hover and when active */
.bgslidemenu ul ul li:hover > a {
    color: purple !important;
}

/* Sub level menu links style */
.bgslidemenu ul li ul li a {
    font: normal 16px 'Bitter', sans-serif;
    padding: 10px;
    padding-left: 40px; /* Add left padding to sub menu links to accommodate animated line */
    position: relative;
    margin: 0;
}


/* ####### responsive layout CSS ####### */
@media (max-width: 700px) {
    /* 
			For mobile and screen browser windows
			Get Sub ULs to expand entire width of document and drop down
			Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
		*/

	.bgslidemenu ul {
        float: none;
    }

    .bgslidemenu ul li {
        position: relative;
        display: block;
        width: 100%;
    }

    .bgslidemenu ul li ul {
        width: 100%;
        position: relative;
        border-top: 2px solid #eee;
        /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
        display: none;
    }

    .bgslidemenu ul li:hover > ul {
        display: block;
        padding-top: 0;
        transform: none;
        z-index: 10000;
        left: 0 !important;
        top: auto;
    }

    .bgslidemenu ul ul li:hover > ul {
        left: 0 !important;
        top: auto;
    }
}

</style>

The HTML:

<div class="bgslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="javascript:vold(0)">Item 2</a>
  <ul>
	  <li><a href="#">Sub Item 1.1</a></li>
	  <li><a href="#">Sub Item 1.2</a></li>
	  <li><a href="#">Sub Item 1.3</a></li>
	  <li><a href="#">Sub Item 1.4</a></li>
	  <li><a href="#">Sub Item 1.2</a></li>
	  <li><a href="#">Sub Item 1.3</a></li>
	  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="javascript:vold(0)">Item 4</a>
  <ul>
	  <li><a href="#">Sub Item 3.1</a></li>
	  <li><a href="javascript:vold(0)">Sub Item 3.2</a></li>
  </ul>
</li>
<li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
</ul>
</div>

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