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

Question

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

我一直在研究在线教程和其他 Stack Overflow 解决方案，试图解决类似的问题，其中一些非常聪明并且非常接近，但没有一个能够处理类似 block 的悬停效果 a {display:堵塞;内边距:10px 40px；} a:悬停{背景:#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，或者仅在填充时调整 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/