Seitennavigation mit Ordnernamen als Überschrift wie?, 4 Navibäume nebeneinander mit Ordnernamen und Seiten Einstellungen

[andi]

das bekannteste dropdown dürfte wohl das suckerfish dropdown sein. auf der seite gibt es sogar eine schritt-für-schritt anleitung. leider nur mit javascript für den ie.

dann gäbe es noch das dropdown-menü von stu nicholls. kommt ganz ohne javascript aus. allerdings mit conditional comments für den ie, welche du nicht ohne weiteres mit der listennavigation hinkriegst.


gruss andi

[outline4]

ich musste mir die sachen selber beantworten.

mit ungeordneten listen <ul><li> gings NICHT. jedenfalls nicht auf allen browsern.
dann habe ich ne interessante lösung mit divs gefunden:
man braucht nur ein modul für haupt und subnavigation.
die styles sind sehr einfach.
das teil läuft auf allen browsern.

styles:

.ordner {
position:relative;
display:inline;
padding:0;
padding-left:5px;
padding-right:5px;
}

.seite {
position:absolute; /* durch "absolute" wird der div flow der ordner nicht gestört */
top:18px;
left:5px;
padding:0;
}

.seitenlink a etc.
.ordnerlink a etc.

Modulconfig:

- Startordner: root
- Anzeigeart: Ordner mit Seiten
- Komplette Ordnerstruktur anzeigen: ja
- Startseiten anzeigen: ja

Ebene:
{layer}

Seite:
<span class="seitenlink"><a href="{link}">{name}</a><br /></span>

Aktuelle Seite:
<span class="seite_active">{name}<br /></span>

Ordner:
(ohne seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span></div>
(mit seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span><div class="seite">{folder}</div></div>

Aktiver Ordner:
<div class="ordner"><a href="{link}" id="ordner_active">{name}</a><div class="seite">{folder}</div></div>

Verfolgter Ordner:
dito aktiv.

zu sehen hier:
http://www.felber-stiftung.ch/projekt01/
achtung baustelle! wird später im root sein!

hope this helps
cheers
*s*

Der Beitrag wurde von outline4 bearbeitet: Sun. 12. August 2007, 23:23

[andi]

sorry, aber dein menü hat auch nichts mit dem menü zu tun, von welchem hier im beitrag die rede ist....wer soll schon wissen was du willst?

update:

mit ungeordneten listen <ul><li> gings NICHT. jedenfalls nicht auf allen browsern.

habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.


gruss andi

[outline4]

sorry, aber dein menü hat auch nichts mit dem menü zu tun, von welchem hier im beitrag die rede ist....wer soll schon wissen was du willst?

äähm... hallooo? guten morgen!
das ist derselbe typ menu, oder?

(mit seiten in jedem ordner)
Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 |
- 1. Seite | - 1. Seite | - 1. Seite | - 1. Seite |
- 2. Seite | - 2. Seite | - 2. Seite | - 2. Seite |
- 3. Seite | - 3. Seite | - 3. Seite | - 3. Seite |
- 4. Seite | - 4. Seite | - 4. Seite | - 4. Seite |
- 5. Seite | - 5. Seite | - 5. Seite | - 5. Seite |

(nur seiten im aktiven ordner)
Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 |
- 1. Seite |
- 2. Seite |
- 3. Seite |
- 4. Seite |
- 5. Seite |

und genau diesselbe situation im backend...

nur funktioniert meine methode für eine unbegrenzte anzahl ordner.
und semantisch ist das korrekt! nur weil alle listen brauchen heisst das noch lange nichts... die divs funktionieren perfekt. auch mit taborder etc...

hier der output:
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 1</a></span></div>
<div class="ordner"><a href="#" id="ordner_active">Ordner 2</a>
<div class="seite">
<span class="seitenlink"><a href="#">Seite 1</a><br /></span>
<span class="seitenlink"><a href="#">Seite 2</a><br /></span>
<span class="seitenlink"><a href="#">Seite 3</a><br /></span>
<span class="seitenlink"><a href="#">Seite 4</a><br /></span>
</div>
</div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 3</a></span></div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 4</a></span></div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 5</a></span></div>

ich weiss ja nicht. also, bevor du hier unnütze links und beleidigungen verteilst, schau du besser mal nach um was es hier geht!

update:
habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.
gruss andi

dein menu vom link ist total was anderes... und ja... das geht mit listen!

das was ich vorhatte geht nicht mit listen! impossible!
voilà
guten morgen!

Der Beitrag wurde von outline4 bearbeitet: Mon. 13. August 2007, 09:04

[andi]

äähm... hallooo? guten morgen!

morgen

das ist derselbe typ menu, oder?

mach die augen auf und lies den ersten beitrag von feni. wie gesagt, welche anforderungen du hast weiss nur die kristallkugel. meine lösung funktioniert einwandfrei im bezug auf die ausgangslage in diesem beitrag.

nur funktioniert meine methode für eine unbegrenzte anzahl ordner.

aha. und bei der von mir publizierte lösung nicht? woran solls denn scheitern? die navigation ist beliebig erweiterbar.

und semantisch ist das korrekt! nur weil alle listen brauchen heisst das noch lange nichts... die divs funktionieren perfekt. auch mit taborder etc...

schau dir deine seite doch mal ohne css an und sag mir, wie ich z.b erkennen soll, in welchem zusammenhang «felber - stiftung» und «stiftungsrat» stehen. die seiten stehen hierarchisch gleichberechtigt, obwohl «stiftungsrat» eine unterseite von «felber - stiftung» ist.

ich weiss ja nicht. also, bevor du hier unnütze links und beleidigungen verteilst, schau du besser mal nach um was es hier geht!
dein menu vom link ist total was anderes... und ja... das geht mit listen!

von meiner seite wurde keine beleidigung ausgesprochen. ich habe lediglich die fakten auf den tisch gelegt so wie sie sind.

das was ich vorhatte geht nicht mit listen! impossible!

in diesem satz schreibst du ja selber, dass das was du vorhattest, nicht mit listen geht. die ausgangslage in diesem beitrag ist mit meiner lösung reproduzierbar. was du vorhattest ist nirgendwo geschrieben. dein onlinebeispiel lässt sich ohne probleme mit meiner lösung umsetzen.

du kannst dir gerne noch ein paar gedanken darüber machen. ich bin aus diesem beitrag raus (es sei denn feni kommt noch mit einem anliegen seinerseits).

gruss andi

[outline4]

bla

danke für deine ausführliche hilfe!
*s*

[andi]

ehm, machst du jetzt schon eigene zitate, welche ich nicht widergegeben habe?

[alexander]

OK, bitte kehrt zum Thema zurück. Persönliche Differenzen klärt bitte per PM. Herzlichen Dank.

[feniweb]

Hier also meine aktuelle Lösung.

 Zuschneiden_65_k.jpg ( 24.11KB ) Anzahl der Downloads: 11


CSS Datei:
bis jetzt wird es in allen Browsern richtig dargestellt

QUELLTEXT

* {
    margin:  0;
    padding: 0;
    border: none;
    }
    
body {
    background-color: #eff8e7;
    color:  #000;
    }
    
ul#navmenu {
    float:  left;
    width:  28.5em;
    list-style:  none;
    background-image: url(../../media/bilder-layout/hg-navi-01.jpg);
    background-repeat: no-repeat;
    height: 8.65em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}

ul#navmenu a {
    border: 0 none;
    padding: 1px 0px 0px 0px;
    float: none !important; /*für Opera*/
    float: left; /*für IE*/
    display: block;
    color: #454518;
    text-decoration: none;
    height: auto !important;
    height: 1%; /*für IE*/
    font-size: 85%;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}
    
ul#navmenu li {
    float:  left;
    width: 110px;

}    
    
ul#navmenu ul {
    margin-top:  0.5em;
    list-style:  none;
    font-size:  80%;    
    padding-left: 0px;    
}
    
ul#navmenu li a {
    list-style-type: none;
    display: block;
    text-decoration: none;
    color: #464600;
    background-image: url(../../media/bilder-layout/arrow-right.gif);
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding: 2px 0px 0px 10px;
}

ul#navmenu li a.navactive  {
    list-style-type: none;
    display: block;
    text-decoration: none;
    padding: 2px 0px 0px 10px;
    background-color: #FFFFFF;
    color: #990000;
    background-image: url(../../media/bilder-layout/arrow-right.gif);
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding: 2px 0px 0px 10px;
}
    
ul#navmenu li a:hover {
    color:  #990000;
    background-color: #FFFFFF;
    display: block;

}


ul#navmenu .ordner {
    float:  left;
    width: 110px;
    font-size: 90%;
    text-align: center;
    padding-bottom: 5px;
}

ul#navmenu .ordneraktive {
    float:  left;
    width: 110px;
    font-size: 90%;
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
}

Gruss

[outline4]

ehm, machst du jetzt schon eigene zitate, welche ich nicht widergegeben habe?

sorry, muss mich entschuldigen.
hatte "wer will schon wissen was du weisst?", anstatt "wer soll schon wissen was du willst?" gelesen. das ist natürlich was gaaanz anderes und dann war es noch montag morgen. mir wurde was wichtiges geklaut etc etc...
war gefrustet!

deine lösung ist gut!
danke für das gute beispiel!

muss mal testen ob die dann wirklich überall läuft, denn ich hatte es genau so gelöst, bin aber immer wieder auf inkompabilitäten beim css gestossen!

nochmals sorry!

@feniweb
vielen dank fürs posten!

cheers
*s*

[andi]

muss mal testen ob die dann wirklich überall läuft, denn ich hatte es genau so gelöst, bin aber immer wieder auf inkompabilitäten beim css gestossen!

also unter ie 5.5, 6 und 7 win, opera 9, firefox 2 und safari 2 lufts. mehr habe ich nicht getestet. falls es in einem anderen browser nicht klappt bitte ich um rückmeldung.