Messmar: Menüpunkt und CSS

SELF-Forum

Menüpunkt und CSS

Messmar
−1 Informationen zu den Bewertungsregeln

Hallo,

Ich habe die folgende Navigation mit eurer Hilfe hier zum laufen gebracht und sie funktioniert gut.

Jetzt stehe ich wieder vor der nächsten Hürde ;-(( und ich habe gerade irgendwie eine Denblockade:

Wenn der User einen Menüpunkt aufklappt und einen Link in dem unteren Menü clickt, dann ändert sich die CSS-Klasse des Links (im unteren Menü natürlich).

Ich clicke dann einen anderen übergeordneten Menüpunkt und automatisch schließt das vorher angeclicktes Menü. (Ist auch gut und richtig so).

Aber wenn ich dann wieder das vorher angeclickte Menü aufklappe, finde ich daß der untere Menüpunkt nicht die normale CSS-Klasse hat, sondern die, die für einen aktiven Link, was nicht passieren darf.

Kann Jemand bitte helfen (dringend)?

1000 Dank
Messmar

Beitrag melden
−1
Informationen zu den Bewertungsregeln

  1. Menüpunkt und CSS

    Messmar
    – Informationen zu den Bewertungsregeln

    sorry, hier der Code:
    Messmar

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
     <title>Untitled</title>
     <script>
    <!--
      var arrClasses = new Array("normal","highlight");
      var lnkOldID = "";

    function activeLink(lnkID)
       {

    myObj = document.getElementById(lnkID);

    if(lnkOldID == "")
          {
            lnkOldID = lnkID;
            myObj.className = arrClasses[1];
          }
          else
          {

    if(lnkOldID != lnkID)
         {

    var myOldObj = document.getElementById(lnkOldID);
              myOldObj.className = arrClasses[0];
              myObj.className = arrClasses[1];
              lnkOldID = lnkID;
            }
          }
       }

    // ##################################################
      function displaySubNav(li, display) {
          var ul = li.getElementsByTagName('ul');
          if (ul && ul[0])
              ul[0].style.display = display;
          if (display=='block') {
                li.firstChild.style.color='#0050aa';
          li.firstChild.style.fontSize='10px';
                li.firstChild.style.fontWeight='bold';
          li.firstChild.style.textDecoration='none';

    } else {
                li.firstChild.style.color='#0050aa';
                li.firstChild.style.fontWeight='normal';
          li.firstChild.style.textDecoration='none';

    }
         }

    function hideNavigation() {
         var nav = document.getElementById('nav');
         var item = nav.firstChild;
         while (item) {
         if (item.tagName && item.tagName.toLowerCase() == "li") {
                   displaySubNav(item, "none");

    }
                item = item.nextSibling;

    }
      }
        function showNavigation(li) {
           hideNavigation();

    displaySubNav(li, "block");

    }

    //#################################################

    //-->
    </script>
    <style>
    ul#nav li.ul00li00 {
     margin: .8em 0em 0em 0em;
    }

    ul#nav {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 11px;
     list-style-type: none;
     color: #0050AA;
     width: 147px;
     height: 40em;
     margin: 0em 0em 0em 0em;
     padding: 0em 0 .6em 0em;
     background-color: #E0F3FB;
     float: left;
    }
    ul#nav li {
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 11px;
     list-style-type: none;
     color: #0050AA;
     width: 147px;
     margin: 0em 0em 0em 0em;
     padding: 0 0 .6em 0em;
     background-color: #E0F3FB;
     float: left;
    }
    ul#nav li ul {
     width: 120px;
     margin: 0em 0em .6em 0em;
     padding: 0em;
     list-style-type: none;
     background-color: #E0F3FB;/*Hier*/
     cursor: pointer;
    }
    ul#nav li ul li.normal {
     margin: 0 0 0 0em;
     padding: .2em 0em .2em 0em;
     margin: .3em 0em 0em 0em;
     width: 147px;
     height: 2em;
     text-decoration: none;
     cursor: pointer;
    }
    ul#nav li ul li.highlight {
     font-weight: bold;
     margin: .5em 0 0 0em;
     padding: .2em 0em .2em 0;
     width: 147px;
     height: 2em;
     text-decoration: none;
     background-color: #FFFFFF;
     cursor: pointer;
    }
    </style>
    </head>

    <body onload="hideNavigation()">
    <ul id="nav">
     <li class="ul00li00"><a href="#" onclick="showNavigation(this.parentNode);">&nbsp;&nbsp;Praesent sem leo</a>
          <ul>
             <li id="li_01_01" onclick="location.href='#',activeLink('li_01_01')">&nbsp;&nbsp;&nbsp;Subpunkt 1.1</li>
             <li id="li_01_02" onclick="location.href='#',activeLink('li_01_02')">&nbsp;&nbsp;&nbsp;Subpunkt 1.2</li>
             <li id="li_01_03" onclick="location.href='#',activeLink('li_01_03')">&nbsp;&nbsp;&nbsp;Subpunkt 1.3</li>
          </ul>
       </li>
       <li><a href="#" onclick="showNavigation(this.parentNode);">&nbsp;&nbsp;Quisque eu tellus</a>
          <ul>
             <li id="li_01_04" onclick="location.href='#',activeLink('li_01_04')">&nbsp;&nbsp;&nbsp;Subpunkt 1.1</li>
             <li id="li_01_05" onclick="location.href='#',activeLink('li_01_05')">&nbsp;&nbsp;&nbsp;Subpunkt 1.2</li>
             <li id="li_01_06" onclick="location.href='#',activeLink('li_01_06')">&nbsp;&nbsp;&nbsp;Subpunkt 1.3</li>
          </ul>
       </li>
       <li><a href="#" onclick="showNavigation(this.parentNode);">&nbsp;&nbsp;Etiam fermentum leo</a>
          <ul>
             <li id="li_01_07" onclick="location.href='#',activeLink('li_01_07')">&nbsp;&nbsp;&nbsp;Subpunkt 1.1</li>
             <li id="li_01_08" onclick="location.href='#',activeLink('li_01_08')">&nbsp;&nbsp;&nbsp;Subpunkt 1.2</li>
             <li id="li_01_09" onclick="location.href='#',activeLink('li_01_09')">&nbsp;&nbsp;&nbsp;Subpunkt 1.3</li>
          </ul>
       </li>
    </ul>

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln