Dropdown Menü erstellen/einbauen - kleine Hilfsanleitung

Jahaaa, ich habe es endlich geschafft! :) Schon vor vielen, vielen Monaten habe ich mich mit dem Thema „Dropdown Menü“ für eines meiner Foren beschäftigt. Seit ich nun meinen Blog habe, hatte ich immer im Hinterstübchen, ein solch platzsparendes Menü für mich anzulegen. Sicher, mein vorheriges Menü war schon nicht schlecht. Auch felixibel hinsichtlich Farbe und hinzufügen von weiteren Links. Aber es war eben nicht das, was ich wollte. Und so habe ich mich dann vor zwei Tagen daran gemacht, mir ein neues Menü zu erstellen. Das war aber gar nicht so einfach zu Beginn.

Völlig verzweifelt habe ich dann nun eineinhalb Tage benötigt, um das Menü einzubauen. Und weil es mir schon vor den Augen geschwommen ist und der Schädel sich drehte vor lauter sogenannter „Hilfsforen“, in denen ich hoffte, eine Lösung zu finden, habe ich mich entschlossen, eine kleine Hilfsanleitung für dieses Menü zu schreiben! :) Denn im Internet bin ich auf haufenweise Fragen gestoßen von Menschen, denen es ebenso erging wie mir: die einfach nicht wußten, wie man so ein Dropdown Menü denn nun im Blog (oder der Homepage) einbaut und dieses auch zum Laufen bringt. Vielleicht hilft mein Beitrag dem ein oder anderen.

Erst einmal begann es mit der Sucherei im Internet – was sonst? - nach einem geeigneten Generator. Diesen habe ich dann letztendlich gefunden und genutzt: www.cssmenumaker.com. Wenn man sich dort ein Design ausgesucht hat, gibt man seine Zielorte ein. Die Farben etc. werden allerdings erst hinterher angepaßt – anders also bei etlichen anderen Generatoren. Wenn man sein Menü erstellt hat, muß man dieses downloaden. Da ist also nix mit einem html-Code, den der Generator automatisch erzeugt – auch anders, als ich es bisher kannte.

Dieser downgeloadete Code wird einem per e-Mail zugeschickt. Es handelt sich dabei um eine zip-Datei. Hat eine Weile gedauert, muß ich sagen. Die e-Mail mit der Visitenkarte kam sehr schnell. Doch die zip-Datei habe ich erst eineinhalb Stunden später erhalten – zu diesem Zeitpunkt hatte ich das Netz schon durchforstet, was ich denn nun mit dem Download anstellen soll. Da ich ja anfangs keine zip-Datei erhalten hatte, wußte ich also auch nicht, was mit dem Download anzufangen war... Sei's drum, nun wissen wir also, das hier ein wenig Geduld gefragt ist.

Der nächste Schritt ist dann, diese zip-Datei zu entpacken. Macht Sinn! ;) In dieser Datei ist eine „installation_instruction“, also eine Bauanleitung, enthalten. Klickt man diese an, öffnet sie sich der Webbrowser. Es wird einem der Einblick in den html-Teil des Menüs gewährt und erwähnt, das man diesen Code nicht so verwenden soll, wie er ist (warum, habe ich nicht verstanden, aber auch hier: sei's drum). Schließlich erhält man noch einen Ordner mit dem Namen „Menu“, in dem man einen „menu style“ findet. Dies ist der css-Code, also das Stlyling des Menüs.

Nur was mit diesen beiden Teilen anfangen, wenn man sich so gar nicht damit auskennt? Einbauen?! Wäre sinnig, wenn man denn weiß wie es geht.

So, wir haben nun also die zip-Datei mit der Bauanleitung und dem menu-style. Den html-Code aus der Bauanleitung kopieren wir nun in ein html-Gadget und schieben es als ersten Post bei Blog Posts (auf der Design-Seite -> Seitenelemente) nach oben. Den css- Code – zu dem wir gelangen, wenn wir „menu style“ öffnen und einfach alles makieren und kopieren (der Code ist nämlich wesentlich größer als der erste Blick darauf vermuten läßt!) - fügen wir in den html-Bereich (unter Design -> html bearbeiten) in den Body-Bereich des Mobile-Teiles ein. Keine Panik, das sieht alles sehr verworren aus! ;) Der Mobile-Teil ist ziemlich weit unten im html-Bereich und beginnt bei diesem Abschnitt:

/* Mobile

----------------------------------------------- */

Wir scrollen nun ein wenig runter (genau hingucken ist angesagt ;) ) und suchen nach diesem Stück:

}]]></b:skin>

Und genau davor setzen wir nun den css-Code ein -> also einfach vor diese } Klammer rechtsklicken und Code einfügen. Nun klicken wir mal auf „Vorschau“. Und siehe da, da ist ja unser Menü! :)

Nun machen wir uns daran, diesen css-Code nach unseren Bedürfnissen anzupassen. Experimentieren ist angesagt, zumal man den Dropdown-Bereich erst sehen kann, wenn man die Vorlage gespeichert hat. Aus diesem Grund kopieren wir uns den Original-css-Code in einen Texteditor (Word oder Open Office oder auch einfach WordPad). Hier sehen wir dann diverse Abschnitte, die für unterschiedliche Bereiche im Dropdown-Menü zuständig sind:

Der 1. Abschnitt ist für die Schrift zuständig. Dort wird angegeben, welche Schriftarten verwendet werden, wie die Textformatierung aussieht, Schriftgröße. Dies kann geändert werden, wobei man beachten muß, das die Schriftbezeichnung genau in den „“ eingefügt wird. Wir können das also erstmal außer Acht lassen.

(Zu erwähnen ist hierbei vielleicht noch – was ich auch erst mit der Zeit erfahren habe, weil ich mich viel damit beschäftigte – das nicht jeder besondere Schriftarten wie z. B. „Schoolbell“ oder „!PaulMaul“ etc. sehen kann. Wenn man sich diese Schriften downloadet und in einen Editor wie OpenOffice einfügt, dann kann man diese Schriftarten auch im Netz überall erkennen. So kann es also sein, das manchmal auf einer Homepage eine ganz andere Schriftart verwendet wird, die wir aber nicht als solche erkennen können, da wir die Schrift gar nicht auf dem PC haben. Aus diesem Grund sollte hier im Menü immer eine Auswahl an Schriften angegeben werden, die für alle sichtbar sind. In diesem Falle hier könnte man die vorgegeben Schriftarten einfach beibehalten wie sie sind.)

Im 2. Abschnitt, der ebenfalls mit .menu beginnt, sehen wir die Hintergrundfarbe etc. des Menüs. Nicht die Menüleiste und auch nicht das Aufklappmenü, sondern den reinen Hintergrund, auf dem sich das Menü befindet.

Der 3. Abschnitt, der hier beginnt .menu li a{ zeigt uns an, welche Farbe unsere Menüleiste hat, also die Leiste, aus der alles andere dann aufklappen soll. Die erste hier genannte Farbe ist die Farbe des Leisten-Hintergrundes, die zweite Farbe die Farbe der Schrift, die dort zu lesen ist. Der Begriff line-height:15px; gibt an, wie hoch die Menüleiste ist.

Im 4. Abschnitt sehen wir dann zum ersten Mal den Begriff .menu li a:hover. Hier finden wir die Farben der Menüleiste wie sie aussieht, wenn wir mit der Maus darüber fahren – wenn sie also „gehovert“ wird. Die erste Farbe gibt auch hier wieder den Hintergrund an, der angezeigt wird, wenn die Taste hovert. Die 2. Farbe gibt die Farbe an, die die Schrift annimmt, wenn die Maus darüber bewegt wird. Und die 3. Farbe (die schon im 5. Abschnitt liegt) gibt den Kompletthintergrund an, der dann ausfährt (also des ausklappbaren Teils).

Im letzten Abschnitt finden wir die Maße des Ausklappmenüs an sich. Da sich jeder ein anderes Design erstellen kann, muß man selber ein wenig experimentieren, wie man es gerne haben möchte! ;) Der letzte Bereich, der so gekennzeichnet ist .menu li ul a:hover, bezeichnet dann zu guter Letzt die „Hover Hover Farben“. Das heißt, was gehovert wird, wenn das ausgeklappte Menü ausfährt und man mit der Maus darüber geht.

Abschließend sollte dann der Code am Ende so aussehen:

                                 .menu p{
                                                 clear:left;
                                                  }]]></b:skin>

Ich hoffe, ich konnte mit dem kleinen Beitrag ein wenig Licht in das Dunkel um die Dropdown Menüs bringen! ;) Dies ist allerdings nur die Anleitung für Blogger/Blogspot. Ob dies beim Einbau in andere Blog-/Homepageanbieter ebenso funktioniert, kann ich nicht garantieren. :D An sich müßte es überall ähnlich funktionieren, man muß sich im html-Text, der Grundstruktur oder dem Skelett seiner Seite also, nur die Stelle raussuchen, an der body { erwähnt wird. Davor setzt man den css-Code ein. Und immer darauf achten, das jedes noch so kleine Pünktchen etc. an der richtigen Position ist! Leider scheitert oft der Einbau solcher Codes an der falschen Formatierung – will heißen, ein < zu viel oder ein / zu wenig. Man sollte sich solch einen Umbau nicht sofort speichern, wenn man die Möglichkeit hat, es sich in der Vorschau anzusehen. Bei Blogspot ist es leicht: wenn man also etwas im html-Bereich verändern möchte, Vorschau anklicken; ist man mit dem Ergebnis nicht zufrieden, einfach auf einen anderen Button in der Reiterleiste klicken (z. B. wieder auf „Design“), dann öffnet sich ein Popupfenster mit der Frage, ob man die Seite wirklich verlassen will. Einfach auf „ja“ (oder was auch immer genau da steht ;) ) klicken, und die Änderungen, die man eingegeben hat, sind hinfällig! Einfacher Trick, aber gut wenn man sich nicht sicher ist! :)

Zum Menü-Generator www.cssmenumaker.com an sich ist noch zu sagen: der beste Generator, den ich auf meiner langen, kaum enden wollenden Suche im Netz habe finden können! Einfach zu handhaben und mit tollen Möglichkeiten! Und natürlich kostenlos! ;)

Noch ein paar persönliche Worte an alle da draußen, die mal sowas „basteln“ woll(t)en und immer wieder abgewiesen worden sind und/oder frustriert aufgegeben haben:

nur keine Scheu vor dem elenden html-Bereich! Ist alles leichter als es aussieht. Man muß nur viel Geduld mitbringen (als Laie, und die Welt ist ja voll von uns). Nur nicht demotivieren lassen, denn das Internet ist überfüllt von sogenannten „Hilfsforen“, in denen man oft weder eine genaue Antwort bekommt, noch freundlich behandelt wird. Sollten also Fragen aufkommen könnt ihr hier gerne die Kommentar-Funktion nutzen. Ich selber habe, wie erwähnt, eineinhalb Tage gebraucht um das so hinzubekommen, wie ich es haben möchte. Und doch ist es noch nicht perfekt.Allerdings werde ich da mal eine Pause einlegen und einige Nächte ausruhen, ehe ich mich wieder an das Menü mache. Wer weiß, optimieren kann man sowas ja immer! ;) In diesem Sinne: frisch ans Werk! Viel Spaß dabei und immer locker an die Sache rangehen! Es ist noch kein Meister vom Himmel gefallen und können tut's im End jeder von uns „Fachsimplern“!

Eure Soda.