Marc: Überkreuz-Navi in EINER verschachtelten Liste

SELF-Forum

Überkreuz-Navi in EINER verschachtelten Liste

Marc Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen,

hier eine Frage an die Fortgeschrittenen unter Euch:

Unsere Designerin hat die Überkreuznavigation lieben gelernt. Die habe ich bisher mit zwei voneinander unabhängigen Listen realisiert. Eine für die erste Ebene der Navigation (horizontale unter dem Seitenkopf), eine zweite (verschachtelte) Liste mit allen weiteren Ebenen, die dann links als übliches Menü realisiert wurde.

Die Listen ahbe ich dann noch mit versteckten Überschriften überschrieben, um Screenreader-Nutzern und Nutzern ohne CSS klar zu machen, was sie in den jeweiligen Listen finden.

Besser fände ich aber, nur eine einzige verschachtelte Liste für alle Navigationsebenen zu nutzen. Ich habe das auch bei einem Angebot realisiert http://www.netzwerk-laendlicher-raum.de/regionen.htm

Die zweite Ebene habe ich absolut positioniert. So weit so gut. Wenn ich eine dritte Menü-Abene hinzufüge, komme ich mit position:absolute nicht mehr weiter, positioniere ich zweite und dritte Ebene relativ, bekomme ich die dritte Ebene auch in den Navigationsbereich am linken Rand, allerdings rutschen die nachfolgendenlistitems der zweiten Ebene  nicht mehr unter die dritte Ebene. Das heißt, die dritte Ebene legt sich über die zweite Ebene, wodurch die zweite Ebene nicht mehr sichtbar und nutzbar ist.

Lässt sich dieses Problem lösen, oder bin ich hier in eine Sackgasse geraten? Kennt jemand Beispiele für eine besonders gelungene Überkreuz-Navi (vor allem in Bezug auf Usability/BF)? - Gerne auch einen Buchtipp o. ä. zum Selberlernen.

Vielen Dank!

Marc.

--
Und immer schön
validieren (http://validator.w3.org/)
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Überkreuz-Navi in EINER verschachtelten Liste

    Marc Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo nochmal,

    Vielleicht kann mir einer etwas erklären. Um mir den Textfluss in den Listen nicht zu verändern, habe ich die zweite Menüebene noch in ein div gepackt. Verschiebe ich das div nun, sollte sich doch an den Listen gar nichts mehr ändern, dass heißt, sie sollten wie üblich dargestellt werden.

    Die erste Ebene habe ich zwar gefloatet, aber das habe ich mit float:none; wieder zurückgesetzt. Es wird auch nichts mehr gefloatet.

    Das div, in dem sich die Menüebenen 2 bis x befinden, positioniere ich nicht einmal mehr mit position. Ich hebe die vorherige absolute Positionierung mittels position:static auf.

    Nun ist dieses div auch so hoch wie die zweite Menüebene, die dritte menüebene bricht aber vollkommen aus. Sie wird nicht innerhalb der zweiten Menüebene angezeigt und wirkt sich offenbar auch nicht auf die Höhe des umgebenden div aus.

    zur Verdeutlichung zwei Bilder:
    Im FF:

    Im IE7:

    Der HTML-Code:

      
<ul id="navLevel1">  
 <li class="cur"><span>Hintergrund</span>  
  <div id="navLevel2">  
   <ul>  
    <li><a href="#">Menüpunkt Nummer 2.1</a></li>  
    <li>  
     <a href="#">Menüpunkt Nummer 2.2</a>  
     <ul>  
      <li><a href="#">Menüpunkt Nummer 3.1</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.2</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.3</a></li>  
      <li><a href="#">Menüpunkt Nummer 3.4</a></li>  
     </ul>  
    </li>  
    <li><a href="#">Menüpunkt Nummer 2.3</a></li>  
   </ul>  
  </div></li>  
 <li><a href="#"><span>Regionen</span></a></li>  
 <li><a href="#"><span>Beispiele</span></a></li>  
 <li><a href="#"><span>Partner</span></a></li>  
 <li><a href="#"><span>Service</span></a></li>  
</ul>

    Der CSS-Code

      
/* 1. Level of main navigation (located in header) */  
  
ul#navLevel1 {  
 position:absolute;  
 top:132px;  
 left:248px;  
 min-width:60em;  
 list-style-type:none;  
}  
  
ul#navLevel1 li {  
 float:left;  
 width:11.2em;  
 height:36px;  
 margin-right:8px;  
}  
  
ul#navLevel1 li.cur {  
 height:24px;  
 padding-top:12px;  
 background-image:url(../images/layout/nav_e1_a.gif);  
}  
  
ul#navLevel1 li.cur span {  
 padding-left:12px;  
 font-size:1.2em;  
 color:#f1f4f6;  
 font-weight:bold;  
 background-image:url(../images/layout/nav_e1_bullet_a.gif);  
 background-repeat:no-repeat;  
 background-position:0 2px;  
}  
  
ul#navLevel1 li a {  
 float:left;  
 width:11.2em;  
 height:24px;  
 padding-top:12px;  
 color:#f1f4f6;  
 background-image:url(../images/layout/nav_e1.gif);  
 background-repeat:repeat-x;  
}  
  
ul#navLevel1 li a span {  
 padding-left:15px;  
 font-size:1.2em;  
 color:#f1f4f6;  
 font-weight:bold;  
 background-image:url(../images/layout/nav_e1_bullet.gif);  
 background-repeat:no-repeat;  
 background-position:0 2px;  
}  
  
ul#navLevel1 li a:active,  
ul#navLevel1 li a:focus,  
ul#navLevel1 li a:hover {  
 background-image:url(../images/layout/nav_e1_r.gif);  
 text-decoration:none;  
}  
  
ul#navLevel1 li a:active span,  
ul#navLevel1 li a:focus span,  
ul#navLevel1 li a:hover span {  
 background-image:url(../images/layout/nav_e1_bullet_r.gif);  
}  
  
/* Main navigation level 2 to 4 (located in navLevel2 area) */  
  
ul#navLevel1 li.cur div#navLevel2 {  
 position:static;  
 margin-left:-248px;  
 border:1px solid red;  
 clear:both;  
}  
  
ul#navLevel1 li.cur div#navLevel2 ul {  
 position:static;  
 width:24.8em;  
 padding-top:0.8em;  
}  
  
div#navLevel2 li {  
 float:none;  
 position:static;  
 width:9.5em;  
 height:2.4em;  
 margin-bottom:8px;  
 padding-right:115px;  
 background-image:url(../images/layout/nav_e2_ecke_gelbblau.gif);  
 background-repeat:no-repeat;  
 background-position:right;  
}  
  
div#navLevel2 ul li a {  
 display:block;  
 width:18.9em;  
 height:2.4em;  
 padding-top:4px;  
 font-size:1.1em;  
 font-weight:bold;  
 color:#f1f4f6;  
 padding-left:16px;  
 background-image:url(../images/layout/nav_e2_bullet.gif);  
 background-repeat:no-repeat;  
 background-position:0 4px;  
}  
  
div#navLevel2 ul li ul li:active,  
div#navLevel2 ul li:focus,  
div#navLevel2 ul li:hover {  
 width:12em;  
 background-image:url(../images/layout/nav_e2_ecke_gelbblau_r.gif);  
 text-decoration:none;  
}  
  
div#navLevel2 ul li a:active,  
div#navLevel2 ul li a:focus,  
div#navLevel2 ul li a:hover {  
 background-image:url(../images/layout/nav_e2_bullet_r.gif);  
 text-decoration:none;  
}

    Kann mir einer das Verhalten der Browser erklären? ...

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Überkreuz-Navi in EINER verschachtelten Liste

      Marc Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo ein drittes Mal,

      Das Problem habe ich gelöst (nett so mit sich selber zu diskutieren). :-)

      Noch sieht es nicht schön aus, aber für das Layout habe ich bereits eine Lösung. Zu sehen unter http://www.mhis.de/self/dvs/dvsTEMPLATES/ - allerdings nicht für lange.

      Später (wenn die typo3-Umsetzung des ganzen Angebotes abgeschlossen ist) unter: http://www.netzwerk-laendlicher-raum.de/

      Falls jemand selber mal so etwas basteln möchte. Der HTML-Code hat schon gestimmt. Am CSS kann man noch optimieren.

      Der eigentliche Fehler ist aber behoben. Das Problem waren zwei Höhenangaben, die ich übersehen hatte. (Bin ich nur mit Hilfe drauf gekommen...)

      Die Probleme lagen hier:

        
/* 1. Level of main navigation (located in header) */  
  
ul#navLevel1 li {  
 float:left;  
 width:11.2em;  
 height:36px; /* <- Diese Höhenangabe muss raus! */  
 margin-right:8px;  
}  
/* Main navigation level 2 to 4 (located in navLevel2 area) */  
  
ul#navLevel1 li.cur div#navLevel2 {  
 position:static;  
 margin-left:-248px;  
}  
  
  
  
div#navLevel2 li {  
 float:none;  
 width:9.5em;  
 height:2.4em; /* <- Und diese Höhenangabe muss auch raus! */  
 [...]  
}

      Wie gesagt: ich finde die Überkreuz-Navigation in EINER verschachtelten Liste die beste (wenn nicht gar die einzige sinnvolle) Möglichkeit auch Nutzern ohne CSS oder grafische Browser die Struktur der Site zu verdeutlichen.

      Ist da eigentlich noch keiner drauf gekommen? - Im Web habe ich nichts dazu gefunden. CMSe scheinen hier auch immer getrennte Listen für Überkreuz-Navigationen zu generieren (zumindest die vorgefertigten Lösungen) - je eine für die erste Menüebene und eine andere für weitere Menüebenen.

      Viele Grüße,
      Marc.

      --
      Und immer schön
      validieren (http://validator.w3.org/)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Überkreuz-Navi in EINER verschachtelten Liste

        Engin Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi Marc,

        Das Problem habe ich gelöst (nett so mit sich selber zu diskutieren). :-)

        Hat mir auch Spaß gemacht, dir zuzuhören ähh zuzusehen. :-)

        Jetzt habe ich diesen Thread seid beginn an verfolgt, jetzt erklär mir doch mal Bitte, was zum Kuckuck ist eine
        "Überkreuz-Navigation"?

        Klappen bei dir irgendwelche untermenus auf wenn du die Links hoverst? Ich frag deshalb, weil bei mir die Darstellung der Seite
        mehr oder weniger Katastrophal erscheint (zumindest die Linke Navi), das wollte ich dir letztens schon mitteilen,
        war mir aber nicht Sicher ob das so gewollt ist.

        Hab dir mal 2 Screenshots vom FF und IE6 hochgeladen,
        http://nimmet.de/nimmet-bilder/netzwerk-laendlicher.jpg FF 2.0.0.12

        http://nimmet.de/nimmet-bilder/netzwerk-laendlicher-ie6.jpg IE 6

        Dieses Post ist nicht Negativ gemeint, also nicht in den falschen Hals bekommen.

        Grüße aus H im R,
        Engin

        --
        Von wegen "Geld wächst nicht auf Bäumen"!
        Der Valligator
        "Computer sagt Nein"
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Überkreuz-Navi in EINER verschachtelten Liste

          Marc Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo,

          Das Problem habe ich gelöst (nett so mit sich selber zu diskutieren). :-)

          Hat mir auch Spaß gemacht, dir zuzuhören ähh zuzusehen. :-)

          Jetzt habe ich diesen Thread seid beginn an verfolgt, jetzt erklär mir doch mal Bitte, was zum Kuckuck ist eine
          "Überkreuz-Navigation"?

          Die erste Navigations-Ebene horizontal (in der Regel im oder unter dem Kopsbereich), die Ebene 2 bis x links, (wo man die Navigation gewohnt ist).

          Klappen bei dir irgendwelche untermenus auf wenn du die Links hoverst? Ich frag deshalb, weil bei mir die Darstellung der Seite
          mehr oder weniger Katastrophal erscheint (zumindest die Linke Navi), das wollte ich dir letztens schon mitteilen,
          war mir aber nicht Sicher ob das so gewollt ist.

          Jein. Das Problem war ja, das die Ebenen 2 bis x nicht richtig verschachtelt wurden (das lag an der Höhenangabe der Listitems in der ersten Nav-Ebene)

          Ohne die Höhenangabe bricht zwar das Layout zusammen, aber das ist kein prinzipielles Problem mehr (werde ich in den nächsten Tagen angehen).

          Hab dir mal 2 Screenshots vom FF und IE6 hochgeladen,
          http://nimmet.de/nimmet-bilder/netzwerk-laendlicher.jpg FF 2.0.0.12

          Ich weiß - im IE7 sieht es genauso aus. Aber wie gesagt: das mache ich morgen.

          http://nimmet.de/nimmet-bilder/netzwerk-laendlicher-ie6.jpg IE 6

          IE6 unterstützen wir nur noch mit Einschränkungen - in unseren Statistiken ist der innerhalb eines Jahres von über neunzig auf 20 Prozent zurückgegangen - Tendenz weiter stark fallend.

          Dieses Post ist nicht Negativ gemeint, also nicht in den falschen Hals bekommen.

          Bin für jede konstruktive Kritik/Hinweise dankbar!

          Viele Grüße,
          Marc.

          --
          Und immer schön
          validieren (http://validator.w3.org/)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Überkreuz-Navi in EINER verschachtelten Liste

            Engin Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi Marc,

            Jein. Das Problem war ja, das die Ebenen 2 bis x nicht richtig verschachtelt wurden (das lag an der Höhenangabe der Listitems in der ersten Nav-Ebene)

            Also ich finde diese verschachtelung nicht grad Sinnvoll, aber das ist ja Geschmackssache.

            IE6 unterstützen wir nur noch mit Einschränkungen - in unseren Statistiken ist der innerhalb eines Jahres von über neunzig auf 20 Prozent zurückgegangen - Tendenz weiter stark fallend.

            Da habt ihr es Gut, bei mir

            "Anzahl aller PageViews: 187772

            Internet Explorer gesamt: 131413 (69.99% aller PageViews)"

            und davon sind Rund 70% IE 6er.

            Bin für jede konstruktive Kritik/Hinweise dankbar!

            Leider denken nicht alle wie du und fühlen sich gleich angegriffen bei so einem Post, daher der Zusatz.

            Grüße aus H im R,
            Engin

            --
            Von wegen "Geld wächst nicht auf Bäumen"!
            Der Valligator
            "Computer sagt Nein"
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln