5202

ein Blog über technische Fragen zu Blogger

Wie erzeuge ich ein Dropdown Menü in Blogger?

von
Update: Ich habe inzwischen eine neue, verbesserte Version geschrieben - vielleicht ist es interessant für euch!

Mein Ziel war ein funktionierendes Dropdown Menü für Blogger mit reiner CSS und ohne Javascript zu erzeugen und heute gibt's die erste stabile Version davon. Ich bin kein professioneller Entwickler und das hier ist nur eine CSS Spielerei von mir, die _nicht_ in Steinzeit-Browsern wie IE6 funktionieren wird. Ich habe das Menü in allen moderne Browsern wie Opera, Safari, Chrome, FF & IE9 getestet und dort funktioniert es einwandfrei. Für den ganzen Rest - vor allem dem Schrott aus dem Hause Microsoft - übernehme ich keine Verantwortung; ich hab's dort nicht getestet und habe ehrlich gesagt auch keine Lust dazu - jeder kann heutzutage einen einigermassen modernen Browser benutzen und wer es nicht tut, sorry ....

--> HTML
Die HTML-Struktur des Dropdown Menüs ist eine ungeordnete Liste mit zwei Ebenen. Wie so etwas grundsätzlich ausschaut seht ihr hier:
<div>
  <ul>
    <li>#</li>
    <li>#
      <ul>
        <li>#</li>
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ul>
    </li>
    <li>#</li>
    <li>#
      <ul>
        <li>#</li>
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ul>
    </li>
    <li>#</li>
  </ul>
</div>
Zuerst einmal liegt das ganze Menü in einem <div> Container, d.h. die HTML starten mit einem öffnenden <div> Tag und endet mit einem schließenden </div> Tag. Die Liste selber beginnt mit einem <ul> Tag und endet mit einem </ul> Tag. Dazwischen liegen die Listenpunkte, die fangen mit einem - wie nicht anders zu erwarten - öffnenden <li> Tag an und enden mit einem schließenden </li> Tag. Soweit so simpel. Dort wo # steht, kommen später die Links in A-Elementen rein, ich hab's zwecks der Übersichtlichkeit das erst mal ausgelassen. Die 'Unterpunkte' die später zum Dropdown werden, liegen innerhalb eines <li> Tags und zwar so:
<li>
   <ul>
     <li>#</li>
   </ul>
</li>
So ein 'Unterpunkt' beginnt mit dem öffnende <li> Tag der oberen Ebene, dann kommt der 'Unterpunkt' innerhalb eines <ul> Tags und am Ende kommt der schließende </li> Tag. Das ist nicht wirklich schwer, man muss nur immer drauf achten das jeder öffnende Tag immer einen schließenden Tag bekommt und das die 'Unterpunkte' innerhalb eines <li></li> Tags liegen.

Im nächsten Schritt bekommen die einzelnen Tags für die zwei Ebenen Klassen zugeordnet, damit wird es später  mit der CSS leichter. Das ist nicht unbedingt notwendig, aber man kann so Ebene1 und Ebene2 leichter auseinanderhalten:
<div id="nav1">
  <ul class="level1">
    <li class="level1-li">#</li>
    <li class="level1-li">#
      <ul class="level2">
        <li>#</li>
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ul>
    </li>
    <li class="level1-li">#</li>
    <li class="level1-li">#
      <ul class="level2">
        <li>#</li>
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ul>
    </li>
    <li class="level1-li">#</li>
  </ul>
</div>
Im letzten Schritt kommen die A-Elemente dazu:
<div id="nav1">
<ul class="level1">
<li class="level1-li"><a href="http://www.blogger.com/">EBENE1</a></li>
<li class="level1-li"><a href="http://www.blogger.com/">EBENE1</a>
<ul class="level2">
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
</ul>
</li>
<li class="level1-li"><a href="http://www.abc.com/">EBENE1</a></li>
<li class="level1-li"><a href="http://www.abc.com/">EBENE1</a>
<ul class="level2">
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
<li><a href="http://www.abc.com/">EBENE2</a></li>
</ul>
</li>
<li class="level1-li"><a href="http://www.abc.com/">EBENE1</a></li>
</ul>
</div>
Diese HTML könnt ihr jetzt testweise in ein HTML/Java Gadget packen und unter den Header legen. Falls ihr das Menü verwenden wollt, müsst ihr später noch eure eigenen Links und Menüpunkte eintragen, das sollte selbsterklärend sein. Mit der HTML wäre's dann fertig!

CSS
Die CSS kommt im Vorlagen Designer in die Box "Benutzerspezifische CSS einfügen" - hier ist die ganze CSS als Block
#nav1 {
  width:100%; 
  background: green; 
  height:25px; 
  text-align:center;
  margin:0; 
  position:relative; 
  z-index:20;
}
#nav1 ul {
  display:inline-block;
  margin:0; 
  padding:0; 
  list-style:none; 
  white-space:nowrap; 
  text-align:left;
}
#nav1 li {
  margin:0; 
  padding:0; 
  list-style:none;
  clear:both;
  float:none;
}
#nav1 ul ul {
  position:absolute; 
  left:-9999px;
}
#nav1 ul li.level1-li {
  float:left; 
  display:block; 
  position:relative;
  clear:none;}
