dynamically stretching % LI elements for horizontal menu (mimic table)

Language: HTML / XHTML

View as text

---------------
THE XHTML
---------------

  <div id="top_nav">
    <ul id="top_nav_ul">
      <li><span><span><a href="#">link1</a></span></span></li>
      <li><span><span><a href="#">link2</a></span></span></li>
      <li><span><span><a href="#">link3</a></span></span></li>
      <li><span><span><a href="#">link4</a></span></span></li>
      <li><span><span><a href="#">link5</a></span></span></li>
      <li><span><span><a href="#">link6</a></span></span></li>
      <li><span><span><a href="#">link7</a></span></span></li>
    </ul>
  </div>


---------------
THE CSS
---------------

/*TOP NAVIGATION*/
#top_nav{
  clear:left;
  background: url('/images/top_nav.png') no-repeat; 
  width:938px;
  height:54px;
  font-size:12px;
}

#top_nav ul{
  float:left;
  margin:18px 0 0 30px; 
  width:882px;
  height:23px;
  text-align:center;
}

#top_nav ul li{
  float:left;
/*  width:20%; SET DYNAMICALLY WITH JAVASCRIPT*/
}

#top_nav ul li span{
  background:url('/images/top_nav_li_span_1.png') top left no-repeat;
  height:23px;
  float:left;
/*  width:100%; SET DYNAMICALLY WITH JAVASCRIPT*/
}

#top_nav ul li span span{
  background:url('/images/top_nav_li_span_2.png') top right no-repeat;  
  height:23px;
/*  width:100%; SET DYNAMICALLY WITH JAVASCRIPT*/
}

#top_nav ul li span span a{
  display:block;
  float:left;
  text-decoration:none;
  color:#fff;
  padding:6px 16px 0 16px; /*VALUE CHANGED DYNAMICALLY WITH JAVASCRIPT - left and right padding removed*/
  font-weight:bold;
/*  width:100%; SET DYNAMICALLY WITH JAVASCRIPT*/
  text-align:center;
  white-space:nowrap; 
  overflow:hidden;
  height:17px;
}

#top_nav ul li span span a:hover{
 color:gold; 
}
/*END TOP NAVIGATION*/


--------------------
THE JS (gracefully degrades if javascript is turned off)
--------------------

<script type="text/javascript" charset="utf-8">
  addEvent(window, "load", function() {
    var top_nav= document.getElementById("top_nav_ul");
    var top_nav_lis = top_nav.getElementsByTagName("li");
     
    for (var i = 0; i < top_nav_lis.length; i++) {
      var li = top_nav_lis[i];
      li.style.width = ((100/top_nav_lis.length) + '%');
      li.childNodes[0].style.width = "100%";
      li.childNodes[0].childNodes[0].style.width = "100%";
      li.childNodes[0].childNodes[0].childNodes[0].style.padding = "6px 0 0 0";
      li.childNodes[0].childNodes[0].childNodes[0].style.width = "100%";
    }
    
    // document.getElementById("txtSearch").value = (100/top_nav_lis.length);
  });
  
  function addEvent(obj, evtName, fn) {
    try{removeEvent(obj, evtName, fn)}catch(e){}
    if (obj.addEventListener) {
                    obj.addEventListener(evtName, fn, false);
    } else if (obj.attachEvent) {
                    obj.attachEvent('on' + evtName, fn);
    } else {
                    obj['on' + evtName] = fn;
    }
  }  
</script>