selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

Multi-Level-Navigation im IE6 ohne JS

Autor: -NoName26-
Datum: 29.08.2010 20:06:11

Guten Abend,

ich möchte gerne eine horizontale 3-Level-Navigation mit ausklappenden Ebenen schaffen, ohne JS verwenden zu müssen, d.h. nur mit CSS, die auch im IE6 funktioniert.

Funktion:

Betreten der Startseite: nur 1. Level sichtbar; Hover über Menüpunkte des 1. Levels öffnet 2. Level, Hover über Menüpunkte des 2. Levels öffnet 3. Level. Bewegt man die Maus von der 2. bzw. 3. Ebene, verschwindet diese wieder.

Befindet man sich auf einer Unterseite der 2. Ebene sind 1. und 2. Level konstant sichtbar. Befindet man sich auf einer Unterseite der 3. Ebene sind 1., 2. und 3. Level konstant sichtbar.

Die konstat sichtbaren Levels sollen beim Hover über einen nicht aktiven Menüpunkt (s. "Betreten der Startseite") "überdeckt" werden.

Hat jemand eine Idee, wie ich das umsetzen kann? Bisher habe ich - wg. des IE6 - keine Lösung gefunden.

Vielen Dank für jede Hilfe!

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: Netinja
Datum: 29.08.2010 21:14:21

> Guten Abend,
>
> ich möchte gerne eine horizontale
> 3-Level-Navigation mit ausklappenden Ebenen
> schaffen, ohne JS verwenden zu müssen, d.h. nur
> mit CSS, die auch im IE6 funktioniert.
>
> Funktion:
>
> Betreten der Startseite: nur 1. Level sichtbar;
> Hover über Menüpunkte des 1. Levels öffnet 2.
> Level, Hover über Menüpunkte des 2. Levels öffnet
> 3. Level. Bewegt man die Maus von der 2. bzw. 3.
> Ebene, verschwindet diese wieder.
>
> Befindet man sich auf einer Unterseite der 2.
> Ebene sind 1. und 2. Level konstant sichtbar.
> Befindet man sich auf einer Unterseite der 3.
> Ebene sind 1., 2. und 3. Level konstant sichtbar.
>
>
> Die konstat sichtbaren Levels sollen beim Hover
> über einen nicht aktiven Menüpunkt (s. "Betreten
> der Startseite") "überdeckt" werden.
>
> Hat jemand eine Idee, wie ich das umsetzen kann?
> Bisher habe ich - wg. des IE6 - keine Lösung
> gefunden.


Dir auch einen Guten Abend,

Poste doch bitte mal einen Link zu der Datei, die du schon hast. Dann kann man daran anknüpfen.

Dann wird vielleicht auch dieser Absatz klar:

> Die konstat sichtbaren Levels sollen beim Hover
> über einen nicht aktiven Menüpunkt (s. "Betreten
> der Startseite") "überdeckt" werden.

Da kann ich mir leider nicht vorstellen, wie du das meinst.


LG
Netinja

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: -NoName26-
Datum: 29.08.2010 22:05:56

> Poste doch bitte mal einen Link zu der Datei, die
> du schon hast. Dann kann man daran anknüpfen.

Einen Ansatz habe ich noch nicht. Ich habe noch nicht begonnen, weil ich bisher keine Idee habe, wie das auch im IE6 ohne Javascript machbar ist.

Vom Aufbau sollte das Menü exakt so sein: http://www.bree.de/index.php

Zusätzlich sollen die tieferen Ebenen allerdings schon beim MouseOver angezeigt werden, so wie hier: http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

Im zweiten Beispiel passt die Anordnung der Ebenen nicht, es sollen wir im 1. Beipiel drei gleich große Blöcke vertikal nebeneinander sein. Aber das ist ja erstmal zweitrangig.

Danke und Gruß,
NoName26

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: Netinja
Datum: 30.08.2010 10:37:19

> Einen Ansatz habe ich noch nicht. Ich habe noch
> nicht begonnen, weil ich bisher keine Idee habe,
> wie das auch im IE6 ohne Javascript machbar ist.

Hast du denn das Menü schon soweit, dass es  für die anderen Browser passt?

> Vom Aufbau sollte das Menü exakt so sein:
> http://www.bree.de/index.php

Bei mir klappt da aber nichts aus. ??

> Zusätzlich sollen die tieferen Ebenen allerdings
> schon beim MouseOver angezeigt werden, so wie
> hier:
> http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
>
> Im zweiten Beispiel passt die Anordnung der
> Ebenen nicht, es sollen wir im 1. Beipiel drei
> gleich große Blöcke vertikal nebeneinander sein.
> Aber das ist ja erstmal zweitrangig.

Du möchtest also die oberste Navigation waagrecht haben, und alle untendrunterliegenden sollen senkrecht sein?

Dann gib dem obersten Level der Suckerfish-Liste eine grössere Breite, damit alle Links waagrecht drin Platz haben.
Dann noch margin-left und margin-top von der ul vom zweiten Levels nach Wunsch anpassen, und dem li vom zweiten Level das float wieder wegnehmen, damit die Links wieder untereinander stehen.


LG
Netinja

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: Netinja
Datum: 30.08.2010 21:15:26

@ NoName

Hast du es hinbekommen, so wie ich es beschrieben habe?

So ganz habe ich immer noch nicht verstanden, was genau du mit "drei gleich große Blöcke vertikal nebeneinander" meinst.
Vielleicht die "Submenü-blöcke" vertikal nebeneinander?

Hier habe ich dir mal ein Stylesheet für eine waagrechte Navigation deines Suckerfishmenüs gemacht:

body {
   font-family: arial, helvetica, serif;
   }
#nav,#nav ul {
   /* all lists */
padding: 0;
   margin: 0;
   list-style: none;
   float : left;
   width : 11em;
        width : 75em;
   }
#nav li {
   /* all list items */
position : relative;
   float : left;
   line-height : 1.25em;
   margin-bottom : -1px;
   width: 11em;
   }
#nav li ul {
   /* second-level lists */
position : absolute;
   left: -999em;
   margin-left : 11.05em;
   margin-top : -1.35em;
        margin-left : 1em;
        margin-top :0.0em;
   }

#nav li ul li {
   /* all list items */
      position : relative;
   float : none;  }




#nav li ul ul {
   /* third-and-above-level lists */
left: -999em;
        margin-left: 11em;
        top: 0em;
   }
#nav li a {
   width: 11em;
   width : 10em;
   display : block;
   color : black;
   font-weight : bold;
   text-decoration : none;
   background-color : white;
   border : 1px solid black;
   padding : 0 0.5em;
   }
#nav li a:hover {
   color : white;
   background-color : black;
   }
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul {
   left: -999em;
   }
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul {
   /* lists nested under hovered list items */
left: auto;
   }
#content {
   margin-left : 12em;
   }

#nav li a {
   color: blue;
   }

#nav li ul li a {
   color: red;
   }

#nav li ul li ul li a  {
   color: green;
   }

#nav li ul li ul li ul li a  {
   color: black;
   }


es wäre schön, wenn du dich in deinem Thread nochmal äußern würdest.


LG
Netinja

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: gaby
Datum: 01.09.2010 17:38:11

> @ NoName
>
> Hast du es hinbekommen, so wie ich es beschrieben
> habe?
>
> So ganz habe ich immer noch nicht verstanden, was
> genau du mit "drei gleich große Blöcke vertikal
> nebeneinander" meinst.
> Vielleicht die "Submenü-blöcke" vertikal
> nebeneinander?
>
> Hier habe ich dir mal ein Stylesheet für eine
> waagrechte Navigation deines Suckerfishmenüs
> gemacht:

[...]

> es wäre schön, wenn du dich in deinem Thread
> nochmal äußern würdest.


Das sind wieder mal Typen, hier im Forum!
Nehmen Deine komplette Lösung, die fix und fertig zum copypasten auf einem silbernen Tablett gereicht wurde, und halten es noch nicht mal für nötig, auf Gegenfragen zu antworten, oder überhaupt irgendeine Rückmeldung zu geben!

Zeitweise habe ich den Eindruck, solche User versammeln sich nur _hier_.   :-(


Grüße
gaby

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: -NoName26-
Datum: 01.09.2010 19:41:59

Melde mich noch, hab das Thema auf meiner Liste nur nach hinten geschoben.

Sorry & Gruß,
NoName