So:
1. Code bearbeiten
Als erstes müsst ihr diesen Startcode in eure Homepage einfügen. Am besten ich kopiert ihn und fügt ihn bei "Text unter dem Design" ein.
1.1 Startcode
<style type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
Mit diesem Teil bestimmt ihr die Schriftart und größe.. Das Grün markierte ist die Größe und das Gelb markierte die Schriftart...
1.2 Einstellungen
li a
{
padding-right: 0px;padding-top: 10px;
}
div.menu
{
position: absolute;
z-index: 5;
top: 218px;
left: 50%;
margin-left:-405px;
width:905px;
}
.menu li
{
width: 161px;
float: left;
}
Hier werden einige Einstellungen vorgenommen... Das grüne stellt ein, wie weit die Schrift vom Menürand entfernt sein soll, das gelbe Positioniert das ganze Menü und das blaue gibt die Menübreite an.
1.3 Menülinks
.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
color: #000000;
margin: 0px;
display: block;
height: 23px;
}
.menu a:hover
{
background-image: url(URL);
background-color: #000000;
}
Hier kommen die Menülinks: Das erste grüne ist die Hintergrundfarbe des normalen Menülinks.. Wenn du ein Hintergrundbild verwendest einfach so lassen und bei dem ersten roten deine Hintergrundbild-URL eintragen. Das Orangene ist die Höhe eines Menülinks. Das zweite Mal rot und grün sind wieder die Farben und Bilder, wenn ihr mir der Maus drüberfahrt...
1.4 Größe und Farbe der Menülinks
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 12px;
display: none;
width: 160px;
float: left;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000;
}
//-->
</style>
Hier wird die Größe und Farbe bestimmt..Gelb = Größe, Blau = Länge und Orange = Farbe!
--------------------------------------------------------------------------------
2. Javascript Code bearbeiten
Nun kommen wir zu dem Javascript Code.. Der wird einfach dadrunter weiter geschrieben...
Hier muss nichts verändert werden:
<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>
<div class="menu">
Weiter geht es dann mit einigen Formatierungen...
2.1 Menüüberschriften und Menülinks
Für jedn Menüabschnitt gibt es jetzt einen Code.. Benötigt man von den 5 vorhandenen Abschnitten nur z.B. 3, so lässt man die Codes von Menüabschnitt 4 und 5 einfach weg...
2.1.1 Menüabschnitt 1
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Allgemeines</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://">Startseite</a></li>
<li><a href="http://">Gästebuch</a></li>
<li><a href="http://">News</a></li>
<li><a href="http://">Newsletter</a></li>
<li><a href="http://">Umfragen</a></li>
</ul>
</li>
Mit dem Blauen bestimmen sie die genaue Überschrift..
Bei den grünen Angaben machen sie die Untermenüs mit den URL's in gelb...
Es können so viele Menüunterpunkte angehängt werden, wie man möchte...
Allerdings muss das </ul> </il> am Ende stehen bleiben!
2.1.2 Menüabschnitt 2
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Allgemeines</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://">Startseite</a></li>
<li><a href="http://">Gästebuch</a></li>
<li><a href="http://">News</a></li>
<li><a href="http://">Newsletter</a></li>
<li><a href="http://">Umfragen</a></li>
</ul>
</li>
Mit dem Blauen bestimmen sie die genaue Überschrift..
Bei den grünen Angaben machen sie die Untermenüs mit den URL's in gelb...
Es können so viele Menüunterpunkte angehängt werden, wie man möchte...
Allerdings muss das </ul> </il> am Ende stehen bleiben!
2.1.3 Menüabschnitt 3
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Allgemeines</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://">Startseite</a></li>
<li><a href="http://">Gästebuch</a></li>
<li><a href="http://">News</a></li>
<li><a href="http://">Newsletter</a></li>
<li><a href="http://">Umfragen</a></li>
</ul>
</li>
Mit dem Blauen bestimmen sie die genaue Überschrift..
Bei den grünen Angaben machen sie die Untermenüs mit den URL's in gelb...
Es können so viele Menüunterpunkte angehängt werden, wie man möchte...
Allerdings muss das </ul> </il> am Ende stehen bleiben!
2.1.4 Menüabschnitt 4
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Allgemeines</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://">Startseite</a></li>
<li><a href="http://">Gästebuch</a></li>
<li><a href="http://">News</a></li>
<li><a href="http://">Newsletter</a></li>
<li><a href="http://">Umfragen</a></li>
</ul>
</li>
Mit dem Blauen bestimmen sie die genaue Überschrift..
Bei den grünen Angaben machen sie die Untermenüs mit den URL's in gelb...
Es können so viele Menüunterpunkte angehängt werden, wie man möchte...
Allerdings muss das </ul> </il> am Ende stehen bleiben!
2.1.5 Menüabschnitt 5
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Allgemeines</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://">Startseite</a></li>
<li><a href="http://">Gästebuch</a></li>
<li><a href="http://">News</a></li>
<li><a href="http://">Newsletter</a></li>
<li><a href="http://">Umfragen</a></li>
</ul>
</li>
</div>
Mit dem Blauen bestimmen sie die genaue Überschrift..
Bei den grünen Angaben machen sie die Untermenüs mit den URL's in gelb...
Es können so viele Menüunterpunkte angehängt werden, wie man möchte...
Allerdings muss das </ul> </il> am Ende stehen bleiben!
