Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

patrick_l · 31.12.2010

Hallo und guten Morgen allerseits,

ich stehe gerade auf dem Schlauch und weiß nicht weiter. Deshalb benötige mal wieder eure Hilfe. Es geht um folgendes. Ich bin gerade dabei meine Navigation zu planen. Die Gestaltung ist ja kein Problem. Nun bin ich dabei das ganze umzusetzen. Ich weiß nur nicht wo ich anfangen soll. Sinnvoll finde ich bis jetzt nur jQuery dafür zu verwenden. Die Navigation ist ja recht komplex mit den ganzen Inhalten. Ich hoffe ihr könnt mir ein paar Denkanstöße geben damit ich weiter voran komme.

Ich habe hier mal ein Screenshot von den einzelnen Schaltflächen im aktiven und rollover Zustand. Sowie die Dropdown-Box.

Guten Rutsch und beste Grüße, Otto.

Edit:

Ich dachte mir gerade eventuell mit zwei Divs zu arbeiten. Und jeweils in beiden zwei in Listen zu platzieren.
Eine bzw. zwei Grafiken müsste ich dann ja eigentlich nur verwenden. Jeweils die abrundeten Schaltflächen. Die obere Reihe ist ja kein Problem.
Nur bei den Unterpunkten, diese haben unterschiedliche Größen bzw. sind alle in einer anderen Breite.

Code:

<body>
<div id="container">
        <div id="mainnav">
            <div id="navi-top">
            </div>
        <div id="nav">
            <div id="nav-bottum">
            </div>
            <div id="search">
            </div>
        </div>
            
        </div>
        <div id="content">
        </div>
        <div id="footer">
        </div>
</div>
</body>

leveler · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

moin, wenn`s um Navis geht, schau ich mir immer gern folgende Seite an:

Mit dem Firebug ist sowas ja schnell untersucht

patrick_l · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Meine sorge ist nur das der IE6 mit der Navigation Probleme bekommt. Es ist vielleicht auch wichtig zusagen von mir, das diese Navigation unter Joomla zum Einsatz kommt. Ich habe bzw. schreibe das Template selber. Anschließend wollte ich dann den kompletten Navigationsblock einfach über PHP mit "includes" auslagern bzw. laden. Ich danke aber für den Link. Werde ich mal durchforsten. Man kann ja immer etwas mitnehmen für später.

cebito · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Dafür brauchst du kein JavaScript/jQuery. Für die obere Navi suchst du dir ein einfaches css-Dropdownmenü, die untere kann eine einfache horizontale Navi sein, die du Seitenabhängig per php füllst.

Hier mal ein dropdown - hat ein JS bei, speziell für den IE6...

Manfred62 · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Hallo

Ich sag mal was zu der Grafik:
1. Zeile ist klar
2. Zeile auch klar, wobei mir die Optik etwas aufstößt. Die unterschiedlich farbigen großen Buttons, das passt imho irgendwie nicht.
3. Zeile ist meiner Meinung nach gar nicht gut. Widerspricht der Logik.
Dort kollidieren verschiedene Statis (hover, active) zusätzlich mit unterschiedlicher Optik/Technik (vertikal dropdown, dropline).

Interessante Lösungen gibts z.B. bei CSS-LAB unter Drop Line Navbars.
Oder bei Stu Nichols, wurde ja schon genannt.

Guten Rutsch
Manfred

leveler · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Meine sorge ist nur das der IE6 mit der Navigation Probleme bekommt.

hmm, möglicherweise bin ich ja arrogant oder unwissend, aber diese Sorge kann ich nicht nachvollziehen. Das hört man ständig, das sich immer alle Sorgen um den IE6 machen, der ja zugegebenermaßen noch "Marktanteile" hat. Aber ich sehe das so: wer Fernsehen in hochaufgelöster Qualität sehen will, braucht eben die entsprechenden Geräte, sprich Blue-Ray /Fernseher mit HDMI-Input. Wer Musik in höchster Qualität lauschen möchte, darf sich keine MP3`s reinziehen. Wer im Auto Sicherheit will, braucht Anschnallgurte und nen Airbag. Und wer im Jahre 2011 Inhalte im Web erleben möchte, soll seinen Browser auf den neuesten Stand bringen. Dass das Oma Schmidt von nebenan nicht nahezubringen ist, mag ja sein. Aber interessiert mich das ? (ok, das war jetzt arrogant

)

patrick_l · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Manfred62 schrieb:
Hallo

Ich sag mal was zu der Grafik:
1. Zeile ist klar
2. Zeile auch klar, wobei mir die Optik etwas aufstößt. Die unterschiedlich farbigen großen Buttons, das passt imho irgendwie nicht.
3. Zeile ist meiner Meinung nach gar nicht gut. Widerspricht der Logik.
Dort kollidieren verschiedene Statis (hover, active) zusätzlich mit unterschiedlicher Optik/Technik (vertikal dropdown, dropline).

