✔ vertikale Navigation mit horizontalem Drop-Menü?

R

rizzoo

Grünschnabel
Tach zusammen,

ich bin nicht gaaanz so fit mit CSS, aber meistens hat es immer irgendwie funktioniert. :)
Aber jetzt:
Ich würde gerne eine Navigation haben, welche von der Grundanordnung ein vertikales Block Menü ist. Beim hover sollte dann (in der gleichen Zeile) ein horizontale Anordnung der weiterführenden Links kommen.
Ich will sozusagen ein horizontales Drop-Menü.
Ist das verständlich?

Müsste doch gehn.
Ich habs schon mit verschiedenene Tutorials probiert, aber ich bekomme es irgendwie nicht hin.

Vielleicht habt ihr ja ne Idee...

LG

R*

Code: 
    <style type="text/css">
    #navigation
    {
       width:150px;
       font-size:14px;
    }

    #navigation ul
    {   
       margin:0px;
       padding:0px;
       background-color:#666;
    }

    #navigation ul li
    {   
       height:25px;
       line-height:25px;
       list-style:none;
       padding-left:10px;

       color:#FFF;
       border-top:#fff solid;
       border-bottom:#fff solid;
       border-width:1px;
       cursor:pointer;
    }

    #navigation ul li:hover
    {
       background-color:#F90;
       position:relative;
    }

    #navigation ul ul
    {
       display:none;
       position:absolute;
       left:150px;
       top:0px;
       background-color:#999;
    }

    #navigation ul li:hover ul
    {
       display:block;
    }

    #navigation ul ul li {border:none; width:150px; float:left; display:inline; list-style:none}
    #navigation ul ul li:hover {text-decoration:underline; border:none;}
    </style>
 
ups tschuldigung...

meintest du so?

Code: 
<body>
<div id="navigation">
    <ul>
        <li>VITA
            <ul>
                <li>BASICS</li>
                <li>THEATER</li>
                <li>FILM</li>
                <li>SPRACHE</li>
            </ul>
        </li>
        <li>DEMO
            <ul>
                <li>VIDEO</li>
                <li>AUDIO</li>
            </ul>
        </li>
        <li>PHOTOS</li>
        <li>KONTAKT</li>
        <li>News</li>
    </ul>
</div>
</body>
</html>
 
Ich kann beim groben drüberschauen kein Problem entdecken. Was passiert denn? Bzw. was passiert den nicht? Welchen Browser verwendest Du?
 
Ne die Frage ist eher, was passiert nicht :

Beim hover sollte das dropdown menu als Zeile (und nicht als Block).
Sozusagen eine verticale Menüführung und der dropdown sollte horizontal sein...

Wer ne Idee? Ich muss das bei der zweiten UL machen oder?
 
Hallo,

ich würde einfach diese Fly-Line-Navigation von Stu Nicholls mit entsprechenden Anpassungen übernehmen: A CSS only fly-out/drop-down menu.
Allerdings müsstest du noch die Links (A-Elemente) in die LI-Elemente einfügen, da bei diesem Beispiel ein wesentlicher Teil der Formatierung an die A-Elemente gebunden ist.
 
Super!
DAnke!
Genau das was ich gesucht habe...

Es funktioniert auch!

Das einzige, was ich jetz nicht hinbekomme ist der "Current" status.
Also das die Links die gerade aktiv sind eine andere Frabe bekommen******!

Nochma so ne Frage.... :)
DANKE!
 
Meinst Du die Hervorhebung des Menüpunkts der Seite die gerade aufgerufen wurde?
Oder meinst Du die Markierung des Menüpunkts über dem die Maus sich gerade befindet?
 
ich mein: "die Hervorhebung des Menüpunkts der Seite die gerade aufgerufen wurde".
Also die Seite auf der sich der User gerade befindet...

Ne idee?

:)
 
rizzoo hat gesagt.:
... Ne idee?:)
Zum Vergrößern anklicken....
Ja: Schau dich bitte mal hier im Forum um.
Da du nicht der erste bist, den das interessiert, gibt es in den CSS-FAQ einen Beitrag von Maik "Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?", der das Vorgehen dabei prinzipiell auf zwei Arten beschreibt.

Ich würde ähnlich wie in der dort beschriebenen zweiten Art im HTML dem BODY-Element und den LI-Elementen der ersten Menü-Ebene ein signifikantes Klassenattribut zuweisen.
HTML: 
<body class="demo">

<div id="navigation">
  <ul>
    <li class="vita"><a href="#">VITA</a>
      <ul>
        <li><a href="#">BASICS</a></li>
        <li><a href="#">THEATER</a></li>
        <li><a href="#">FILM</a></li>
        <li><a href="#">SPRACHE</a></li>
      </ul>
    </li>
    <li class="demo"><a href="#">DEMO</a>
      <ul>
        <li><a href="#">VIDEO</a></li>
        <li><a href="#">AUDIO</a></li>
      </ul>
    </li>
    <li class="photos"><a href="#">PHOTOS</a></li>
    <li class="kontakt"><a href="#">KONTAKT</a></li>
    <li class="news"><a href="#">News</a></li>
  </ul>
</div>

</body>
Die Klassennamen habe ich mal entsprechend dem Inhalt des Menüpunktes gewählt:
"vita", "demo", "photos", "kontakt" und "news". Dem BODY-Element muss man nun ebenfalls entsprechend der angewählten Seite eins dieser Klassenattribute zuweisen. Im Beispiel ist das zufälligerweise "demo".

Im CSS sucht man sich die Regel für die HOVER-Formatierung der in diesen Listenelementen enthaltenen Links raus und ergänzt dort Klassenselektoren, die das A-Element auch dann markieren, wenn sowohl im BODY- als auch im LI-Element das gleiche Klassenattribut steht:
CSS: 
body.vita #navigation ul li.vita a,
body.demo #navigation ul li.demo a,
body.photos #navigation ul li.photos a,
body.kontakt #navigation ul li.kontakt a,
body.news #navigation ul li.news a,
#navigation ul li:hover a,
#navigation ul li a:hover {
    color: #fff;
    background: #b3ab79;    /* Hintergrundfarbe im HOVER-Zustand */
}
Diese Formatierung müsste sowohl die "vita"-, "demos"-, "photos"-, "kontakt"- als auch "news"-Seite erhalten, nur mit dem Unterschied, dass im HTML-BODY-Element ein der Seite entsprechendes Klassenattribut eingetragen wird. Mit anderen Worten: Diese fünf Seiten unterscheiden sich nur im Klassenattribut des HTML-BODY-Elements.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück