chucky: navigations div bei hover anzeigen

SELF-Forum

navigations div bei hover anzeigen

chucky Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi
Also ich habe ein Problem und zwar:

Ich habe folgende Navigation:

http://img221.imageshack.us/img221/6059/namenloswk2.gif

ich möchte wenn ich mit der maus über die einzelnen Links der ersten Navigation gehe, sich die links in der unteren Navigation veraendern.

Wenn ein Link angeklickt wird sollen natuerlich die Unterpunkte
auch in der zweiten Navigation stehen bleiben.

hier mal mein HTML Code:

<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body>
<div id="container">
 <div id="head">
  <a href=""><div  id="logo"></div></a>
  <div id="nav">
   <ul>
    <li><a href="">IMPRINT & PRIVACY POLICY</a></li>&nbsp;|
    <li><a href="">GERMAN</a></li>
   </ul>
  </div>
 </div>

<div id="primnav">
  <ul>

<li class="first"><a href="" class="selected">HOME</a></li>
   <li><a href="">NEWS</a></li>
   <li><a href="">LIP - THE PUBLISHER</a></li>
   <li><a href="">PORTFOLIO</a></li>
   <li><a href="">HOW TO BECOME AN AUTHOR</a></li>
   <li><a href="">CONTACT US</a></li>
  </ul>
 </div>

<div id="subnav1">
  <ul>
   <li><a href="">Philosophy</a></li>&nbsp;|
   <li><a href="">Commitment</a></li>&nbsp;|
   <li><a href="">Staff</a></li>&nbsp;|
   <li><a href="">Insight</a></li>&nbsp;|
   <li><a href="">Career</a></li>&nbsp;|
   <li><a href="">Parnters</a></li>&nbsp;|
   <li><a href="">Press Service</a></li>
  </ul>
 </div>

<div id="subnav2">
  <ul>
   <li><a href="">Philosophy</a></li>&nbsp;|
   <li><a href="">Commitment</a></li>&nbsp;
  </ul>
 </div>
</div>

</body>
</html>

subnav1 soll kommen wenn man ueber home ist mit der maus und subnav2 soll angezeigt werden wenn man zb über news geht.

und hier mal noch mein css code:

* {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 background-color: transparent;
}

ul { list-style:none;}

#container {
 width: 960px;
 margin: 0 auto;
 position: relative;
}

#head {
 float: left;
 width: 960px;
 background: #fff;
}

#logo {
 float: left;
 width: 340px;
 height: 105px;
 background: url(../pics/logo.gif) no-repeat;
}

#nav ul {
 text-align: right;
 margin: 5px 0 0;
 font-size:0.7em;
}

#nav ul li {
 display: inline;
 padding: 0 2px;

}

#nav a {
 text-decoration:none;
}

#primnav {
 float: left;
 width: 960px;
 font-size:0.8em;
 background: url(../pics/bg_nav.png) no-repeat right top;

}

#primnav ul {
 width:100%;
}

#primnav ul li.first {
 background:none;
}

#primnav ul li {
 float: left;
 height:35px;
 background: url(../pics/bg-nav-divider.png) no-repeat left bottom;
}

#primnav ul li a {
 color: #92adce;
 text-decoration:none;
 padding: 10px;
 margin: 4px;
 font-weight:bold;
 line-height: 35px;
}

#primnav ul li a.selected {
 color:#ffffff;
}

#primnav ul li a:hover {
 color:#ffffff;
}

#primnav a#link1:hover div {

}

/*********SUBNAV*********/

#subnav1 {
 margin: 3px 0 0 0;
 width:100%;
 background:#bf2b2b;
 float:left;
 color:#ffffff;
}

#subnav1 ul {
 padding:5px;
 font-size:0.7em;
}

#subnav1 ul li {
 display:inline;
}

#subnav1 ul li a {
 padding:5px;
 color:#ffffff;
 font-weight:bold;
 text-decoration:none;
}

#subnav2 {
 display:none;
 margin: 3px 0 0 0;
 width:100%;
 background:#bf2b2b;
 float:left;
 color:#ffffff;
}

#subnav2 ul {
 padding:5px;
 font-size:0.7em;
}

#subnav2 ul li {
 display:inline;
}

#subnav2 ul li a {
 padding:5px;
 color:#ffffff;
 font-weight:bold;
 text-decoration:none;
}

ich weiß man koennte es mit javascript machen, aber ich moechte lieber mit css arbeiten.

danke schon mal

greetz chucky

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. navigations div bei hover anzeigen

    thebach
    – Informationen zu den Bewertungsregeln

    Hi chucky,

    Du musst die Listenelemente schon ineinander verschachteln, sonst bleibt dir wirklich nur JavaScript.

    Hier gibt es Beispiele. (Drop-Down)

    thebach

    --
    selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
    "Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. navigations div bei hover anzeigen

      Malcolm Beck´s
      – Informationen zu den Bewertungsregeln

      hi,

      Du musst die Listenelemente schon ineinander verschachteln, sonst bleibt dir wirklich nur JavaScript.

      Hier gibt es Beispiele. (Drop-Down)

      Und hier noch ein beispiel, wie man die Ausgabe der Menus steuert und gleichzeitig entlinkt.

      grüße

      --
      I have a Dream...
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. navigations div bei hover anzeigen

    Engelein
    – Informationen zu den Bewertungsregeln

    ich möchte wenn ich mit der maus über die einzelnen Links der ersten Navigation gehe, sich die links in der unteren Navigation veraendern.

    Das lässt sich nur mittels :hover bewerkstelligen. Dazu muss aber das Untermenü ein HTML-Nachfahre des betreffenden :hover-Elements sein, also nicht so (etwas gekürzt) …

    <div id="primnav">
      <ul>
       <li class="first"><a href="" class="selected">HOME</a></li>
       <li><a href="">NEWS</a></li>
      </ul>
    </div>

    <div id="subnav1">
      <ul>
       <li><a href="">Philosophy</a></li>&nbsp;|
       <li><a href="">Commitment</a></li>&nbsp;|
      </ul>
    </div>

    <div id="subnav2">
      <ul>
       <li><a href="">Philosophy</a></li>&nbsp;|
       <li><a href="">Commitment</a></li>&nbsp;|
      </ul>
    </div>

    … sondern so:

    <div id="primnav">
      <ul>
        <li class="first"><a href="" class="selected">HOME</a>
          <ul id="subnavi1">
            <li><a href="">Philosophy</a></li>&nbsp;|
            <li><a href="">Commitment</a></li>&nbsp;|
           </ul>
        </li>
        <li><a href="">NEWS</a>
          <ul id="subnavi2">
            <li><a href="">Philosophy</a></li>&nbsp;|
            <li><a href="">Commitment</a></li>&nbsp;|
           </ul>
        </li>
       </ul>
    </div>

    (Mal ganz zu schweigen davon, dass letztere, verschachtelte Struktur auch HTML-seitig die tatsächliche Menüstruktur widerspiegelt. In deinem Ansatz ist das nicht gegeben, dort besteht kein Zusammenhang zwischen einem Obermenüpunkt und seinen Untermenüs.)

    Das Ein- und Ausblenden geschieht CSS-seitig folgendermaßen:

    ul li ul {
        display:none;
    }

    ul li:hover ul {
        display:block;
    }

    Wenn ein Link angeklickt wird sollen natuerlich die Unterpunkte
    auch in der zweiten Navigation stehen bleiben.

    Das musst du dann in der jeweils aktiven HTML-Seite klären. Nicht möglich (jedenfalls ohne Javascript) ist es, dass du in derselben Seite im Obermenü klickst und daraufhin das dazugehördene Untermenü auf ewig stehen bleibt, auch nachdem die Maus den Obermenüpunkt verlassen hat. Dafür bietet CSS erstens keine Funktionalität und zweitens beißt sich das mit :hover, du hättest dann einmal eine Untermenüaktivierung mittels Drüberfahren und einmal mittels Klick. Sowas verwirrt den Besucher nur.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. navigations div bei hover anzeigen

      chucky
      – Informationen zu den Bewertungsregeln

      danke für eure antworten,
      jetzt hab ich das Problem dass die Menü Punkte der ersten Navigation sich
      verschieben die bleiben nicht an der stelle wo sie sind.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. navigations div bei hover anzeigen

        EKKi
        – Informationen zu den Bewertungsregeln

        Mahlzeit,

        jetzt hab ich das Problem dass die Menü Punkte der ersten Navigation sich
        verschieben die bleiben nicht an der stelle wo sie sind.

        Die Halunken - verschieben sich einfach. Dann solltest Du sie anketten. Oder wahlweise einfach Dein Problem exakter beschreiben ...

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. navigations div bei hover anzeigen

          chucky
          – Informationen zu den Bewertungsregeln

          Also tut mir leid

          so sieht es im moment aus wenn ich mit der maus ueber home gehe,
          also News sollte ja eigentlich neben Home stehn bleiben und nicht unter das andere rutschen

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. navigations div bei hover anzeigen

            chucky
            – Informationen zu den Bewertungsregeln

            Also tut mir leid

            so sieht es im moment aus wenn ich mit der maus ueber home gehe,
            also News sollte ja eigentlich neben Home stehn bleiben und nicht unter das andere rutschen

            sorry link zum bild vergessen grml...

            http://img221.imageshack.us/img221/2169/namenlosuy5.gif

            bitteschön

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. navigations div bei hover anzeigen

              suit
              – Informationen zu den Bewertungsregeln

              so sieht es im moment aus wenn ich mit der maus ueber home gehe,
              also News sollte ja eigentlich neben Home stehn bleiben und nicht unter das andere rutschen
              sorry link zum bild vergessen grml...
              http://img221.imageshack.us/img221/2169/namenlosuy5.gif

              position: absolute für die 2. menuebene könnte dir womöglich helfen ;)

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln