tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
727
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 14.05.11 13:09 #1
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

        <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>
     
    Zitieren Zitieren
  2. 14.05.11 17:45 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Bevor ich mir das CSS genauer angucke, zeig uns bitte auch den Ausschnitt des HTML.
     
    Zitieren Zitieren
  3. 14.05.11 18:47 #3
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    ups tschuldigung...

    meintest du so?

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    <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>
     
    Zitieren Zitieren
  4. 15.05.11 14:28 #4
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Ich kann beim groben drüberschauen kein Problem entdecken. Was passiert denn? Bzw. was passiert den nicht? Welchen Browser verwendest Du?
     
    Zitieren Zitieren
  5. 15.05.11 15:42 #5
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    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?
     
    Zitieren Zitieren
  6. 16.05.11 08:53 #6
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    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.
     
    Zitieren Zitieren
  7. 16.05.11 13:57 #7
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    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!
     
    Zitieren Zitieren
  8. 16.05.11 21:51 #8
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    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?
     
    Zitieren Zitieren
  9. 17.05.11 00:52 #9
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    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?

     
    Zitieren Zitieren
  10. 17.05.11 15:17 #10
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von rizzoo Beitrag anzeigen
    ... Ne idee?
    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-Code:
    <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:
    Code css:
    1
2
3
4
5
6
7
8
9
10

    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.
     
    Zitieren Zitieren
  11. 17.05.11 16:35 #11
    rizzoo rizzoo ist offline Rookie
    Registriert seit
    May 2011
    Beiträge
    8
    SUPER!

    DANKE.....

    ich schaue mich weiter um und lerne

    LG
     
    Zitieren Zitieren
« Tabellen trotz border-spacing rechts und links bündig | Footer mit Position: absolute nicht möglich? »

Ähnliche Themen

  1. Vertikale Ausrichtung in horiz. Navigation
    Von Fanatico im Forum CSS
    Antworten: 5
    Letzter Beitrag: 08.07.09, 20:17
  2. nach Auswahl eines Punktes im Drop Down Menü ein weiteres Drop Down Menü anzeigen
    Von Dnate im Forum Javascript & Ajax
    Antworten: 9
    Letzter Beitrag: 22.08.08, 09:35
  3. Zweite Ebene einer Drop-Down Navigation wird immer zu breit
    Von Widget im Forum CSS
    Antworten: 1
    Letzter Beitrag: 05.03.08, 16:17
  4. Drop Down Menü
    Von meiosei im Forum HTML & XHTML
    Antworten: 22
    Letzter Beitrag: 10.08.05, 10:41
  5. drop-down menü?
    Von Flame im Forum HTML-Editoren
    Antworten: 2
    Letzter Beitrag: 18.12.01, 19:28

Stichworte