CSS Horizontal Dropdown Navigation Menu

themekings.net 15 Jun 2012

by anilkamath87

HTML

<ul class="nav">
    <li class='prev'>P</li>
    <li class="container">
	<div class="dropdown"><a href="#1">Disposition</a>
    <ul>
	    <div><a href="#1.0">TBD Level 2</a></div>
		<div><a href="#1.1">TBD Level 2</a></div>        
    </ul>
    </div>
	<div class="dropdown"><a href="#2">Fahrgast</a>
	<ul>
		<div><a href="#2.1">divste</a></div>
		    <div class="dropdown"><a href="#2.2">Eigenschaften</a>
		    <ul>
			    <div><a href="#2.2.1">Mitgdivedschaft</a></div>
			    <div><a href="#2.2.2">Person</a></div>
			    <div class="dropdown"><a href="#2.2.3">Adressen</a>
			    <ul>
			    	<div><a href="#2.2.3.1">Wohnen</a></div>
			    	<div><a href="#2.2.3.2">Korrespondenz</a></div>
			    	<div><a href="#2.2.3.3">Rechnung</a></div>
			    </ul>
			</div>
		</ul>
		</div>
		<div><a href="#">Dauerauftrag</a></div>
		<div><a href="#">Abwesenheit</a></div>
	</ul>
	</div>
	<div class="dropdown"><a href="#3">OVI</a>
    <ul>
	    <div><a href="#3.0">TBD Level 2</a></div>
		<div><a href="#3.1">TBD Level 2</a></div>        
    </ul>
    </div>
	<div class="dropdown"><a href="#4">Fahrer</a>
    <ul>
	    <div><a href="#4.0">TBD Level 2</a></div>
		<div><a href="#4.1">TBD Level 2</a></div>        
    </ul>
    </div>
    </li>
	<li class="next">
        N
    </li>
</ul>
<h4>Betreffzeile</h4>
<p>Dies ist der Inhalt des Arbeitsbereiches. Es ist sehr wichtig, dass die Menu und Submenu vor dem Text erscheinen.</p>

CSS

/* Reference: themekings.net 15 Jun 2012 CSS Horizontal Dropdown Navigation Menu */
/* Some stylesheet reset */
.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

/* The main container class */
.nav {
	/* Layout and positioning */
	display: block;
	position: relative;
	height: 34px;
	width: 500px; 
	border-radius: 3px;
	border: 1px solid #c1c1c1;
	/* Background and effects */
	background: #eaeaea; /* Background for IE9 and older browsers */
	background: -webkit-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Chrome & Safari */
	background: -moz-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Firefox */
	background: -o-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Opera */
	background: -ms-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Internet Explorer 10 */
	box-shadow: inset 0 1px 0 #fff;
}

.nav>li {
	display: block;
	position: relative;
	float: left;
	margin: 0;
	padding: 0 1px 0 0;
}

.nav>li>div {
	display: block;
	position: relative;
	float: left;
	margin: 0;
	padding: 0 1px 0 0;
}



/* The main navigation links */
.nav>li>div>a {
	/* Layout */
	display: block;
	padding: 11px 20px;

	/* Typography */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #5c5c5c; /* #9a9a9a; */
	text-shadow: 0 1px 0 #fff;

	/* Effects */
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

/* The hover state of the navigation links */
.nav>li>a:hover, .nav>li:hover>a {
	background: #fff;
	background: rgba(255, 255, 255, .6);
	color: #999;
}

.nav>li:first-child>a {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.nav>.dropdown>a {
	padding-right: 26px;
}

/* The arrow indicating a dropdown menu */
.nav>.dropdown>a::after {
	 content: "";
	 position: absolute;
	 top: 14px;
	 right: 11px;
	 width: 4px;
	 height: 4px;
	 border-bottom: 1px...

JavaScript

var arr=['<div class="dropdown"><a href="#5">Fahrzeug</a>   <ul><div><a href="#5.0">TBD Level 2</a></div>','<div><a href="#5.1">TBD Level 2</a></div>  </ul>    </div>','<div class="dropdown"><a href="#6">Export</a>    </div>','<div class="dropdown"><a href="#7">Unterhalt</a></div>'];


function append(div){
    $div=$(div);
    $(".container>div:not(:hidden):last").hide();
    $(".container").prepend($div);
    $div.fadeIn(2000);
}



setTimeout(function(){append(arr[0]);},2000    );
setTimeout(function(){append(arr[1]);},4000    );
setTimeout(function(){append(arr[2]);},6000    );
setTimeout(function(){append(arr[3]);},8000    );