Coolmen
| <style type="text/css" media="screen"> <!-- /* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */ body { font-family: Verdana, sans-serif; font-size: 14px; overflow: auto; padding: 10px; margin: 0px; } /* keine Auflistungspunkte vor Navi-Links */ ul, li { list-style-type: none; padding: 0px; margin: 0px; } /* Abstand zwischen Schrift zum Rand */ li a { padding-right: 20px; padding-top: 5px; } /* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */ div.menu { position: absolute; z-index: 3; top: 190px; left: 100px; width:850px; } /* Breite der Menüpunkte einstellen */ .menu li { width: 160px; float: left; } /* Aussehen der Menüpunkte einstellen */ .menu a { border: 0px solid #000000; background-color: #000000; background-image: url(URL); text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height: 23px; color: #00CCFF; } /* Aussehen der Menüpunkte beim Hover Effekt */ .menu a:hover { background-color: #00CCFF; background-image: url(URL); color: #000000; } #smenu1, #smenu2, #smenu3, #smenu4, #smenu5 { font-size: 14px; 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: #FFFFFF; } //--> </style> <!-- Anfang des Scriptes --> <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> <!-- Ende des Scriptes --> <div class="menu"> <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a> <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"> <li><a href="Unterlink 1.1">Untermenü 1.1</a></li> <li><a href="Unterlink 1.2">Untermenü 1.2</a></li> <li><a href="Unterlink 1.3">Untermenü 1.3</a></li> <li><a href="Unterlink 1.4">Untermenü 1.4</a></li> <li><a href="Unterlink 1.5">Untermenü 1.5</a></li> </ul> </li> <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a> <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"> <li><a href="Unterlink 2.1">Untermenü 2.1</a></li> <li><a href="Unterlink 2.2">Untermenü 2.2</a></li> </ul> </li> <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a> <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"> <li><a href="Unterlink 3.1">Untermenü 3.1</a></li> <li><a href="Unterlink 3.2">Untermenü 3.2</a></li> </ul> </li> <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a> <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"> <li><a href="Unterlink 4.1">Untermenü 4.1</a></li> <li><a href="Unterlink 4.2">Untermenü 4.2</a></li> </ul> </li> <li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a> <ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');"> <li><a href="Unterlink 5.1">Untermenü 5.1</a></li> <li><a href="Unterlink 5.2">Untermenü 5.2</a></li> </ul> </li> </div> |
Legende:
Orange = Hier könnt ihr eine Hintergrundgrafik für das Coolmenü einfügen,dazu müsst ihr die Bild URL von einem Button hier einfügen.
Die Bild URL findet ihr durch einen "Rechtsklick -> Eigenschaften" auf dem Bild heraus.
Oder ihr geht zu "Eigene Bilder verwalten", dort seht ihr die Namen der Bilder, die ihr hochgeladen habt.
Hier klickt ihr dann den Namen mit einem Rechtsklick an und wählt
-> Internet Explorer = "Verknüpfung kopieren" aus.
-> Mozilla Firefox = "Link Adresse kopieren" aus.
Braun = Hier könnt ihr eine Hintergrundfarbe auswählen,
wenn ihr keine Hintergrundgrafik verwenden wollt.
Dazu gibt ihr hier einfach den Farbcode für eine Farbe ein.
Farbcodes könnt ihr dann zum Beispiel hier in einer großen Liste finden:
Farbcode Tabelle
Blau = Hier könnt ihr die Farbe der Schrift einstellen,
dazu müsst ihr Farbcodes verwenden (Farbcode Tabelle).
Weitere Untermenü Punkte:
Ihr könnt auch weitere Untermenü Punkte einfügen,
dazu müsst ihr folgenden Code verwenden:
| <li><a href="Unterlink">Untermenü</a></li> |
Begrifferklärung:
Hover Effekt = Ein Hover Effekt wird nur angezeigt,
wenn man mit der Maus über einen bestimmten Menüpunkt fährt.
Somit könnt ihr das Aussehen der Menüpunkte beim drüber fahren mit der Maus ändern.
___________________________________________________________________________________________________
/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */ div.menu { position: absolute; z-index: 3; top: 190px; left: 100px; width:850px; } |
- wir gehen von Bildschirmauflösung 1024 x 768 Pixel aus !
- Abstand des Navi-Felds von linken Bildschirmrand mit left: festlegen
- wählt Ihr z.B. 250 Pixel Abstand von Linker Seite ... müsst Ihr die Breite width anpassen
- weil 250 Pixel Abstand + 850 Pixel Navibreite = 1100 Pixel
- Besucher mit 1024 x 768 Bildschirmauflösunge sehen Eure Seite mit Scrollbalken in der Breite !
- Je weiter Rechts die Navi beginnen soll, desto weniger Breite muss die Navi bekommen
Das war alles
Zurück 
Nach Oben Vor 
© by BjaDit.de(tl) 2008-2009 Auf dieser Website veröffentlichten Beiträge und Bild dateien sind urheberrechtlich geschützt. Jede vom Urheberrechtsgesetz nicht zugelassener Diebstahl bedarf vorher eine Schriftliche zustimmung de Autors!
Probleme?:info-bjadit@web.de (Dieser Code stammt aus dem HPBK Forum)