Helfer-Team.de.tl - Du Suchst Hilfe ? Hier findest du sie !

Du suchst Hilfe ? Hier findest du sie !

Coolmenu

Einleitung

Wir wollen ein Coolmenü auf unsere Seite einfügen.

Schritt 1

Zuerst fügen wir folgenden Code bei uns ein:

<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;
}li a
{
padding-right: 0px;padding-top: 10px;
}
div.menu
{
position: absolute;
z-index: 5;
top: 305px;
left: 50%;
margin-left:-405px;
width:905px;
}
.menu li
{
width: 161px;
float: left;
}.menu a
{
border: 0px solid #;000000;
background-color: #807E7E;
background-image: none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
color: #00000;
margin: 0px;
display: block;
height: 23px;
}
.menu a:hover
{
background-image: none;
background-color: #FF0000;
color: #000000;
}
#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>
<script type="text/javascript">
/*hier bitte nix ändern*/
<!--
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">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Allgemein</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="http://www.">Home</a></li>
<li><a href="http://www.">Kontakt</a></li>
<li><a href="http://www.">Gästebuch</a></li>
<li><a href="http://www.">Forum</a></li>
<li><a href="http://www.">News</a></li><li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Extras</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://www.">Newsletter</a></li>
<li><a href="http://www.">Linkliste</a></li>
<li><a href="http://www.">Topliste</a></li>
<li><a href="http://www.">Chat</a></li>
<li><a href="http://www.">Galerie</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Partner</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="http://www.">Partner</a></li>
<li><a href="http://www.">Partner werden</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Fun</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">

<li><a href="http://www.">Videos</a></li>
<li><a href="http://www.">Witze</a></li>
<li><a href="http://www.">Dummheiten</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Sonstiges</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">

<li><a href="http://www.">Nicht klicken !</a></li>
<li><a href="http://www.">Impressum</a></li>
<li><a href="http://www.">HPBK Suche</a></li>

</ul>
</li>


Diesen Code fügen wir jetzt ins Notepad ein:

WindowsXP: Start->Alle Programme -> Zubehör ->Editor

Windows Vista: Windows-Logo ->Alle Programme ->Zubehör ->Editor

Damit hätten wir Schritt 1 gemeistert

Schritt 2: Code Anpassen;Modifizieren

Jetzt machen wir uns ans Angeweide

Wir fangen am besten ganz oben an:

Wenn wir ein bisschen weiter nach unten gucken,sehen wir folgende Stelle: "{
padding-right: 0px;padding-top: 10px;
}"

Mit "padding-right" können wir bestimmen,wie viel Pixel das Menü von rechts entfernt sein soll.Am besten bleibt das aber auf null.Mit "padding-top" bestimmen wir,wie viele Pixel die Menülinks hoch sind.Wenn wir es bei 10px lassen,sieht es am besten aus .

Dann fahren wir runter bis zur folgenden Stelle:

div.menu
{
position: absolute;
z-index: 5;
top: 305px;
left: 50%;
margin-left:-405px;
width:905px;
}

Mit "position: absolute;" bestimmen wir,wie das Menü positioniert werden soll: right,left,center,absolute.

Mit "top:" bestimmen wir,wie weit das Menü vom oberen Bildschirmrand weg sein soll.

margin-left:-405px; lassen wir so,weil es sonst bei verschiedenen Bildschirmauflösungen zu Problemen kommen kann.

Mit "width:905px;" bestimmen wir,wie breit das Coolmenü insgesamt sein soll.

Noch ein bisschen weiter unten sehen wir ".menu li
{
width: 161px;"

mit width: 161px;" bestimmen wir,wie breit ein einzelner Menüpunkt sein soll.

Kurz darunter sehen wir:

}.menu a
{
border: 0px solid #000000;
background-color: #807E7E;
background-image: none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
color: #00000;
margin: 0px;
display: block;
height: 23px;
}

Mit "border: 0px solid #000000;" bestimmen wir,wie fett der Rand sein soll,und das letzte ist der Farbcode.Hier ist eine Farbcode übersicht: FARBCODE-TABELLE

Mit background-color: die Hintergrundfarbe und mit "background-image: none " das Hintergrundbild eines Menüpunktes.Die URL des Bildes muss dann in die Klammern.
text-decoration:none; kennzeichnet,ob die Namen der Menüpunkte nachher unterstrichen,fett,o.ä. sein sollen.Mit "none" ist der Text normal.
"text-align:center" sagt uns,das die Schrift nachher in der Mitte des Menüpunktes ist.
"font-weight: bold" befiehlt,dass das Menü nachher Fette Schrift besitzt.

Color: Die schriftfarbe.
height: Die Höhe eines Menüpunktes.

Weiter unten steht folgendes:

".menu a:hover
{
background-image: none;
background-color: #FF0000;
color: #000000;"

Das dürfte sich von selbst erklären,wenn man ein bisschen englisch kann

"#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 12px;
display: none;
width: 160px;
float: left;"

Font size: größe der schrift,
width: breite eines Menüpunktes.

Da drunter machen wir gar nix.

Unter dem Javascript-Code sehen wir folgendes:

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Allgemein</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="http://www.">Home</a></li>
<li><a href="http://www.">Kontakt</a></li>
<li><a href="http://www.">Gästebuch</a></li>
<li><a href="http://www.">Forum</a></li>
<li><a href="http://www.">News</a></li><li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Extras</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://www.">Newsletter</a></li>
<li><a href="http://www.">Linkliste</a></li>
<li><a href="http://www.">Topliste</a></li>
<li><a href="http://www.">Chat</a></li>
<li><a href="http://www.">Galerie</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Partner</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="http://www.">Partner</a></li>
<li><a href="http://www.">Partner werden</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Fun</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">

<li><a href="http://www.">Videos</a></li>
<li><a href="http://www.">Witze</a></li>
<li><a href="http://www.">Dummheiten</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Sonstiges</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">

<li><a href="http://www.">Nicht klicken !</a></li>
<li><a href="http://www.">Impressum</a></li>
<li><a href="http://www.">HPBK Suche</a></li>

</ul>
</li>

Bei "Allgemein,Extras,Partner,Sonstiges,Fun" setzen wir die Überschriften der Untermenüs ein.Darunter folgen dann die Verlinkungen der Menüpunkte.

Man kann natürlich bei den Punkten mit "<li><a href="http://www.">Link</a></li>" unendlich viele Menüpunkte einfügen

Wenn wir das alles gemacht haben,sind wir fertig

Jetzt müssen wir den Code nur noch auf unserer Homepage einfügen.Dafür gehen wir folgendermaßen vor:

->Einloggen
->Design einstellen
->Erweiterte Designeinstellungen
->Text unter dem Design
->Speichern.

Feddisch

Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden