如何自动调整此HTML菜单的大小以适应父宽度？

我正在将Drupal 6主题转换为Drupal 7，并且无法将此部分转换出来。我有以下HTML：如何自动调整此HTML菜单的大小以适应父宽度？

<ul id="nav" class=" scaling-active scaling-ready"> 
<li><a href="/demos/pro/taxonomy/term/12" title="">Design</a></li> 
<li><a href="/demos/pro/taxonomy/term/13" title="">Inspiration</a></li> 
<li><a href="/demos/pro/taxonomy/term/14" title="">Nature</a></li> 
<li><a href="/demos/pro/taxonomy/term/15" title="">Photography</a></li> 
<li><a href="/demos/pro/taxonomy/term/16" title="">Technology</a></li> 
<li><a href="/demos/pro/taxonomy/term/20" title="">Travel</a></li> 
<li><a href="/demos/pro/taxonomy/term/17" title="">Tutorials</a></li> 
<li><a href="/demos/pro/taxonomy/term/18" title="">Urban</a></li> 
<li><a href="/demos/pro/taxonomy/term/19" title="">Video Games</a></li> 
</ul>

在Drupal的6这个主题是使用jQuery V1.3.2，但在Drupal 7的jQuery 1.4.4是内置的，所以功能似乎并不奏效。下面是jQuery函数：

$(function(){ 
    clearFormFields({ 
     clearInputs: true, 
     clearTextareas: false, 
     passwordFieldText: true, 
     addClassFocus: "focus", 
     filterClass: "form-text" 
    }); 
    initAutoScalingNav({ 
     menuId: "nav", 
     sideClasses: true 
    }); 
    ieHover('#nav li'); 
    $('div.gallery-block').fadeGallery({ 
     slideElements:'ul.gallery > li', 
     pagerLinks:'ul.switcher li' 
    }); 
    $('div.pictures-box').fadeGallery({ 
     slideElements:'ul.fade-gallery > li', 
     pagerLinks:'ul.pictures-list li', 
     title: true 
    }); 
}); 

function initAutoScalingNav(o) { 
    if (!o.menuId) o.menuId = "nav"; 
    if (!o.tag) o.tag = "a"; 
    if (!o.spacing) o.spacing = 0; 
    if (!o.constant) o.constant = 0; 
    if (!o.minPaddings) o.minPaddings = 0; 
    if (!o.liHovering) o.liHovering = false; 
    if (!o.sideClasses) o.sideClasses = false; 
    if (!o.equalLinks) o.equalLinks = false; 
    if (!o.flexible) o.flexible = false; 
    var nav = document.getElementById(o.menuId); 
    if(nav) { 
     nav.className += " scaling-active"; 
     var lis = nav.getElementsByTagName("li"); 
     var asFl = []; 
     var lisFl = []; 
     var width = 0; 
     for (var i=0, j=0; i<lis.length; i++) { 
      if(lis[i].parentNode == nav) { 
       var t = lis[i].getElementsByTagName(o.tag).item(0); 
       asFl.push(t); 
       asFl[j++].width = t.offsetWidth; 
       lisFl.push(lis[i]); 
       if(width < t.offsetWidth) width = t.offsetWidth; 
      } 
      if(o.liHovering) { 
       lis[i].onmouseover = function() { 
        this.className += " hover"; 
       } 
       lis[i].onmouseout = function() { 
        this.className = this.className.replace("hover", ""); 
       } 
      } 
     } 
     var menuWidth = nav.clientWidth - asFl.length*o.spacing - o.constant; 
     if(o.equalLinks && width * asFl.length < menuWidth) { 
      for (var i=0; i<asFl.length; i++) { 
       asFl[i].width = width; 
      } 
     } 
     width = getItemsWidth(asFl); 
     if(width < menuWidth) { 
      var version = navigator.userAgent.toLowerCase(); 
      for (var i=0; getItemsWidth(asFl) < menuWidth; i++) { 
       asFl[i].width++; 
       if(!o.flexible) { 
        asFl[i].style.width = asFl[i].width + "px"; 
       } 
       if(i >= asFl.length-1) i=-1; 
      } 
      if(o.flexible) { 
       for (var i=0; i<asFl.length; i++) { 
        width = (asFl[i].width - o.spacing - o.constant/asFl.length)/menuWidth*100; 
        if(i != asFl.length-1) { 
         lisFl[i].style.width = width + "%"; 
        } 
        else { 
         if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1 || version.indexOf("msie 8") != -1 || version.indexOf("msie 9") != -1) 
          lisFl[i].style.width = width + "%"; 
        } 
       } 
      } 
     } 
     else if(o.minPaddings > 0) { 
      for (var i=0; i<asFl.length; i++) { 
       asFl[i].style.paddingLeft = o.minPaddings + "px"; 
       asFl[i].style.paddingRight = o.minPaddings + "px"; 
      } 
     } 
     if(o.sideClasses) { 
      lisFl[0].className += " first-child"; 
      lisFl[0].getElementsByTagName(o.tag).item(0).className += " first-child-a"; 
      lisFl[lisFl.length-1].className += " last-child"; 
      lisFl[lisFl.length-1].getElementsByTagName(o.tag).item(0).className += " last-child-a"; 
     } 
     nav.className += " scaling-ready"; 
    } 
    function getItemsWidth(a) { 
     var w = 0; 
     for(var q=0; q<a.length; q++) { 
      w += a[q].width; 
     } 
     return w; 
    } 
}

在Drupal的版本6上面的代码自动添加风格=“宽度：XX”标记的超链接，这使得菜单中生长的菜单按钮，以填补的宽度它的容器。

谢谢。

来源

2011-03-02 Shane Grant

我看到一个使用jQuery的零相关代码，除了（）（文件准备简写）。 – 2011-03-02 04:05:14