Hallo, und Willkommen bei meinem 2. Tutorial, indem ich euch zeige, wie man ein einfaches Dropdown-Menü erstellt. Da ich leider nicht so gut Javaskript kann, kann ich euch den Javaskript-Teil nicht erklären aber der ist auch nicht wichtig, da man an ihm nicht umbedingt was verändern sollte.
--------------------------------------------------------------------------

Wir beginnen mit dem einleitenden Html-tag der den CSS bereich einleitet.

<style type="text/css" media="screen">

Anschließend kommt erstmal der Css-Container, der die Schriftart und Größe, den Abstand vom Objektrand zur Schrift bestimmt:


body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

Bei font-family könnt ihr die Schriftart bestimmen, bei font-size die Schriftgröße in Pixel und bei padding den Abstand der Schrift zum Objektrand in Pixel.
margin bestimmt in diesem Fall den Abstand vom Menü zu anderen Objekten auf der Website. overflow bestimmt normalerweise ob ein Scrollbalken erstellt werden soll aber in diesem Fall braucht man das eigendlich nicht

Im nächsten Teil wird die Auflistung der später folgenden Links gestylt:


ul, li {
list-style-type: none;
padding: 0px;
margin: 0px;
}

Bei liste-style-type könnt ihr bestimmen ob ihr Auflistungszeichen anzeigen wollt. (Wenn ihr einen Listenpunkt anzeigen wollt, solltet ihr euch am besten dieses Tutorial ansehen, man kann natürlich auch einfache Zeichen nehmen z.b. circle,square,disc, decimal oder lower-alpha. Aber ich persönlich finde Auflistungspunkte hässlich also könnt ihr die Einstellung auch einfach auf none lassen.
Bei padding könnt ihr einstellen, wie weit der Abstand vom Listenpunkt zum Text ist. Und margin bestimmt wie Groß der Abstand vom Objektrand zu diesem Listenpunkt ist.

Im nächsten Teil wird das Objekt also das Menü und die Reihenfolge gegeüber anderen Objekten:

.menu
{
position: absolute;
z-index: 3;
top: 100px;
left: 10px;
}

Mit position bestimmt man, wie sich das Objekt, also das Menü zum Layout verhält. In diesem Fall wählen wir absolute, da das Menü nicht das Layout beeinflussen soll.
Mit z-index wird das Verhalten zu anderen absoluten Objekten bestimmt wenn diese sich gegenseitig Überlappen, d.h. die größte Zahl des jeweiligen Objektes wird als erstes angezeigt, die anderen Objekte ordnen sich dann darunter an.
Mit top bestimmt man den Abstand zwischen oberem Bildschirmrand und Menü und mit left wird der Abstand zwischen linken Bildschirmrand und Menü bestimmt.

Im nächsten Teil wird die Breite und die Ausrichtung der einzelnen Unterelemente bestimmt:



.menu li
{
width: 160px;
float: left;
}

Mit width wird die breite bestimmt (in Pixel) und mit float
Die Ausrichtung z.b. right, left, bottom oder top.

Jetzt werden noch die einzelnen Buttons im normalen Zustand bestimmt:


.menu a
{
border: 0px solid #DE1818;
background-image:url();
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
display: block;
height: 57px;
color: #XXXXXX;
background-color: #FFFFFF;
}

Bei border wird die breite und die farbe des Rahmens um die Kategorie-Buttons festgelegt. background-image: url()
bietet die Möglichkeit ein Hintergrundbild für die Buttons einzufügen (in die Klammern kommt der Link zum Bild). Bei text-decoration kann man bestimmen ob man z.b. mit underline den text der Buttons unterstreichen. Mit text-align kann man bestimmen, ob der Text der Buttons zentriert (center), linksbündig (left) oder rechtsbündig (right) sein soll. Mit font-weight bestimmt man das Textgewicht also z.b. fett (bold), dünn (lighter) oder normal (normal). Mit cursor wird die Cursor-Art bestimmt in diesem Fall eine typische Hand. Es gibt z. b. auch default dann bleibt der Cursor normal oder ein Kreuz (crosshair).
Bei display kann man die Anzeigeart wählen es gibt z.b. auch none das is hier aber nicht so gut, da dann garkeine
Schrift angezeigt wird. Die Höhe wird mit height bestimmt.
Mit color kann man die Farbe der Schrift bestimmen.
Wenn man kein Hintergrundbild gewählt hat kann man natürlich auch eine Hintergrundfarbe bestimmen dies wird mit background-color erledigt.

Im nächsten Teil unseres Menüs wird bestimmt, was mit den Buttons passiert, wenn man mit der Maus drüberfährt:

.menu a:hover
{
background-image:url();
color: #XXXXXX;
}

Hier kann man z.b. eine andere Schriftfarbe wählen oder ein sogenanntes hover-Bild verlinken. Mit background-image
kann man z.b. hier ein anderes Hintergrundbild wählen und mit color die Schriftfarbe. Alle Einstellungen werden vom "normalen" Zustand des Buttons übernommen, wenn man beim "Mouseover-Effekt" keine neuen Einstellungen definiert.

Im folgenden Teil werden die Unterkategorie-Links definiert:
#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 157px;
float: left;
height: 26px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
height: 26px;
border-top: 0px;
width: 157px;
cursor: pointer;
}

smenu bezeichnet die Unterkategorie-Buttons man sollte hier alle späteren Unterkategorien vermerken.
smenu a bezeichnet die Links der Buttons man sollte auch hier alle späteren Unterkategorien vermerken.
Hier noch die Einstellungen in Stichpunkten:

font-size: Textgröße
display: none: Anzeigeart
width: breite des Buttons
height : höhe des Buttons
border-top : Abtrennung nach oben
float : Ausrichtung des Textes
cursor Art des Cursors

Mit </style> wird der Css-Code geschlossen.

Als nächstes kommt der Javaskript-Code:

<script type="text/javascript">
<!-- function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
} //--> </script>

So, jetzt folgt der letzte Teil des Menüs:

Mit <body> wird ein body-tag eröffnet.

Dann öffnen wir ein div-class-tag mit:

<div class="menu">

Die div class heißt menu damit meint man den css-container den wir vorher erstellt haben.

Als vorletztes kommten endlich die Menüpunkte:


<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menüpunkt 1 </a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><li><a href="Link Sub1">Subkategorie 1</a></li><li><a href="Link Sub2">Subkategorie 2</a></li>
</ul>
</li>

Nehmt euch Zeit, diesen Code zu lesen! Dann müsst ihr ihn nurnoch anpassen. Diesen code müsst ihr natürlich 3 oder 4 mal wiederhohlen die smenu anpassen (also 1, 2, 3) damit ihr auch mehrere Kategorien habt. Wichtig: z.b. smenu1 darf nicht 2mal vorkommen!

Zuletzt schließen wir die Div-Class, den Body-tag und das Menü ist fertig:



</ul>
</div>
</body>


Ich hoffe euch gefällt mein Tutorial!

MfG SmaX


Ich habe noch eine Seite gefunden die das Menü hat:
Zur Seite