liquide aber dennoch strukturierte navigationsanordnung

[meinheart]

mittag,

mein bekannter möchte eine kleine private seite mit geschütztem bereich zur diksussion verschiedener themen etc. ist eigtl auch egal, wichtig ist bloß, dass es eben eine etwa 4 ebenen tiefe navigationsstruktur mit den einzelnen seiten zur diksussion gibt.

nun sollte das ganze in ein möglichst liquides design gepresst werden, simpel aber möglichst schön benutzerfreundlich und ein sinnvolles "leitsystem" bieten.

nun dachte ich an eine von mir gängige darstellung von navigationen als baum

Seite 1
Seite 2
   |   Unterseite 1
   |   Unterseite 2
          |   Artikel 1
   |   etc.

das heißt das ganze wird als baum so weit geöffnet wie nötig und ähnlich wie aufgeklappte ordner dargestellt. hierbei ergibt sich mir bei 4 eben mit teils langen artikelnamen aber ein problem mit dem liquiden design. denn normal startet der inhalt gefloatet rechts neben meiner navigation, dieser bereich wird dann aber unbenutzbar ab einer bestimmten navigationsebene. natürlich max-width, etc sind mir ein begriff, aber da zerhauts dann doch einiges.

deshalb suche ich eine praktikablere menüführung, die schön übersichtlich ist und dennoch im sinne von liquidität mehr möglichkeiten bietet.

dachte auch schon an eine zeilenweise horizontale anordnung

Seite 1 Seite 2 Seite 3 ...
Unterseite 1 Unterseite 2 ...
Artikel 1 Artikel 2 ...

Doch hier muss dann auch wieder unschön umgebrochen werden, bei zu schmalem viewport ...

vielleicht hat jemand eine schöne idee ...

grusz

[Beat]

mein bekannter möchte eine kleine private seite mit geschütztem bereich zur diksussion verschiedener themen etc. ist eigtl auch egal, wichtig ist bloß, dass es eben eine etwa 4 ebenen tiefe navigationsstruktur mit den einzelnen seiten zur diksussion gibt.

Das stellt eine hohe Anforderung an die Usability dar.

nun sollte das ganze in ein möglichst liquides design gepresst werden, simpel aber möglichst schön benutzerfreundlich und ein sinnvolles "leitsystem" bieten.

nun dachte ich an eine von mir gängige darstellung von navigationen als baum

Das wäre das semantische Grundgerüst.

Seite 1
Seite 2
   |   Unterseite 1
   |   Unterseite 2
          |   Artikel 1
   |   etc.

das heißt das ganze wird als baum so weit geöffnet wie nötig und ähnlich wie aufgeklappte ordner dargestellt.

Wobei dir hier ein Viewport natürliche Grenzen setzt, die man zwar mit JS abfragen kann, aber nur schwer zu einer stimmigen Beeinflussung für die Navigation erreichen kann.

hierbei ergibt sich mir bei 4 eben mit teils langen artikelnamen aber ein problem mit dem liquiden design. denn normal startet der inhalt gefloatet rechts neben meiner navigation, dieser bereich wird dann aber unbenutzbar ab einer bestimmten navigationsebene. natürlich max-width, etc sind mir ein begriff, aber da zerhauts dann doch einiges.

deshalb suche ich eine praktikablere menüführung, die schön übersichtlich ist und dennoch im sinne von liquidität mehr möglichkeiten bietet.

Denke an eine Breadcrumb Navigation (horizontale Hierarchie)
Start > SektionA > GruppeA1 > Seite_1a
       |SektionB] |GruppeA2| |Seite_1b|
                  |GruppeA3| |Seite_1c|
                             |Seite_1d|
Nun stelle dir vor, dass bei hover über einen der Teile ein dropdown-Menu alle alternativen listet

Diese Navigation bietet natürlich eine Beschränkung. Du kannst nicht direkt auf eine andere Gruppe in einer anderen Sektion landen, wenn du nur einen Level einbeziehst.
Wenn du zwei Level einbeziehst kannst du bereits eine andere Seite in einer anderen Gruppe erreichen.

Natürlich ist die Navigation dann nicht mehr "links"

mfg Beat

[meinheart]

hi,

Denke an eine Breadcrumb Navigation (horizontale Hierarchie)
Start > SektionA > GruppeA1 > Seite_1a
       |SektionB] |GruppeA2| |Seite_1b|
                  |GruppeA3| |Seite_1c|
                             |Seite_1d|
Nun stelle dir vor, dass bei hover über einen der Teile ein dropdown-Menu alle alternativen listet

danke für den vorschlag, und was hierbei machen, wenn der vieport zu schmal wird für die "spalten"? einfach umbrechen? dann hat man aber einen seltsamen hover-js-effekt ...

wie würde ich überhaupt in grundzügen, eine verschachtelte liste so css-formatieren. und wo im quelltext sind dann für js die unterebenen untergebracht?

grusz

[Beat]

Denke an eine Breadcrumb Navigation (horizontale Hierarchie)
Start > SektionA > GruppeA1 > Seite_1a
        |SektionB] |GruppeA2| |Seite_1b|
                   |GruppeA3| |Seite_1c|
                              |Seite_1d|
Nun stelle dir vor, dass bei hover über einen der Teile ein dropdown-Menu alle alternativen listet

danke für den vorschlag, und was hierbei machen, wenn der vieport zu schmal wird für die "spalten"? einfach umbrechen? dann hat man aber einen seltsamen hover-js-effekt ...

In dem Fall würde ich JS zu Hilfe nehmen.
Ab einer bestimmten Viewport-Breite wird dann nur noch das letzte Dropdown angezeigt. Es kann dann also umbrechen, ohne einen unbedienbaren Zustand zu erzeugen.
Stichwort: Klassen via JS umschalten
Der Default wäre, dass ohne JS überhaupt nur ein Dropdown zur Verfügung steht, bei ausreihend Platz aber dann die zwischen-hierarchischen Dropdowns auch mit der entsprechenden Klassen versehen werden.

wie würde ich überhaupt in Grundzügen, eine verschachtelte liste so css-formatieren. und wo im quelltext sind dann für js die unterebenen untergebracht?

Darüber muss ich noch etwas nachdenken...

mfg Beat