horz. Navigationslieste

raKai · 17. Juli 2007

Wie im Titel schon deutlich wird handelt es sich um ein, für den einen oder anderen, eher kleineres Problem.

Ich sitze seit ner Zeit an einer horz. dynamischen Navigationsleiste und komme aufgrund diverser Probleme nicht weiter.

- erstes Problem: Die Navigationsleiste basiert auf dem css-hover effekt. Jedoch schaffe ich es nicht auch die Unterpunkte horz. darzustellen.

- zweites Problem: Sobald ich Die Formatierung der Unterounkte so verändere, dass keine Hintergrundfarbe mehr angezeigt wird, so werden die Unterpunkte ausgeblendet, solange ich nicht genau auf dem Schriftzug drauf bin. Folglich werden die Punkte sofort ausgeblendet, wenn ich den Hauptpunkt (png-Grafik) verlasse.

- drittes Problem: solange man mit der maus über keinen anderen Hauptpunkt fährt, sollen die Unterpunkte vom "aktiven" angezeigt werden.

- viertes Problem: mit javascript kenne ich mich nicht aus.

>> Hier noch der aktuelle Stand
und so sollte es sein: -1-2-

mein code:

Code:

<html>
<head>
<title>eden-gamong v3</title>

<style type="text/css">
  body {
    font:12px Arial;
    color: black; background-color: #d65a1f;
  }

  .NavMain	{position:absolute; top:0px; left:0px;}
  .NavEden	{position:absolute; top:0px; left:0px;}
  .NavAct	{position:absolute; top:0px; left:0px;}
  .NavPartner	{position:absolute; top:0px; left:0px;}

  .NavMain2	{position:absolute; top:-1px; left:0px; display: block;}
  .NavEden2	{position:absolute; top:1px; left:0px; display: block;}
  .NavAct2	{position:absolute; top:-1px; left:0px; display: block;}
  .NavPartner2	{position:absolute; top:1px; left:0px; display: block;}


  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }

  ul#Navigation a, ul#Navigation span {
    float: left;
    padding: 0.2em 1em;
    text-decoration: none;
    color:white;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    color: white;
    text-decoration: underline;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: white; text-decoration: underline;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    color: white; text-decoration: underline;
  }

    /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: inline;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:black; padding-bottom:0.4em;
  }

</style>
</head>
  <img width="100%" height="25" style="position:absolute; top:100px; left:0px" src="bg_nav.jpg">
  <img width="100%" height="100" style="position:absolute; top:0px; left:0px" src="bg_header.jpg">

   <div>
    <img style="position:absolute; top:0px; left:0px;" src="header.png" alt="header wird geladen">
   </div>


  <div>
    <ul id="Navigation">
     <li style="position:absolute; top:100px; left:20px;">
     <img name="n1" onmouseover="n1.className='NavMain2'; n2.className='NavEden'; n3.className='NavAct'; n4.className='NavPartner';"  src="main.png">
      <ul>
        <li><a href="#Beispiel">News</a></li>
        <li><a href="#Beispiel">Archive</a></li>
        <li><a href="#Beispiel">Articles</a></li>
        <li><a href="#Beispiel">Guestbook</a></li>
      </ul>
    </li>

    <li style="position:absolute; top:103px; left:125px;">
     <img name="n2" onmouseover="n1.className='NavMain'; n2.className='NavEden2'; n3.className='NavAct'; n4.className='NavPartner';" src="eden.png">
      <ul>
        <li><a href="#Beispiel">About</a></li>
        <li><a href="#Beispiel">Awards</a></li>
        <li><a href="#Beispiel">Matches</a></li>
        <li><a href="#Beispiel">Teams</a></li>
      </ul>
    </li>

    <li style="position:absolute; top:100px; left:230px;">
     <img name="n3" onmouseover="n1.className='NavMain'; n2.className='NavEden'; n3.className='NavAct2'; n4.className='NavPartner';" src="act.png">
    </li>

    <li style="position:absolute; top:103px; left:335px;">
     <img name="n4" onmouseover="n1.className='NavMain'; n2.className='NavEden'; n3.className='NavAct'; n4.className='NavPartner2';" src="partner.png">
      <ul>
        <li><a href="#Beispiel">Seite1</a></li>
        <li><span>aktuelle</span></li>
        <li><a href="#Beispiel">Seite2</a></li>
      </ul>
    </li>


  </ul>
  </div>
     <img style="position:absolute; top:100px; left:440px;" src="btn.png">

</html>

Kann mir vllt. wer weiterhelfen? =(

*edit: hier ein Beispiel welches ich grade gefunden habe

dkdenz · 17. Juli 2007

Noch ein Beispiel:
Stu Nicholls | CSSplay | Validating drop down cross-browser menu

raKai · 18. Juli 2007

Erstmal ein Dankeschön an dkDenz. Habe mich aber nochmal selber dran versucht. Das Ergebnis ist auf der ursprüngliche URL zu betrachten.
Derzeit ist es jedoch nur für FF otimiert. bzgl einer IE-korektur werde ich mich noch melden.^^

horz. Navigationslieste

raKai

New member

dkdenz

New member

raKai

New member