Wie erstelle ich ein Menü - Vertikales "Drop Down" (Teil 9)

Hallöchen, ich bin's wiedermal.
Diesmal mit einem neuen Menü. Im Gegensatz zu den letzten acht aber nicht gewohnt horizontal, sondern vertikal.
Ausschauen tut das ganze dann am Ende so:

Vertikale Menüs find ich persönlich immer eine schöne Abwechslung, ihr könnt sie in der Sidebar platzieren, oder am Rand der Seite, fixiert oder mitfliessen lassen. Über die verschiedenen Möglichkeiten der Platzierungen möchte ich aber erst später sprechen. Zuerst bauen wir uns unser Menü auf.

1. HTML
Als Basis dieses Menüs dienen uns ungeordnete Listen (ul), die wir inneinanderpacken. Um das gesamte Menü packen wir einen div-Container, dem wir eine ID geben. Das brauchen wir für die CSS.
Wollen wir ein Menü mit fünf Punkten schaut das so aus. (Die mit "Drop" gezeichneten Elemente werden gleich Unterpunkte erhalten)

<div id="vertical">
<ul>
<li> <a href="#">Menu</a></li>
<li> <a href="#">Drop</a></li>
<li> <a href="#">Menu</a></li>
<li> <a href="#">Menu</a></li>
<li> <a href="#">Drop</a></li>
</ul>
</div>

Um einen Unterpunkt hinzuzufügen, müssen wir vor dem schliessenden Listentags des jeweiligen Menüpunktes eine eigene Liste einbauen.
Aussehen tut das folgendermassen

<li> <a href="#">Drop</a>
<ul>
<li> <a href="#">Submenu</a></li>
</ul>
</li>

Auch hier, immer wenn wir einen neuen Unterpunkt hinzufügen wollen, schaut der Grundaufbau eines Listenelements so aus:

<li><a href="URL">Punkt</a></li>

Wir öffnen eine Liste, packen einen Link rein, ersetzen "Punk" durch den Text, der angezeigt werden soll und dann schliessen wir Link sowie listenpunkt.

Okay, auf diese Weise baut ihr euer Menü zusammen.
Mein Code schaut so aus, und das Ergebnis seht ihr gleich drunter.
Zu meinem Code: Ich habe noch ein leeres Span-Element bei den Oberpunkten hinzugefügt. Diese span-Elemente werden wir später für die Pfeile verwenden.

<div id="vertical">
<ul>
<li><a href="#"><span></span> Menu </a></li>
<li> <a href="#"><span></span>Drop </a>
<ul>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
</ul>
</li>
<li> <a href="#"><span></span>Menu </a></li>
<li> <a href="#"><span></span>Menu </a></li>
<li> <a href="#"><span></span>Drop </a>
<ul>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
<li> <a href="#">Submenu </a></li>
</ul>
</li>
</ul>
</div>

Wie ihr seht, das hat noch keinen Style und "ausfahren" tut auch noch nichts. Da müssen wir mit CSS hinterher.

2. Basic Style

Bevor wir das ganze droppen, geben wir dem gesamten Menü etwas Style
Die Kommentare helfen wieder, den Code zu verstehen.



3. Das Drop Down

Jetzt kommen wir dazu. Das Droppen 
Der Code dafür schaut so aus, das Ergebnis untendrunter.

/* DROPPING MAGIC
---------------------------------------*/
/*Verhalten der Unterlisten bei Hover */
#vertical ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#vertical ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/*Listenelemente Submenu */
#vertical ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/* Links Submenu */
#vertical ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#vertical ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}

4. Pfeile

Eigentlich ist das Menü soweit fertig, aber ich dachte, so ein kleines Extra wie Pfeile, die sich beim hovern drehen, wären noch ganz süss. Die Dreiecke habe ich ja bereits beim letzten Tutorialverwendet, sie bestehen eigentlich aus Bordern und sind sehr simpel zu gestalten. Ich verweise erneut auf mein Demo wo ihr euch ansehen könnt, wie man sie macht.
Die Dreiecke sind die span-Elemente, die wir zu Beginn im HTML eingebaut haben. 

/* TRIANGLES
------------------------------*/
/*Span-Elemente*/
#vertical span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#vertical a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}

Und dann sind wir fertig!

Das ganze könnt ihr natürlich auch auf die andere Seite umbauen, das sähe dann so aus:



5. Einbau

Okay. Einbauen.
Ihr könnt das Ganze in der Sidebar einbauen, oder in die ganze Seite. Zuerst in die Sidebar, da dies einfacher ist.

Dennoch: Bitte macht das ganze wie immer in einem Testblog, wenns dort klappt, klappt's auch in eurem Hauptblog, wenn es zerschossen wird, dann war es nur der Testblog.

SIDEBAR

Für das Platzieren in der Sidebar öffenen wir als erstes den Layout-Bereich und fügen in der Sidbar ein neues HTML-Gadget hinzu.

In dieses Gadget kommt als erstes die HTML rein.





Vor der CSS machen wir Style-Klammern auf, in die wir die CSS kopieren. Anschliessend klicken wir auf speichern und sehen es und an.

Okay, das Ergebnis ist nicht was wir uns vorgestellt haben. Es überdeckt die anderen Gadgets. Der Grund dafür sind die ersten Zeilen CSS. Diese sind für eine Positionierung ausserhalb geschrieben. Also löschen wir den ersten Block.




Problem gelöst!

AUSSERHALB BLOG

Für den Einbau ausserhalb des Blogs müssen wir in den HTML-Bereich (Vorlage>HTML bearbeiten)

Dort suchen wir nach <div class='content'> und drunter kopieren wir wieder unsere HTML rein.

Vor dem Kopieren der CSS brauchen wir wieder die Style-Klammern.





CSS reinkopieren und dann speichern.

Mit der Positionierung müsst ihr vielleicht noch etwas rumprobieren, bis es so ausschaut,wie es auch gefällt.


NACHWORT

Das war dann alles. :)
Ich hoffe diese "andere" Art ein Menü zu gestalten hat euch gefallen und wie immer, wenn ihr Fragen habt, schreibt einen Kommentar und ich werde Antwort schreiben.

18.8.2013 // letztes Update von Mira