5202

ein Blog über technische Fragen zu Blogger

Blogger: Drop-Down Menü [neue Version!]

von

Update 27.5.2014! Funktioniert jetzt in allen Blogger Layouts - auch in Awesome!


Neulich hatte ich ein nettes Gespräch mit Leserin superhero-film-news, wo sich herausgestellt hat, dass sie meinen alten Drop-Down-Post um eine dritte Ebene erweitert hat - Hut ab!

Dankenswerterweise stellt sie diese Erweiterung zu Verfügung und ich habe mir gedacht, bei der Gelegenheit könnte ich das Menü komplett überarbeiten. Also: Noch mal Danke an superhero-film-news für die Arbeit an der dritten Ebene!

Außerdem habe ich hier in der neuen Version Probleme mit der Blogger-Lightbox beseitigt, die HTML wesentlich vereinfacht, die CSS teilweise neu und für das Drop Down Menü eine Erweiterung des Blogger Vorlagen Designers ganz neu geschrieben

Das Dropdown kann ab dieser Version direkt im Vorlagen Designer angepasst werden.

HTML

Neu ist, die HTML kommt jetzt ohne zusätzlichen Klassen aus - ich gebe schematisch den Aufbau der einzelnen Ebenen:
Ebene eins
<div id="nav1">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>
Die Grundstruktur der ersten Ebene ist eine unsortierte Liste - rot markiert sind die Listenelemente, in die die zweite Ebene eingebaut wird.
Ebene zwei
Die Ebene ist ebenfalls eine unsortierte Liste - blau markiert ist das Listenelemente für die dritte Ebene.

Beachtet wie die zweite Ebene innerhalb des Listenelements liegt!
<div id="nav1">
 <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&g
Ebene drei
Die dritte Ebene ist - was wohl? Eben, auch eine unsortierte Liste. Wichtig ist, dass die neuen Ebenen innerhalb eines Listenelements liegen.
<div id="nav1">
 <ul>
  <li></li>
  <li>
   <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </li>
  <li></li>
  <li>
   <ul>
    <li></li>
    <li>
     <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
    <li></li>
    <li></li>
   </ul>
  </li>
  <li></li>
 </ul>
</div&g
Zusammenfassung
In die Listenpunkte kommen die einzelnen Ankerelemente nach unterem Schema - ich denke das ist [relativ] klar.

Statt des 'Leerzeichens' "#" kommen die URL's von euren Links rein ... bis auf die 'Drop' Elemente, die bleiben 'leer', ansonsten käme es bei Klicks auf diese Elemente zu Fehlaufrufen.
<div id="nav1">
 <ul>
  <li><a href="#">EBENE1</a></li>
  <li><a href="">EBENE1</a>
   <ul>
    <li><a href="#">EBENE2</a></li>
    <li><a href="#">EBENE2</a></li>
    <li><a href="#">EBENE2</a></li>
    <li><a href="#">EBENE2</a></li>
   </ul>
  </li>
  <li><a href="#">EBENE1</a></li>
   <li><a href="#">EBENE1</a>
    <ul>
     <li><a href="#">EBENE2</a></li>
     <li><a href="#">EBENE2</a>
      <ul>
       <li><a href="#">EBENE3</a></li>
       <li><a href="#">EBENE3</a></li>
       <li><a href="#">EBENE3</a></li>
       <li><a href="#">EBENE3</a></li>
      </ul>
     </li>
     <li><a href="#">EBENE2</a></li>
     <li><a href="#">EBENE2</a></li>
    </ul>
   </li>
  <li><a href="#">EBENE1</a></li>
 </ul>
</div>
Wenn ihr mit eurer HTML fertig seit, packt ihr alles zusammen in ein HTML/Java Gadget und legt es _unter_ den Header - fertig!

CSS

Zweiter Schritt - ihr sucht in eurem HTML diese Stelle:
]]></b:skin>
Direkt _darüber_ setzt ihr die CSS ein:
#nav1 {
    width: 100%;
    background: transparent;
    height: 45px;
    margin: 0;
    position: relative;
    z-index: 10;
}
  #nav1 > ul {
    height: 100%;
  }
    #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 a {
        display: block;
        font: $(drop.font);
        color: $(drop.text.color);
        line-height: 25px;
        text-decoration: none;
        padding: 10px 15px 10px 15px;
        outline: none;
    }
    #nav1 ul ul {
        position: absolute;
        left: -9999px;
    }
    #nav1 ul > li {
        height: 100%;
        float: left;
        display: block;
        position: relative;
        clear: none;
    }
    #nav1 ul ul > li {
        display: block;
        float: none;
    }
    #nav1 ul ul li:hover > ul {
        visibility: visible;
        left: 100%;
        top: auto;
        margin-top: -45px;
    }
        #nav1 ul ul li:hover > ul li { float: left }
    #nav1 ul { background: $(drop.background.color) }
        #nav1 ul ul { background: $(drop.background.color) }
        #nav1 ul li:hover > ul {
            visibility: visible;
            left: 0;
            top: 45px;
        }
        #nav1 li:hover > a,
        #nav1 ul li:hover > a {
            background-color: $(drop.hover.background.color);
            color: $(drop.text.hover.color);
        }
    #nav1 li a { border: none }
    #nav1 ul,
    .tabs-outer { overflow: visible }
.main-outer { z-index: 9 }
.tabs-outer { z-index: 10 }
.tabs-inner .widget li a:hover {
background: none
}

Vorlagen-Designer

Dritter Schritt - ihr sucht in eurem HTML diese Stelle (ist ziemlich weit oben):
/* Variable definitions
   ====================
Direkt _darunter_ setzt ihr die Erweiterung für den Vorlagen Designer ein:
  <Group description="Drop_Schrift" selector="#nav1 ">
     <Variable name="drop.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="drop.text.color" description="Text Color" type="color" default="#222222" value="#ffffff"/>
<Variable name="drop.background.color" description="Hintergrund" type="color" default="#66bbdd" value="#999999"/>
   </Group>

 <Group description="Drop_Hover" selector="#nav1 ">
    <Variable name="drop.text.hover.color" description="Hover Text-Farbe" type="color" default="#33aaff" value="#888888"/>
  <Variable name="drop.hover.background.color" description="Hover Hintergrund" type="color" default="#66bbdd" value="#dddddd"/>
   </Group>
Fertig! Ihr habt nun im Vorlagen Designer zwei neue Tabs, wo ihr Schriftfarbe, Schriftgröße, Schriftart, Hintergrund und Hover von dem Menü kontrollieren könnt.

Keine rumfummelei im Layout mehr nötig ... :=)!

Zusammenfassende Gedanken

Dieses Drop-Down Menü arbeitet problemlos in allen gängigen Browsern bis zum IE7 zurück - das war das schwerste an der Sache. Drop-Downs gibt es wie Sand am Meer, aber die wenigsten funktionieren in blogspot.com Layouts.

Ich habe in dieser Version alle mir bis dato bekannte Probleme bereinigt - falls es in irgendeinem Browser Darstellungsprobleme gibt, bitte melden! Das würde mich sehr interessieren.

Außerdem habe ich gemerkt, dass das größte Problem die Personalisierung von dem Menü war ... das ist jetzt Vergangenheit, ihr könnt das Menü einfach und simpel in eurem Vorlagen Designer anpassen.

Auch wenn da eigentlich nichts schief gehen kann, probiert das trotzdem zuerst in einem Test-Blog aus ... ein Layout ist schnell zerschossen :(!

Anmerkungen

Jetzt seid ihr gefragt: Könnt ihr was damit anfangen? Wenn's Probleme gibt - dafür sind die Kommentare da.