Frage von MarceloxD, 40

Html +CSS Navigation, wie?

Hallo, könnt ihr mir erklären wie ich bei HTML eine Navigationsleiste erstelle? Es soll so sein das wenn ich rüber gleite das dann die Unterpunkte raus kommen. Beispiel: wie oben auf der Gutefrage Seite wen man über Themen rüber gleiten würde. Ich Bedanke mich jetzt schonmal!

Antwort
von TanteHolger, 23

Moin,

Versuche es mit einer Liste und formatiere diese mit CSS. Ich poste Dir mal ein Beispiel in CSS woran Du bissel üben kannst =)

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(/style/images/nav_bg.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(/style/images/nav_bg.png);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(/style/images/nav_bg.png) right top no-repeat;}
#nav li:hover a.top_link {color:#fff;}
#nav li:hover{position:relative; z-index:200;}
#nav li:hover ul.sub{left:1px; top:33px; background: #000000; padding:3px; border-radius:0 0 2px 2px; white-space:nowrap; width:auto; height:auto; z-index:300;}
#nav li:hover ul.sub li {display:block; height:20px; margin-top:2px; position:relative; float:left; width:150px; font-weight:normal;}
#nav li:hover ul.sub li a{display:block; font-size:11px; height:18px; line-height:18px; text-indent:5px; color:#fff; text-decoration:none; border:1px solid #ffffff;}
#nav li:hover ul.sub li a:hover{background:#515151; color:#fff; border-color:#8D8D8D;}
#nav ul, #nav li:hover ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
Kommentar von TanteHolger ,

Der Editor hier mag micht nicht, daher das HTML bei Pastebin.

http://pastebin.com/qqEeYBbe

Antwort
von Limearts, 20

Es handelt sich um ein sogenanntes Dropdown-Menü. Wenn die ausgeklappten Menüleisten selbst weitere Untermenüs aufklappen sollen, spricht man von einem Multilevel-Dropdown-Menü.

https://www.google.de/?client=firefox-b#q=css+dropdown+menu

Von Tutorials bis hin zu kompletten Generatoren findet man mit dieser einfachen Suchphrase genug Seiten, die Hilfestellung oder vorgefertigte Skripte geben.

Kommentar von FranzMaierJosef ,

Das ist wohl die umfassensde Antwort ... Kann dem nichts mehr hinzufügen

(Bei adobe dreamweaver ist das Dropdownmenü Teil des Programms - gut aber teuer)

Antwort
von Tschoo, 27

Hallo!

Das geht mit HTML alleine nicht.

Würde PHP nehmen. CSS ist nur für Farbe/Grösse und ähnliches zuständig, aber nicht für Funktionen wie "MOUSE_OVER"

Gruß

Kommentar von Limearts ,

CSS unterstützt verschiedene Zustände. Von Hover über aktiv, Klick/Tip usw. Während PHP in Punkto Gestaltung und Darstellung so überhaupt kein Mitspracherecht besitzt.

Kommentar von kaiseridell ,

Also PHP hat hiermit garnichts zu tun. Wenn dann benutzt du JavaScript/ Jquery um gewisse Zustände zu erfassen, aber mittlerweile nutzt man only CSS, da es Resourcen sparender ist.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten