Tutorial - Drop and Down
In diesem Tutorial zeige ich dir wie du ein Drop & Down Menü erzeugen kannst.
Ein Drop-Down-Menü ist ein Auswahlmenü, welches erscheint, wenn Sie auf einen entsprechenden Knopf klicken.
Nach einem weiteren Klick auf den gewünschten Menü-Punkt, wird dieser ausgewählt.
Als erstes erstellst du den HTML-Tag.Dieser leitet den CSSbereich ein. Dies tut ihr mit folgendem Code:
Nun legst du mit folgendem Code den Abstand zum Objekt, die Schriftart und Schriftgröße etc. fest.Das macht ihr mit folgendem Code:
Nun stylt ihr die Links die in aufgelistet werden mit folgenderEingabe: Nun legst du die Reihenfolge und das Menü gegenüber anderen Objekten fest. Das machst du wie folgt:-
position: Legt fest wie sich das Menü zum Layout verhält.
top: Legt den Abstand zum Bildrand oben und seitlich fest.
Nun legst du die Ausrichtung der eizelnen Unterelemente und die Breite dieser festgelegt. Dafür benutzt du folgenden Code: Jetzt noch die "normalen" Buttons. Also im normalen Zustand.-
border: Breite des Randes der Buttons.
text-decoration: Legt fest ob der Text z.B. fett, unterstrichen etc.sein soll.
text-align: Ausrichtung der Schrift im Button.
font-weight: Legt fest ob der Text fett, kursiv. etc sein soll.
- Alles andere sollte logisch sein. :]
Jetzt legst du das Mouseover fest, also das was passiert wenn man mit der Maus über die Buttons fährt.Dafür nutzt du dann diesen Code:
Jetzt legst du die Eigenschaften der Buttons fest, die als Unterkategorie erscheinen.font-size: Schriftgröße
wight / hight: Breite / Höhe des Buttons
Um den nun kompletten oberen Code fertig zu stellen gebst du an. Nun ist der CSS-Code geschlossen und damit fertig!
Mit dem folgenden Code eröffnest du den Body-Tag: Diesen Code musst du anpassen. Du musst also das smenu anpassen und somit sicher mehrmals wiederholen...also 1,2,3 etc.! Vorsicht...smenu1 etc. dürfen jeweils nur einmal wiederholt werden...!!! Und als aller aller letztes musst du diesen Code noch schließen. Und zwar mit: