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

Question

I am converting a Drupal 6 theme to Drupal 7, and cant figure this part out. I have the following 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>

In Drupal 6 this theme was using jquery v1.3.2, but in Drupal 7 jquery 1.4.4 is built in, so the functions don't seem to be working. Here is the jquery function:

$(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;
    }
}

In the Drupal 6 version the above code automatically adds the style="width: xx" tags to the hyperlinks, which causes the menu to grow the menu buttons to fill the width of its container.

Thanks.

Answer 1

I would suggest throwing out that old javascript and replace with jQuery - seeing as someone else has already solved this problem :

http://tympanus.net/codrops/2010/01/12/self-resizing-navigation-menu-with-jquery/