Hallo zusammen,
ich möchte mir eine Navigation aufbauen, die folgendermaßen aussehen soll
Navi // TextA | TextB | TextC
Subnavi // A1 | A2 | A3 | A4 | A5
Navi // TextA | TextB | TextC
Subnavi // B1 | B2 | B3 | B4 | B5
Navi // TextA | TextB | TextC
Subnavi // C1 | C2 | C3
Also die Navi soll immer fest sein, die Sunbavi soll verändern
als Verdeutlichung, HIER noch ein Beispiel.
Ich möchte, dass mehr nach „javascript menu“ gesucht wird.
Erstbestes Beispiel: Dynamic Drive DHTML Scripts- Mouseover Tabs Menu
Das gehört dann auch ins JavaScript Forum. 
→ Moved
Hab aber auch gerade mit dem Stichwort „JavaScript Submenu“ gute Treffer gehabt. Würde einfach empfehelen da einige Codes durchzuprobieren und zu schauen, welcher am besten passst.
Gruß Corvulus
Besser wäre es, das mit CSS zu realisieren, statt mit JavaScript.
Bei der JavaScript-Variante muss man sich immer noch darum kümmern, dass das Menü trotzdem noch nutzbar ist, auch wenn JS abgeschaltet ist.
Interessehalber: Geht das irgendwie ohne :hover-Pseudoklassen an Nicht-a-Tags? (Ich wüsste nicht wie, denn in einen a-Tag lassen sich schlecht Listen schachteln.) Sonst fällt es für mich nämlich derzeit noch raus. (Edit: Also, unter der Annahme, dass Page Refreshs für das Ändern des Tabs ausscheiden.)
Für eine „ubotrusive“ JS-Lösung (die natürlich eigentlich zu verlangen ist) vielleicht noch „unobtrusive“ an die Suche anhängen. Das könnte ein wenig Gebastel werden.
Wieso denn keine Pseudoklassen? Alle modernen Browser unterstützen das. Wer nicht, der kann durch einen Klick auf den Hauptnavigationspunkt zu einer Seite weitergeleitet werden, die die einzelnen Subnavigationspunkte anzeigt.
In letzter Zeit selten, aber es kommt vor: Ich bin mit Körnerbrötchen 100% einer Meinung
Du kannst ja für diese Browser eine JavaScript-Alternative anbieten. Wenn von den Nutzern dann sogar jemand noch JS abgeschaltet hat, dann navigiert er, wie Körnerbrötchen das schreibt.
@Körnerbrötchen:
IE6 meines Wissens nicht. Zu diskutieren, ob der ein „moderner Browser“ ist oder ob man den überhaupt noch unbedingt unterstützen sollte, ist müßig. Das ist einfach eine Frage von Pragmatismus.
Testcase:
[html]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New</title>
<style type="text/css">
#demo { width: 200px; height: 200px; background: #fcc; }
#demo p { display: none; }
#demo:hover p { display: block }
</style>
</head>
<body>
<div id="demo"><p>Das wird im IE6 nie zu sehen sein.</p></div>
</body>
Ja, das klingt gut, etwas Gebastel bleibt es aber.
Das ist richtig.
Zu diskutieren, ob der ein „moderner Browser“ ist oder ob man den überhaupt noch unbedingt unterstützen sollte, ist müßig.
Warum machst Du es nicht so, wie wir gesagt haben. Das ist eine Lösung, die für IE6-Nutzer und alle modernen optimal ist.
Ich meine, warum sollte man die wirklich modernen Browser mit einer schlechten Lösung behelligen, wenn es doch reicht, dass die Browser, die :hover nur auf können, eine Alternativlösung bekommen?
Man kann nicht erwarten, dass wenn man einen veralteten oder schlechten Browser benutzt, alles so funktioniert, wie in modernen Browsern. Man kann nur erwarten, DASS man die Site NUTZEN kann. Und das ist mit de Vorschlag gegeben. Und mit der JS-Alternative für IE6 wird es nur dann komplizierter, wenn man JS deaktiviert hat.
Wie ich es mache, ist doch nicht die Frage. Im Beispiellink des TE wird zum Beispiel zum Umschalten der Tabs geklickt, was sich mit CSS nun wirklich nicht umsetzen lässt. Es kommt durchaus auch auf die Problemstellung an und darauf, ob Alternativlösungen akzeptabel sind.
Das ist aber in gewisser Hinsicht alles völlig hypothetisch.
[html]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New</title>
<style type="text/css">
/**
* new clearfix
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
*/
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clear { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
* { margin: 0; padding: 0; }
body { margin: 0; padding: 100px; }
#menu, #menu ul {
list-style: none;
}
#menu {
position: relative;
}
#menu li {
float: left;
width: 5em;
border: 0.2em solid #f00;
height: 1.6em;
background: #eee;
}
#menu li ul {
display: none;
background: #cfc;
width: 60em;
}
#menu li:hover ul, #menu li.active ul {
display: block;
position: absolute;
top: 2em;
left: 0;
}
#menu li:hover {
background: #f00;
}
#menu li:hover ul {
z-index: 1;
}
#menu li.active {
background: #ccf;
}
</style>
</head>
<body>
<ul id="menu" class="clear">
<li class="active">Tab 1
<ul class="clear">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
</ul>
</li>
<li>Tab 2
<ul class="clear">
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
</ul>
</li>
<li>Tab 3
<ul class="clear">
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
<li>Item 3.4</li>
</ul>
</li>
</ul>
</body>
@Efchen: Ich glaube fachlich liegen wir nicht so weit auseinander. 
Wenn du nicht gerade einen MS-Entwickler fragst, sind sich Experten (a lá Entwickler von Google und anderen großen Webprojekten/-firmen) sich einig: Ist er nicht! 
Aber dafür bietet sich ja die JS-Methode und die Draufklick-Methode an. Der IE6 ist nun einmal Arbeit. Deswegen beschweren sich ja auch so viele und manche haben einfach resigniert und ignorieren ihn aus Protest (was ich absolut nachvollziehen kann^^).
Wäre es anders, würde wir nicht so oft so heftig aneinander geraten
Das ist wie mit gleichen magnetischen Polen… bg
@mermshaus
Eine Frage zu einem ganz anderen Thema:
Warum schreibst du schon den HTML5 Doctype?
Sollte man das jetzt schon machen?
Bis jetzt hab ich den immer so geschrieben:
[HTML]
[/HTML]
Na, wenn er in HTML5 schreiben will, dann nutzt er den HTML5-Doctype. Bleibt doch jedem selbst überlassen, in welcher HTML-Version er arbeiten will. Manche arbeiten mit XHTML. Manche mit Übergangsvarianten (Transtional), manche mit Strict.