Die Farbe(n) sind auch noch nicht festgelegt. Die Navigation macht aus meiner Sicht schon Sinn. Eigentlich waren die Drei Hauptpunkte jeweils eine eigene Webseite. Ich wollte aber gerne alle Inhalte mittels Joomla zusammen fassen. Daher jetzt die drei Oberkategorien mit den dazugehörigen Unterpunkten. Die zweite Zeile soll halt den direkten Zugriff möglich machen ohne die Dropdown-Menüs der Hauptgruppe zu öffnen.

leveler schrieb:
hmm, möglicherweise bin ich ja arrogant oder unwissend, aber diese Sorge kann ich nicht nachvollziehen. Das hört man ständig, das sich immer alle Sorgen um den IE6 machen, der ja zugegebenermaßen noch "Marktanteile" hat. Aber ich sehe das so: wer Fernsehen in hochaufgelöster Qualität sehen will, braucht eben die entsprechenden Geräte, sprich Blue-Ray /Fernseher mit HDMI-Input. Wer Musik in höchster Qualität lauschen möchte, darf sich keine MP3`s reinziehen. Wer im Auto Sicherheit will, braucht Anschnallgurte und nen Airbag. Und wer im Jahre 2011 Inhalte im Web erleben möchte, soll seinen Browser auf den neuesten Stand bringen. Dass das Oma Schmidt von nebenan nicht nahezubringen ist, mag ja sein. Aber interessiert mich das ? (ok, das war jetzt arrogant )

Ja, du hast damit auch wohl recht. Ich sage mir aber solange der IE6 noch lebt sollte man auch dort etwas Rücksicht drauf nahmen. Über die Conditional Comments kann man ja den IE schnell und einfach ansprechen.

@cebito:
Das ich ohne jQuery (Script) auskomme dachte ich mir wohl, war nur etwas aus gebremst von den ganzen anderen Punkten die ich so auf meiner Wunschliste habe. Sitze da jetzt schon lange dran. Immer wieder Bereiche verworfen und neu geplant. Ich dank dir und den anderen aber für die Links bzw. nützliche Quellen.

Tim1901091 · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

DerOtto schrieb:

...

Code:

<body>
<div id="container">
        <div id="mainnav">
            <div id="navi-top">
            </div>
        <div id="nav">
            <div id="nav-bottum">
            </div>
            <div id="search">
            </div>
        </div>
            
        </div>
        <div id="content">
        </div>
        <div id="footer">
        </div>
</div>
</body>

Wenn ich das richtig sehe, hast du ganze 3 Divs für die Navigation. Reduzier das auf 0.

Code:

<ul id="navigation">...</ul>

tuts auch.

Und dann legst du die Unternavigationspunkte jeweils über eine verschachtelte Liste an:

Code:

<ul id="navigation">
    <li>Navigationspunkt 1
        <ul>
            <li>Navigationsunterpunkt 1</li>
            <li>Navigationsunterpunkt 2</li>
            <li>Navigationsunterpunkt 3</li>
        </ul>
    </li>
</ul>

Das ist semantisch besser, nicht so komplex und reicht komplett aus.
IE6-Unterstützung erfordert für DropDown-Menüs JavaScript. Wenn du darauf verzichten kannst, dass der IE6-User auch ein DropDown-Menü angezeigt bekommt und stattdessen auf den Hauptnavigationspunkt klickt und von da aus dann weiter in die Seite kommt, kannst du auf JavaScript verzichten. Das nennt sich dann Progressive Enhancement (jeder Browser kriegt die Lösung angezeigt, die er unterstützt - benutzbar bleibts aber).

Ich schicke dir per PN mal einen Link, wo ich sowas in der Richtung mal umgesetzt habe. Basiert dabei vor allem auf li:hover. Da liegt dann auch genau das Problem an der Sache. IE6 unterstützt die Pseudo-Klasse :hover nur bei <a>-Elementen. Das reicht aber leider nicht.

CrazyLopp · 31.12.2010

AW: Komplexe Navigation sinnvoll umsetzen. Wie & Womit?

Ein Etwas umständlicher Weg wäre im Joomla! fü alles ein einzelnes Menü anzugelen:

- Eins für die Obere Navigation (1. Ebene - immer sichtbar)
- Jeweils eins für die Unterpunkte (Nur aktiv wenn der Überpunkt aktiv ist)

Bei der 1. Ebene kannst du auch die Unterpunkte verschachteln um so auch das Dropdown hinzubekommen...

Das werden dann zwar ein paar mehr Module und Menüs aber dafür kann man das auch wieder ganz einfach verwalten und von Code her ist es auch einfach...