Ich habe mich länger geärgert, dass man bei Blogger kein Drop-Down Menü einrichten kann. Und dann brachte mich Google zu dieser Anleitung und nach ein bisschen Reindenken war es dann ganz einfach: http://www.5202.de/2012/10/blogger-drop-down-neue-version.html
Ich möchte gar nicht erst versuchen die Anleitung in meinen Worten für euch zu wiederholen, denn das würde nur schief gehen. Und die tolle Leistung uns allen zu ermöglichen ein Drop-Down Menü zu nutzen, soll wenigstens durch ein paar Klicks belohnt werden ;), aber ich möchte hier dann doch noch ein paar zusätzliche Hilfestellungen geben.
Zum Menüaufbau
Mein HTML für mein Menü sieht so aus:
<div id=“nav1″>
<ul>
<li><a href=“https://meergedanken.de/“>Blog</a></li>
<li><a href=“https://meergedanken.de/p/ich-bin.html“>Über mich</a>
<ul>
<li><a href=“https://meergedanken.de/p/ziele.html“>Abnahme</a></li>
<li><a href=“https://meergedanken.de/p/strategie_15.html“>Strategie</a></li>
<li><a href=“http://www.meergedanken.de/p/sammelleidenschaft.html“>Meine Schätze</a></li>
</ul>
</li>
<li><a href=“#„>Blog-Hilfe</a>
<ul>
<li><a href=“http://www.meergedanken.de/2014/01/blog-hilfe-powered-bei-blogger-entfernen.html“>„Powered bei Blogger“ entfernen</a></li>
<li><a href=“http://www.meergedanken.de/2014/01/blog-hilfe-anzahl-der-kommentare-unter.html“>Anzahl der Kommentare anzeigen</a></li>
</ul>
</li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/jahreswechselchallenge.html“>Jahreswechselchallenge</a></li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild.html“>Das erste Bild</a>
<ul>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild-ablauf-und-regeln.html“>Ablauf und Regeln</a></li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild-buttons.html“>Buttons</a></li>
</ul>
</li>
<li><a href=“http://lexas-leckereien.blogspot.de/“>Rezepte</a></li>
</ul></div>
Rot markiert sind die Titel, die ihr im Menü sehen könnt.
Normalerweise wird davor der Link angegeben, der bei Klick auf den Titel aufgerufen wird, wenn ihr allerdings nur den Titel im Menü anzeigen wollt (also keine Seite hinterlegen), dann gebt ihr statt des Links einfach # ein. Dann passiert einfach nichts, wenn jemand auf den Titel klickt. Ist ja auch nichts hinterlegt. Als Link könnt ihr sowohl den Link zu einer bei Blogger erstellten Seite, direkt zu einem Post oder die Domain einer externen Seite angeben. Das ist völlig egal und alle drei Möglichkeiten sind in meinem Menü vorhanden.
Jeder Menüpunkt wird mit <li> geöffnet und mit </li> wieder geschlossen. Die Ebene wird mit <ul> geöffnet und dementsprechend mit </ul> geschlossen, wenn sie das letzte mal genutzt wird.
Ganz am Anfang wird die 1. Ebene geöffnet, danach folgt der einfache Menüpunkt „Blog“, der Link dafür wird geöffnet und gleich wieder geschlossen, da hier keine zweite Ebene geöffnet wird. Danach wird der Link zu „Über mich“ geöffnet, aber nicht wieder geschlossen, da es eine zweite Ebene geben soll. Die wird dann mit <ul> geöffnet und es folgen die einzelnen Links, die auf dieser Ebene erscheinen. Alle werden geschlossen, da es keine dritte Ebene gibt. Nachdem alle Links aufgezählt wurden, wird die Ebene mit </ul> wieder geschlossen und danach wird auch der „Über mich“ Link geschlossen, da dieser Menüpunkt hier jetzt zu Ende ist.
Das kann man jetzt so oft man will wiederholen, bis dann ganz am Ende auch die erste Ebene wieder geschlossen wird.
Wichtig ist beim Aufbau, dass ihr die vorgegebene Struktur beibehaltet. Also alles hübsch untereinander und die einzelnen Ebenen eingerückt. Ansonsten sieht es nachher nicht aus. Erstellt auch das Grundgerüst also am Besten in einem einfachen Texteditor und kopiert es dann nur noch in das zu erstellende HTML-Gadget rein.
Nichts anderes, als das hier:
Ihr geht unter „Layout“ fügt ein HTML-Gadget hinzu, kopiert euer HTML-Grundgerüst dort hinein, speichert es und schiebt das Gadget dann an die Stelle, an der ihr euer Menü angezeigt haben wollt.
 |
| 1. HTML bearbeiten und die zwei Abschnitte, die euch bei 5202 gegeben werden reinkopieren. 2. Anpassen und das Ganze optisch an euren Blog anpassen. |
Ich finde deine Tipps immer so praktisch. Genau das was ich auch immer schon haben wollte, wusste nur nie wie. Danke.
Kein Problem. Ich freue mich ja, wenn ich irgendwem dadurch helfen konnte 🙂
Hi, ich versuche das schonden ganzen Samstag und bekomme das leider nicht hin 🙁 bei mir legt er die „unterseiten“ einfach nur eine Reihe unter die Überschrift :/ kannst du mir evtl helfen ? Habe im Entdefekt deine „Vorlage“ genommen und sie mit meinen Punkten ausgetauscht, aber es kommt einfach kein Drop Down Menü -.-
Lg Frida
Hast du mal einen Link zu deinem Blog für mich? Denn dein Profil lässt sich nicht aufruffen. Und den Rest der Anleitung auf 5202.de hast du auch genauso befolgt?
Hi Lexa, komisch dachte ich hätte dir schon geantwortet.Also ich habe deine Anweisungen befolgt, die von 5202.de nicht denn dafür hatte ich nachhe einfach keine Geduld mehr. mein Blog findest du unter:
Ich wollte # Abnehmen, # Stil und # Wohlfühlen gerne als drop down menü unter Ziele 2014 packen. Und wenn ich es dann endlich mal geschafft habe dann halt evtl andere Seiten.
Lg Frida
Dann ist klar, warum es nicht funktioniert. Du musst im HTML-Bereich deines Blogs einiges ändern, bevor du das Menü so einbinden kannst, wie ich es beschrieben habe. Meine Erklärungen ihr sind nur zusätzliche Erläuterungen. Das grundsätzliche findest du auf dem verlinkten Blog. Wenn du deinen HTML-Code angepasst hast wie dort beschrieben und es dann immer noch nicht funktioniert, kannst du ja nochmal nachfragen. Hier, oder direkt bei 5202.de. Wahrscheinlich kann dir da viel besser geholfen werden.
Viel Erfolg.
Alles klar, dank dir ! Ich werde es mal versuchen und berichten. 🙂
Hallo, ich habe es geschafft ! ! ! Viele Dank für deine Hilfe ! ! ! Nun ann ich meinen Blog endlich weiter verbessern 🙂
Schönen Sonntag noch,
LG Frida
ufff ich arbeite jetzt schon 3h an meiner Dropdownliste und irgendwie wirds nix. Obwohl deine Vorlage gut ist. Ich geh mal weiter probieren
Was genau wird denn nix?
es stand alles nebeneinander, also der Hauptpunkt war richtig und die Unterpunkte gingen dann darunter quer weg und nicht senkrecht…Hab jetzt nochmal von vorn angefangen. 😀 Ma schauen obs dieses mal klappt
Die Leerzeichen am Anfang der Zeilen sind wichtig. Die eingerückte Struktur sorgt dann dafür, dass alles ordentlich untereinander steht. Vielleicht lag es ja einfach nur dadran bei dir.
Hey ich probiere gerade ein dropdown menü zu erzeugen 😀
leider kann ich die angegebenen Zeilen in der HTML -Vorlage nicht finden, weißt du zufällig warum?
habe mittlerweile die beiden Sachen in meinem HTML gefunden aber jetzt erscheint kein dropdown menü nur die ganznormalen Punkte der ersten ebene
Hallo Tina,
ich war im Urlaub und komme deswegen erst jetzt dazu zu antworten.
So aus dem Stehgreif kann ich dir jetzt leider auch nicht helfen. Hast du dich genau an die Anleitung bei 5202 gehalten? Mein Post liefert ja nur eine Zusatzhilfe.
Am besten auch dort direkt nachfragen 😉
Viel Erfolg noch.
Lexa
Hey Lexa,
sag mal, geht das, dass ich das Drop Down Menü habe und darin auch ein Drop Down. Wie zum Beispiel…Rezepte = vegetarisch, vegan und sowas??
Hey,
ja, das geht. Du fügst einfach weitere Ebenen ein. Ist aber auch bei 5202 erklärt, wenn ich mich richtig erinnere.
LG Lexa
Hallo Lexa,
ich glaube, dass versuche ich mal umzusetzen. Ich ärgere mich darüber auch schon seit einiger Zeit.
Als ich noch bei WordPress war, ging das alles ganz easy, doch da ich eigentlich nur noch privat blogge, wechselte ich wieder zu Blogger. Hoffentlich bekomme ich es hin. Lieben Dank, für den Link und die Tipps 😀
Liebe Grüße
Lola
Hallo Lola,
viel Erfolg und Spaß mit dem Ergebnis 🙂
LG Lexa
Find ich super – auch noch nach Jahren. Hat mir wirklich weiter geholfen.
Allerings, bei mir werden die Menüpunkte der ersten Ebene nun auf zwei Zeilen verteilt (https://peekinmylife.blogspot.com/). Kann ich das ändern? Denn so komme ich schlecht an meine Ebene 2 …
Moin Petra,
das lässt sich sicherlich ändern. Ich würde mal vermuten, dass es mit der Breite der einzelnen Menüpunkte zu tun hat. Die lässt sich im CSS-Block sicherlich einstellen und ändern. Wie genau und wo du das kannst, weiß ich jetzt allerdings auch nicht, da ich schon einige Zeit weg bin von Blogger.
Aber wenn du es nicht selbst findest, kann dir Google bestimmt helfen.
Ich wünsche viel Erfolg.
Lexa
Hey Lexa,
ich habe mir nun den Quellcode genauso richtig geschrieben, denke ich, aber es findet nun für Schritt 2 und 3 bei 5202 die angegebenen Stellen im Quellcode nicht …was kann ich da tun? Also die Suchfunktion findet da bei mir gar nichts. Aber kann doch nicht sein, dass ich das nicht drin habe, oder?
LG Ann-Sophie
Moin Ann-Sophie,
hmm, das ist wirklich merkwürdig. Leider weiß ich da auch keinen Rat, als nochmal alles zu kontrollieren und sonst mal zu suchen, ob es neuere Anleitungen dafür gibt. Ich selbst bin ja nicht mehr bei Blogspot und kann dir daher kaum helfen.
LG Lexa