Drop-Down Navigation für ilch

Eingetragen von Rock@wulf am Mi, 17. Jul 2013 - 10:18


Mit dieser Anleitung könnt ihr eine Drop-Down Navigation dir über as Adminmenü Navigation steuerbar ist erstellen.

Es wird Menüpunkt 2 benutzt

Features:

Drop-Down Navigation komplett in HTML und CSS
Einstellbar über die Navigation im Adminbereich
Sehr kurzes Script für beste Performance

Voraussetzung:

Kentnisset in HTML und CSS
Schwierigkeitsgrad Mittel

HTML - Teil:

<div id="nav">
 	<ul>
         {_list_menunr2@
         <li><span class="spacer"> </span></li>
         <li><a href="#" class="menu">%1</a>
             %2
         </li>
         }
 	</ul>
 </div>


CSS - Teil

#nav {
 	width:100%;
 }
 #nav ul {
     width: 100%;
 }
 #nav ul:after {
     clear: both;
     display: block;
     font-size: 0;
     height: 0;
     visibility: hidden;
 }
 #nav ul li {
     list-style: none;
     float:left;
 }
 #nav ul li a {
     text-decoration: none;
     color:#000;
 	display: block;
 	padding-right:10px;
 }
 #nav ul li a:hover {
 	color:#F00;
 }
 #nav ul li:hover > ul {
     visibility: visible;
 }
 #nav ul li ul{
     display: inline;
     visibility: hidden;
     position: absolute;
     padding:0px;
 }
 #nav ul li ul li{
     float: none;
 }
 #nav ul li ul li a:hover{
     color: #F00;
 }


Orginal Idee & Post von Boy83Ol