jquery - 对于流畅的导航菜单，如何为每个面包屑动态调整填充？

Question

我目前正在构建一个布局流畅的网站。主流的流体模板实际上都没有自带水平导航，可以在调整窗口大小或以不同宽度加载时自行调整。

我一直在研究在线教程和其他试图解决类似问题的 Stack Overflow 解决方案，其中一些非常聪明并且非常接近，但没有一个能够处理类似 block 的悬停效果 a {display:堵塞;填充:10px 40px;}
a:hover {background:#ccc;}.其他人使用巧妙的方法创建 block 链接，这些链接的宽度与窗口宽度相同；然而，这不够精确，我不希望在链接 block 之间创建相同的宽度，而是在链接之间具有相同的左/右填充。这更加精确，因为链接之间的距离是相同的。

我已经放弃了使用 CSS 来做这件事，也许其他人有处理可变填充的解决方案，或者与此非常接近的东西。无论如何，我决定尝试在 jQuery 中处理它。

我以前从未真正编写过任何 jQuery，但多年来一直使用多个插件。我想我至少应该在发布之前尝试想出一些东西。我有它的工作，我想知道是否可以添加它在用户调整窗口大小时动态调整的能力，而不仅仅是在页面加载时。我也想知道我这样做的方式是否有任何问题。

这是我到达的位置的链接:http://jsfiddle.net/XZxMc/3/

HTML:

<div class="container">
    <div class="row">                        
        <div class="twelvecol">
            <ul>
                <li><a href="#">short</a></li>
                <li><a href="#">longer</a></li>
                <li><a href="#">even-longer</a></li>
                <li><a href="#">really-really-long</a></li>
                <li><a href="#">tiny</a></li>  
            </ul>               
        </div>
    </div>
</div>

CSS:

.container {
    background:#ccc; 
    font-family:arial, helvetica;
}

.row {
    width: 100%;
    max-width: 700px; 
    min-width: 600px; 
    margin: 0 auto;
    overflow: hidden;
    background:white;
}

.row .twelvecol {
    width:100%; 
    float:left;
}

ul {
    text-align:center;
}

ul li {
    display:inline-block;     
    zoom:1; 
    *display: inline;
}

ul li a {
    padding:12px 39px;
    display:block;
}

a {text-decoration:none;}
a:hover {background:blue; color:white;}

JavaScript:

// Initial left/right padding of links set in css
var paddingIni = 39;
// Initial max-width of .row
var widthIni = 700; 
// Number of links multiplied by 2; 2 because we will be reducing the padding by multiples of 2px total, 1px left, 1px right
var linkQ = 5*2; 

// Current width of link container
var twelveWidth = $(".row .twelvecol").width(); 
// (Initial width / 10) - (Current width / 10); this gives us how much to subtract from our inital padding of 39
// Is there anything wrong with the way this is written?
var paddingSub = (widthIni/linkQ)-(twelveWidth/linkQ); 
// Simply subtracting above computation from our inital padding of 39
var paddingNew = paddingIni-paddingSub;

$("ul li a").css("padding-left",paddingNew);
$("ul li a").css("padding-right",paddingNew);

此外，如果有人不介意解释为什么这行不通，我会尝试用一个等式来完成所有工作:

var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );

Answer 1

在 HTML 部分，如果您计划只有一个水平导航，我会确保它有一个 id。我也不认为这是必要的:

<div class='twelvecol'><ul>...</ul></div> 

你可以通过做同样的事情

<ul id='hmenu' class='twelvecol'>...</ul>

在 CSS 方面，您只需确保您的未排序列表具有显示 block 或内联 block (因为它是水平的，因此是内联的)。如果我是对的，这样您还可以摆脱列表项上的 CSS hack。

根据这篇文章auto resize text (font size) when resizing window?对于触发窗口调整大小的 jQuery 部分，请使用:

$(function() {
    // trigger once dom is ready
    resizeMe();
    // trigger on window resize
    $(window).bind('resize', function()
    {
        // your resize function
        resizeMe();
    }).trigger('resize');
});

var resizeMe = function(){
    // your stuff here
};

您可以使用 JSON 参数字符串或仅填充时一次性调整 CSS:

$("#hmenu li a").css("padding", "12px " + paddingNew + "px 12px " + paddingNew + "px");

或

$("#hmenu li a").css({"padding-left": paddingNew, "padding-right": paddingNew});

不确定 px 连接。可能没有必要。

添加了 jsfiddle，您可以调整“结果窗口”大小来查看会发生什么: http://jsfiddle.net/tive/tKDjg/