Blogger CSS-Java-Dropdown Menü einbauen und bearbeiten

Hier habe ich noch ein Aufklapp-Menü gefunden:  Dieses Menü ist Java-basiert!

Ein Beispiel, wie es aussehen könnte, findet ihr hier auf meiner Testseite (klick). In diesem Tutorial erkläre ich euch - für alle, die sich weder gut in CSS noch HTML auskennen, noch die dem Englischen mächtig sind - wie ihr das Menü einbaut und was ihr verändern müßt, um das Menü eurem Style anzupassen.


Wie immer gilt: laßt euch Zeit beim Einbau und Design & speichert euch eure Original-Blog-Vorlage bitte zuvor in einem Texteditor ab bzw. ladet die komplette Vorlage runter!

Geht in den Design Bereich auf html bearbeiten. Sucht dort den Mobile-Abschnitt der so beginnt:

/* Mobile
----------------------------------------------- */
Vor diesen Abschnitt
]]></b:skin>
setzt ihr den 1. Teil des Codes. Dieser Teil ist zuständig für das Aussehen und die Anordnung der Buttons, also der Menüleiste und des Aufklappmenüs an sich.

Nun sucht ihr diesen Abschnitt
</head>
der sich ebenfalls im Mobile-Bereich befindet, recht weit unten. Davor fügt ihr den 2. Teil des Codes ein. Dieser Teil beinhaltet das Javascript, damit das Menü überhaupt funktionieren kann.

Den 3. und letzten Teil des Codes fügt ihr in ein html-Gadget im Design-Bereich der Seitenelemente ein. Wichtig ist hierbei, das ihr das Gadget an 1. Stelle über euren Blogpost schiebt. In einem Seitengadget erzielt der Code nicht das gewünschte Ergebnis! ;)

Die folgenden Codes bitte nicht so kopieren und einfügen! Ich habe in jedem Teil der Codes eine Erklärung eingefügt, wie bzw. was bearbeitet werden muß, damit ihr das Menü euren Bedürfnissen anpassen könnt!  Entnehmt den Original-Code bitte der oben angegebenen Seite!

Der 1. Teil:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
margin:0px;    zusätzlich einfügen, um Abstand der oberen Menüleiste zu regulieren
padding:0px;
font: 12px Tahoma, Arial;
font-weight:bold;     zusätzlich einfügen, wenn Fettschrift gewünscht ist
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
padding:0px 7px 0px 10px;
border: 1px solid #aaaaaa;         Farbe vom Rahmen um alle Kästchen
background: #cccccc;              Farbe vom Kästchen-Hintergrund
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
font-weight:bold;     zusätzlich einfügen, wenn Fettschrift gewünscht
vertical-align: middle;
}


#jsddm li a:hover {
background: #C8C8C8;       Hover-Farbe der oberen Menüpunkte
}


#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}


#jsddm li ul li {
float: none;
display: inline;
margin:0px;         zusätzlich einfügen, um den Abstand 
padding:0px;       zwischen den Aufklapp-Kästchen zu verringern
}


#jsddm li ul li a {
width: auto;
background: #CAE8FA;           Farbe vom Aufklappbereich
}


#jsddm li ul li a:hover {
background: #A3CEE5;                Farbe vom Aufklappbereich der gehovert wird
}

Der violett-gekennzeichnete Teil bezeichnet den Abschnitt, der für die Größe, das Aussehen (Farbe, Schrift, Schriftgröße etc.) zuständig ist.

Der 2. Teil
wird unverändert eingebaut! Dieser Teil aktiviert das Javascript und ist dafür zuständig, das das Menü richtig angezeigt wird.

Beim 3. Teil 
müßt ihr alle #

[...]
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li> [...]
durch eure Ziel-url ersetzen. Also den Link einfügen, zu dessen Seite man bei Klick gelangen soll. Die Bezeichnungen "Drop 1-3" ersetzt ihr durch den Linknamen, z. B. "Home" oder "Bilder" oder "Profil" etc., der in eurem Menü angezeigt werden soll.