Dropdown Menü einbauen/ CSS Menü

Vorweg: nehmt euch für den Einbau eures Menüs Zeit! Gehuddel bringt hier nichts, und das geht auch nicht zackzack, hoppladihopp! Immerhin soll das Ergebnis nicht nur funktional, sondern auch individuell sein. Ein 08/15-Menü kann man mit den einfachsten Generatoren erstellen, und dementsprechend sieht es auch aus! ;)

Mein Beispielmenü seht ihr hier (klick)
Und hier könnt ihr euch in wenigen Schritten ein kostenloses Dropdown-Menü erstellen: www.cssmenumaker.com

Wenn man sich ein Design ausgesucht hat, gibt man seine Zielorte (=Links) ein. Die Farben etc. werden erst
hinterher angepaßt – anders also als bei den meisten 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.
Dieser gedownloadete Code wird einem per E-Mail zugeschickt. Es handelt sich dabei um eine zip-Datei. Die E-Mail mit der Visitenkarte kam sehr schnell, doch die zip-Datei habe ich erst eineinhalb Stunden später erhalten. Geduld ist hier also gefragt!

Der nächste Schritt ist, diese zip-Datei zu entpacken. In dieser Datei ist eine „installation_instruction“, also eine Bauanleitung, enthalten. Klickt man diese an, öffnet sie sich im Webbrowser. Es wird einem der Einblick in den html-Teil des Menüs gewährt. 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 Styling des Menüs, das im HTML-Bereich des Blogs eingefügt wird.

Wichtig: Bitte speichert vor dem Bearbeiten eures HTML-Bereichs das komplette html-Gerüst in einem Texteditor ab! Oder ihr downloaded diesen Bereich unter "Vorlage speichern/wiederherstellen" auf eurem PC! 

So, wir haben nun also die zip-Datei mit der Bauanleitung und den 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 (= horizontales Menü --- bei vertikalen Menüs in den Seitenteil schieben!). Dieser Teil enthält die Links zu euren Seiten!
Den CSS-Code – zu dem wir gelangen, wenn wir „menu style“ öffnen und 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 diesen Abschnitt:
}]]></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 - das erspart auch unnötige Hin- und Herklickerei und ist Laiensicher!). 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 und welche Schriftgröße das Menü hat. Dies kann geändert werden, wobei man beachten muß, das die Schriftbezeichnung genau in die „“ eingefügt wird. Wir können das also erstmal außer Acht lassen.
(Bitte beachtet zur Einbringung individueller Schriftarten folgendes: Individuelle Schriftart einfügen und verwenden (klick) - ihr solltet also auf alle Fälle die vorgegebenen Standard-Schriftarten beibehalten)

Im 2. Abschnitt, der mit .menu ul{ beginnt, sehen wir die Hintergrundfarbe des Menüs. Nicht die Menüleiste und auch nicht das Aufklappmenü, sondern den reinen Hintergrund, auf dem sich das Menü befindet. Hier ist es also auch möglich, eine Textur/Bild einzufügen.

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 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 5. und letzten Abschnitt finden wir die Maße des Ausklappmenüs. 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 gekennzeichnet ist mit .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 muß der Code am Ende so aussehen:

.menu p{

          clear:left;]]></b:skin>

Fertig!

Diese Anleitung ist ausgelegt auf Blogger/Blogspot. Ob dies beim Einbau bei anderen Blog-/Homepageanbietern ebenso funktioniert, kann ich nicht garantieren! → Man muß sich im html-Text (der Grundstruktur oder dem Skelett seiner Seite also) die Stelle raussuchen, an der body { erwähnt wird. Davor setzt man den CSS-Code ein. Bitte immer darauf achten, das jedes noch so kleine Pünktchen etc. an der richtigen Position ist! Leider scheitert der Einbau solcher Codes oft an der falschen Formatierung – will heißen, ein < zu viel oder ein / zu wenig, und das ganze Menü funktioniert nicht. 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 „diese Seite verlassen“ 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! Sehr einfach zu handhaben und mit tollen Möglichkeiten. Und natürlich kostenlos! Der Code soll nicht so verwendet werden, wie ihr ihn erhaltet, heißt: so funktioniert er nicht. Ihr müßt ihn also bearbeiten, um euren eignen Style zu bekommen, denn darauf zielt der Anbieter ab. Klingt seltsam, finde ich kreativ! :) Die Webseite ist minimalistisch gehalten und sicher. Hier gibt es auch keine Werbeeinblendung (wenn das Menü installiert ist) und die Menüs sind mit allen Browsern kompatibel!

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 eineinhalb Tage gebraucht um das so hinzubekommen, wie ich es haben wollte. Wer ausführliche Fragen hat und eine spezifischere Erklärung haben möchte, kontaktiere mich bitte per e-Mail über mein Kontaktformular (klick)!

 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“!