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

22 Kommentare

  1. Oh.. Sieht nach ganz schön viel Arbeit aus :O Ich glaube ich mache lieber das normale Dop down Meü :D
    Könnte man nicht vielleicht manche alten Tutorials, die man ja nicht mehr benutzten kann wegen dem neuen HTML Code, erneuern?
    z.B Wie man Bilder in einem Post einfach nebeneinander setzten kann (abstand zwischen Bildern entfernen) , oder vieles weitere? Denn ich würde gerne meinen Blog professioneller machen, aber kann nichts verändern wegem dem neuen HTML code :/
    Viele liebe Küsschen Lulu ♥

    AntwortenLöschen
    Antworten
    1. Also es ist meiner Ansicht nach etwa gleich viel Arbeit wie das normale DropDown, wenn du die Pfeile nicht machst. Der HTML-Code ist sogar identisch. :D

      Was das Umschreiben angeht, so anders ist es gar nicht. Der Code ist eigentlich noch immer der Gleiche (bis auf minimale Änderungen) und wenn du ne neue CSS schreiben musst, kommt es eh nicht drauf an. Es schaut einfach bisschen anders aus.

      Grüsse
      Myri

      Löschen
  2. Lieb von euch für die viele Arbeit immer, die verschiedenen Menüs haben mir sehr gefallen. :)

    FB|Portfolio|YouTube

    AntwortenLöschen
  3. Ist es auch möglich, die Drops nach unten zu öffnen? Also nehmen wir an ich habe das Menü bestehend aus:

    Navi1
    Navi2
    Navi3

    Ist es jetzt möglich, wenn man über Navi3 fährt, dass sich dann eventuelle weitere Unterpunkte öffnen? Also so:

    Navi1
    Navi2
    Navi3
    Navi3.1
    Navi3.2
    Navi3.3

    Ich hoffe das ist jetzt einigermaßen verständlich geschildert :D

    Um es einfach zu sagen: Nicht nach rechts, nicht nach links, sondern der letzte Menüpunkt nach unten.

    Wäre über eine Antwort dankbar :)

    AntwortenLöschen
    Antworten
    1. Wenn man googled kommt man auf das hier

      Hab mal den Code davon rausgeschrieben.
      Hilft das weiter?

      Grüsse
      Myri

      Löschen
  4. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  5. Also ich hab das jetzt gemacht, aber es ist nicht so wie es sein sollte :(
    Und zwar hab ich oben eine Zeile, wo Startseite und so steht, und wenn ich jetzt zb auf Bücher gehe, geht das drop down nach rechts auf und überdeckt die anderen Seiten, kannst du mir sagen, wie man das macht, dass des nach unten aufgeht?

    AntwortenLöschen
    Antworten
    1. Du meinst wohl kein vertikales DropDown, wie ich es hier gemacht habe, sondern du willst ein Normales. Das geht etwas anders. Aber ich hab auch dazu mal ein Tutorial geschrieben ---> hier.

      Löschen
  6. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  7. Das ist so toll, dass es Eure Seite gibt!!! Habe auch schon einige Tipps erfolgreich umsetzten können!
    http://andthismoments.blogspot.de

    AntwortenLöschen
  8. Antworten
    1. Super Menü!!! habs eingebaut und bin total zufrieden! :)
      Ich habe aber in die Submenüs noch weitere Submenüs eingebaut aber diese klappen auf sobald ich über den ersten Listenpunkt fahre. Was genau muss ich in der CSS-Datei hizufügen dass diese erst aufklappen wenn ich es auch will? Also erst beim hovern des direkt übergeordneten Listenelements.
      Sry wenn ichs etwas kompliziert erklärt habe!

      PS: so ists ca aufgebaut:

      1.
      1.1.
      1.1.1.
      1.1.1.1.
      1.1.1.2.
      1.1.2.
      1.1.3.
      1.2.
      1.3.
      1.3.1
      1.3.2.
      1.4.

      Löschen
    2. Puh, bisher habe ich nur horizontale Menüs mit zwei Unterleveln gebaut, da müsste ich mich erstmal wieder ins Tutorial einfühlen.
      Ich schau's mir an, sobald ich meine letzte Prüfung durch habe, okay?

      Löschen
    3. okay vielen dank schonmal!! viel erfolg bei der prüfung!

      Löschen
  9. Hallo :)
    Ich probiere schon eine gefühlte Ewigkeit rum, und möchte gerne ein DropDown-Menü für meinen Blog. Leider funktioerniert das nie so ganz.

    Am Liebsten hätte ich das in der Navi - geht gar nicht.
    Aber auch dein Menü kriege ich nicht fehlerfrei hin.

    Erst sitzt das auf meinen Sidebarelementen und wenn ich entferne, was auch du entfernst, dann ist es richtig positioniert, jedoch gehht das DropDown nicht mehr. Wenn du mir helfen könntest, würde ich mich sehr freuen.

    Liebe Grüße,
    Jenny

    Hier der (Test)Blog:
    http://tintentraeumereien.blogspot.de/?zx=8473bc994c04f44a#

    AntwortenLöschen
  10. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  11. Hallo, wirklich tolles Tutorial :) Bei mir hat alles geklappt, jetzt ist meine Frage wenn ich einer Kategorie mehrere Posts zuordnen will, was muss ich dann am HTML Code ändern? Wenn ich also mehrere Links einfügen will ? Wenn ich z.B die Kategorie Beauty habe und dazu mehrere Posts ? Ich hoffe ihr versteht mich :) Lieben Gruß :)

    AntwortenLöschen
  12. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  13. Vielen Dank für das schöne Tutorial. Ich habe allerdings schon ein Dropdown Menü das sich nach unten aufklappt und würde gerne jetzt unter diesen Unterpunkten jeweils noch ein Menü haben, das sich dann nach rechts ausklappt. Also etwa wie hier: www.linamallon.de

    Ich verzweifle nämlich schon fast daran, dieses Menü so hinzubekommen!

    Liebe Grüße

    AntwortenLöschen
  14. Hallo, wirklich tolles Tutorial :) Was muss man an den Code ändern wenn ich jetzt im Menü Thema Mode habe und dann einige Unterpunkte machen will z.B Schuhe Outfit, Damen Mode usw?

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!