Html +CSS Navigation, wie?

...komplette Frage anzeigen

3 Antworten

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von FranzMaierJosef
23.07.2016, 19:26

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

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

0

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;}
Antwort bewerten Vielen Dank für Deine Bewertung

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ß

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Limearts
22.07.2016, 10:08

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.

4
Kommentar von kaiseridell
22.07.2016, 18:13

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.

0

Was möchtest Du wissen?