navigation prob

headgrowe · 2 Dezember 2007

Arbeite an folgender Navigation...
der :hover befehl funktioniert natürlich nicht beim IE und desshalb suche ich nach einer besseren lösung. habe eine gefunden durch den kommentar, der nur der IE versteht <!--[if IE]>, nicht gerade sauber!^^ den javascript verstehe ich nur teilweise und brauchte somit hilfe, damit ich ihn verädern und somit auch verwenden kann!
mfg jacob schneider

Code:

<head>
<title>Dynamische Navigationsleiste</title>

<style type="text/css">
  div#Tmenu {
    font-size: 94%;
    width: 39.8em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }
  * html div#Tmenu {
    width: 41.4em;
    w\idth: 39.8em;  /* IE 6 in standards-compliant mode */
  }
  div#Tmenu div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation [B]li[/B] {
    list-style: none;
    [B]float: left;[/B]
    [B]position: relative;[/B]
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }

  ul#Navigation [B]li ul[/B] {
    margin: 0; padding: 0;
    [B]position: absolute;[/B]
    [B]top: 1.8em;[/B] left: -0.4em;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation [B]li ul li[/B] {
    [B]float: none;[/B]
    [B]display: block;[/B]
    margin-top: 0.2em; margin-bottom: 0.2em;
  }

  ul#Navigation [B]a[/B], ul#Navigation [B]span[/B] {
    [B]display: block;[/B]
    [B]width: 7em;[/B]
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.23em 0.97em 0.17em 1.03em;
    border: 1px solid #600;
    border-left-color: #ea0; border-top-color: #ea0;
    color: white; background-color: #c00;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9.2em;
    w\idth: 7em;  /* IE 6 in standards-compliant mode */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    padding: 0.17em 1.03em 0.23em 0.97em;
    border-color: #ea0;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }
  ul#Navigation li ul a:hover {
    border-color: #900;
  }
  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }
  ul#Navigation li ul span {
    border-right-color: #c96; border-bottom-color: #c96;
    color: #900; background-color: white;
  }
  ul#Navigation li a:active, ul#Navigation li:hover a:active {
    color: black; background-color: #f00;
  }

/* [B]dynamisches Ein-/Ausblenden[/B] */
  ul#Navigation [B]li ul[/B] {
    [B]display: none;[/B]
  }
  ul#Navigation [B]li:hover ul[/B] {
    [B]display: block;[/B]
    [B]background: #eee;[/B]
  }
</style>

<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        [B]LI.onmouseover=einblenden[/B]; [B]LI.onmouseout=ausblenden[/B];
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "#eee";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  [B]window.onload=hoverIE[/B];
}
</script>
<![endif]-->

</head>
<body>

<div id="Tmenu">
  <ul id="Navigation">
    <li><a id="aktuell" href="#Beispiel">Seite 1</a>
      <ul>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 1b</a></li>
        <li><a href="#Beispiel">Seite 1c</a></li>
        <li><a href="#Beispiel">Seite 1d</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a>
      <ul>
        <li><a href="#Beispiel">Seite 3a</a></li>
        <li><a href="#Beispiel">Seite 3b</a></li>
        <li><a href="#Beispiel">Seite 3c</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
  <div></div>
</div>

</body>
</html>

navigation prob

headgrowe

Neues Mitglied

Neueste Beiträge