• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navi mit Subnavi

Status
Für weitere Antworten geschlossen.
freeZ

freeZ

Neues Mitglied
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.


 
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: 
<!DOCTYPE html>

<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>

</html>

Körnerbrötchen schrieb:
Wer nicht, der kann durch einen Klick auf den Hauptnavigationspunkt zu einer Seite weitergeleitet werden, die die einzelnen Subnavigationspunkte anzeigt.
Zum Vergrößern anklicken....

Ja, das klingt gut, etwas Gebastel bleibt es aber.
 
Zuletzt bearbeitet:
mermshaus schrieb:
IE6 meines Wissens nicht.
Zum Vergrößern anklicken....
Das ist richtig.

Zu diskutieren, ob der ein "moderner Browser" ist oder ob man den überhaupt noch unbedingt unterstützen sollte, ist müßig.
Zum Vergrößern anklicken....
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 <a> 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.
 
Efchen schrieb:
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.
Zum Vergrößern anklicken....

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: 
<!DOCTYPE html>

<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>

</html>
 
@Efchen: Ich glaube fachlich liegen wir nicht so weit auseinander. ;)
mermshaus schrieb:
@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.
Zum Vergrößern anklicken....
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! :D 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^^).
 
@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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Zuletzt bearbeitet:
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.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben