Ein Dropdown Menü mit YAML

Dropdown-Menüs findet man mittlerweile auf fast jeder Website. Sie helfen dabei, die zahlreichen Menüpunkte zu strukturieren und in die kleine Menüleiste zu bekommen. Immer größer werdende Menüs bleiben so übersichtlich und anschaulich.

Auf unserer Seite nutzen wir das CSS-Framework YAML 4. Daher ist dieses Tutorial für Nutzer gedacht, die ebenfalls YAML benutzen und auf ihrer Seite ein solches Menü einfügen möchten.

Beispiel















Wie wir das gemacht haben, möchten wir euch hier kurz erklären:

Zunächst muss über CSS eingestellt werden, dass die Container mit dem Inhalt auf der Seite überlappende Elemente zulassen.

.ym-wrapper div {
   overflow: visible;
}


Dann fügen wir das Menü in den "ym-hlist"-Container unserer HTML-Datei ein.
<ul id="menu">
   <li><a href="#">Punkt 1</a>
      <ul>
         <li><a href="#">Unterpunkt 1.1</a></li>
         <li><a href="#">Unterpunkt 1.2</a></li>
         <li><a href="#">Unterpunkt 1.3</a></li>
         <li><a href="#">Unterpunkt 1.4</a></li>
      </ul>
   </li>
   <li><a href="#">Punkt 2</a></li>
   <li><a href="#">Punkt 3</a>
      <ul>
         <li><a href="#">Unterpunkt 3.1</a></li>
         <li><a href="#">Unterpunkt 3.2</a></li>
         <li><a href="#">Unterpunkt 3.3</a></li>
      </ul>
   </li>
   <li><a href="#">Punkt 4</a></li>
</ul>


Zum Schluss wird in der CSS-Datei das Menü zum Dropdown-Menü gemacht und dieses dem Menüdesign angepasst.
#menu {
   list-style: none;
   font-weight: bold;
   float: left;
   position: relative;
   z-index: 5;
}

#menu li {
   float: left;
   position: relative;
   margin: 0;
}

#menu ul {
   list-style: none;
   position: absolute;
   left: -9999px;
   display: none;
   padding: 0;
   -webkit-border-bottom-right-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;

   border: 1px solid #7F7F7F;
   border-top: 1px solid black;
}

#menu ul li {
   padding: 0;	
}

#menu ul a {
   white-space: nowrap;
   clear: both;
   position: relative;
}

#menu li:hover ul { 
   left: 0;
   background-color: #C0C0C0;
   display: block;
}

#menu li:hover ul a { 
   text-decoration: none;
}

#menu li:hover ul li a:hover { 
   background: none repeat scroll 0 0 transparent;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   color: #FFFFFF;
}

#menu li:hover ul li {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   border-style: none;
}