#nav1 ul {
  background:orange;
}
#nav1 ul ul{
  background:yellow;
}
#nav1 a {
  display:block; 
  font:normal 11px arial; 
  color:black; 
  line-height:25px; 
  text-decoration:none;
  padding: 0 15px 0 15px;
  outline:none;
}
#nav1 ul li:hover > ul {
  visibility:visible; 
  left:0; 
  top:25px;
}
#nav1 li:hover > a,
#nav1 ul li:hover > a {
  background-color:red;
}
#nav1 li a {
  border: none;
}
#nav1 ul, .tabs-outer {
  overflow:visible;
}
.main-outer {
  z-index:10;
}
.tabs-outer {
 z-index:11;
}
Das Dropdown Menü sieht dann in der Praxis so aus:



Um es einfacher zu machen, das Menü an den eigenen Blog anzupassen, habe ich den einzelnen Elementen eindeutige Farben gegeben. Damit könnt ihr sofort erkennen, wo was zu ändern ist. Ich erläutere das im einzelnen:

--> <div> Container
Das gesamte Menü liegt in einem <div> Container - Hintergrundfarbe ist 'green', d.h alles was in diesem Selektor #nav1 {...} steht bezieht sich auf diesen Container. Ohne text-align:center; steht das Menü linksbündig, mit margin:0 -10px; könnt ihr den Container noch weiter nach links schieben, mit background: transparent; lässt sich der Container transparent machen.

--> Ebene1
Die Farbe der oberste Ebene ist 'orange', das könnt ihr zu jeder beliebigen anderen Farbe ändern.

--> Ebene2
Die Farbe des Dropdowns ist 'yellow', das lässt sich ebenfalls zu jeder anderen Farbe ändern.

--> Hover
Der Hover, d.h. der Effekt der entsteht wenn ihr mit der Maus über ein Link fahrt, ist 'red'. Die Farbe könnt ihr ändern oder ihr könnt andere Hover Effekt in diesen Selektor schreiben: #nav1 li:hover > a, #nav1 ul li:hover > a {...}

--> Layout der Menüleiste
Texfarbe, Textgröße usw. des einzelnen Menüs wird vom Selektor #nav1 a { ... } bestimmt. Dort könnt ihr die Menüleiste auf das eigene Layout anpassen.

Aber: Die Positionierung des Dropdown ist absolut, d.h. wenn ihr die Größe der Leiste ändert - etwa durch ein andere Schriftgröße - müsst ihr anschließend den Startpunkt des Dropdowns anpassen und zwar hier:
#nav1 ul li:hover > ul {
  visibility:visible; 
  left:0; 
  top:25px;
}
Mit dem Wert top:25px; so lange rum probieren, bis zwischen der Menüleiste und dem Dropdown keine weiße Linie mehr zu erkennen ist, dann passt es genau. Die Leiste wird in allen Browsern pixelgenau dargestellt, solange ihr nur px als Einheit benützt. Die Blogger Vorlagen verwenden gerne em als Einheit und ihr könnt nicht px und em mischen, dann ist die Darstellung des Dropdowns in manchen Browsern um ein Punkt falsch.

Als Beispiel die gleiche Menüleiste wie oben, nur mit a bisserl anderer CSS



Hier die CSS dazu:
#nav1 {
  width:100%; 
  background: transparent; 
  height:25px; 
  text-align:center;
  margin:0; 
  position:relative; 
  z-index:20;
}
#nav1 ul {
  display:inline-block;
  margin:0; 
  padding:0; 
  list-style:none; 
  white-space:nowrap; 
  text-align:left;
}
#nav1 li {
  margin:0; 
  padding:0; 
  list-style:none;
  clear:both;
  float:none;
}
#nav1 ul ul {
  position:absolute; 
  left:-9999px;
}
#nav1 ul li.level1-li {
  float:left; 
  display:block; 
  position:relative;
  clear:none;}
#nav1 ul {
  background:#EEEEEE;
}
#nav1 ul ul{
  background:#EEEEEE;
}
#nav1 a {
  display:block; 
  font:normal 14px Georgia;
  font-weight: bold;
  color:#444444; 
  color:black; 
  line-height:25px; 
  text-decoration:none;
  padding: 0 14px 0 21px;
  outline:none;
}
#nav1 ul li:hover > ul {
  visibility:visible; 
  left:0; 
  top:41px;
}
#nav1 li:hover > a,
#nav1 ul li:hover > a {
  color:#ffffff;
  background-color:#676767;
}
#nav1 li a {
  border: none;
}
#nav1 ul, .tabs-outer {
  overflow:visible;
}
.main-outer {
  z-index:10;
}
.tabs-outer {
 z-index:11;
}