style active link

style active link

I created a demo. http://imunderdevelopment.com/john/demo/link.html

I want the active link to NOT be hidden but the other menus to be hidden. I'm not sure how to have my jquery know/select the active link.

  1. var DDSPEED = 10;
    var DDTIMER = 15;
    var OFFSET = -2;
    var ZINT = 100;

    function ddMenu(id,d){
      var h = document.getElementById(id + '-ddheader');
      var c = document.getElementById(id + '-ddcontent');
      clearInterval(c.timer);
      if(d == 1){
        clearTimeout(h.timer);
        c.style.display = 'inline';
        if(c.maxh && c.maxh <= c.offsetHeight){return}
        else if(!c.maxh){
          c.style.left = (h.offsetWidth + OFFSET) + 'px';
          c.style.height = 'auto';
          c.maxh = c.offsetHeight;
          c.style.height = '0px';
        }
        ZINT = ZINT + 1;
        c.style.zIndex = ZINT;
        c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
      }else{
        h.timer = setTimeout(function(){ddCollapse(c)},50);
      }
    }

    function ddCollapse(c){
      c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
    }

    function cancelHide(id){
      var h = document.getElementById(id + '-ddheader');
      var c = document.getElementById(id + '-ddcontent');
      clearTimeout(h.timer);
      clearInterval(c.timer);
      if(c.offsetHeight < c.maxh){
        c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
      }
    }

    function ddSlide(c,d){
      var currh = c.offsetHeight;
      var dist;
      if(d == 1){
        dist = Math.round((c.maxh - currh) / DDSPEED);
      }else{
        dist = Math.round(currh / DDSPEED);
      }
      if(dist <= 1 && d == 1){
        dist = 1;
      }
      c.style.height = currh + (dist * d) + 'px';
      c.style.opacity = currh / c.maxh;
      c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
      if(currh > (c.maxh - 2) && d == 1){
        clearInterval(c.timer);
      }else if(dist < 1 && d != 1){
        clearInterval(c.timer);
        c.style.display = 'none';
      }
    }





























































  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JavaScript Dropdown Menu Demo</title>
    <link rel="stylesheet" href="flyout.css" type="text/css" />
    <script type="text/javascript" src="flyout.js"></script>
    </head>
    <body>
    <div id="wrapper">
    <div id="leftcolumn">
      <dl class="dropdown">
        <dt id="one-ddheader" class="upperdd" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
        <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
          <ul>
            <li><a href="link.html" >Navigation Item 1</a></li>
            <li><a href="#" >Navigation Item 2</a></li>
            <li><a href="#">Navigation Item 3</a></li>
          </ul>
        </dd>
      </dl>
      <dl class="dropdown">
        <dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
        <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
          <ul>
            <li><a href="#" >Navigation Item 1</a></li>
            <li><a href="#" >Navigation Item 2</a></li>
            <li><a href="#" >Navigation Item 3</a></li>
          </ul>
        </dd>
      </dl>
      <dl class="dropdown">
        <dt id="three-ddheader" class="upperdd">Menu Item Three</dt>
      </dl>
      <dl class="dropdown">
        <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">Dropdown Four</dt>
        <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
          <ul>
            <li><a href="#" >Navigation Item 1</a></li>
            <li><a href="#">Navigation Item 2</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    </div>
    </body></html>












































  2. * {padding:0; margin:0}
    body {font:12px Verdana, Arial, Helvetica}
    #wrapper {width:750px; padding:25px; margin:0 auto}
    #leftcolumn {float:left; width:225px}
    #rightcolumn {float:left; width:525px}
    .dropdown {display:block; position:relative}
    .dropdown dt {width:188px;  padding:4px; font-weight:bold; cursor:pointer; background:url(images/navbg.png)}
    .dropdown .upperdd {}
    .dropdown dt:hover {background:url(images/navbgover.png)}
    .dropdown dd {position:absolute; top:0; overflow:hidden; width:408px; display:none; background:#fff; opacity:0; }
    .dropdown ul {width:404px; list-style:none;}
    .dropdown li {display:inline;}
    .dropdown a, .dropdown a:visited {display:inline;  color:#333; text-decoration:none; background:url(images/navbg.png); width:194px;}
    .dropdown a:active {display:inline;  color:#333; text-decoration:none; background:url(images/navbg.png); width:194px;}
    .dropdown a:hover {background:#d9e1e4; color:#000;}