对于流体导航菜单，如何动态调整填充每个面包屑？(For a fluid Navigation Men

我目前正在建设一个流体布局的网站。主流流体模板没有在那里实际配股票水平导航作为窗口在不同的宽度调整或负载，可以自行调节。

我已经通过网上教程和其他堆栈溢出的解决方案，试图解决类似问题的涌出，一些非常聪明，都非常接近，但没有一个是能够处理块状悬停效果a {display:block; padding:10px 40px;} a:hover {background:#ccc;} a {display:block; padding:10px 40px;} a:hover {background:#ccc;} 其他人使用创建是与widht窗口调整相同宽度块链接的聪明的方式; 然而，这是不够准确的，我不希望链接块中创建相同的宽度，但有联系之间是相同的左/右填充。这是更为精确的链接之间的距离是相同的。

我已经放弃了与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聪明人，你只需要确保你的无序列表具有显示块或内联块（因为它的水平，因此行内）。这样，您还可以摆脱对列表项的CSS破解的，如果我是正确的。

根据这个帖子自动调整文本（字体大小）调整窗口时？对于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
};

您可以在一个时间调整CSS用JSON字符串PARAM或当它只是刚刚填充：

$("#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/

Answer 2:

参考： 的jsfiddle

我已经编辑您的jsfiddle与设在添加/删除的项目，让您流畅的导航菜单正常工作的意见。

值得注意的是，我用white-space: nowrap; 上.container ，除去min/max width上.row ，和使用的jQuery .resize(); 监听器来处理上即时更新的导航栏。

修订： 状态更新： 的jsfiddle较新的方法（教程）

我从一个不同的角度接近你的目标。相反，你不想要的东西（ 盒装面包屑 ）的工作，我已经攻克了填充分配正面（从外）。

注： 面包屑按钮证明。

下面是我使用的过程：
1.创建对单个行的所有面包屑的HTML布局。无填充，无保证金，只是原始链接。
2.接下来，测量像素中的遗留的空间。这将是总填充可用 。
3.在HTML标记导航，动态地计算所使用的填充跨距数。
4. 可用的总填充由填充跨度划分。这成为共享部分 。
5.从可用的总填充的共享部分被设置在page load ＆窗口resize事件。

此法简单易懂，一旦你看到的代码，并可以很容易地改变或定制调整，而不必大惊小怪。扩展笔记包括在内。经测试，在浏览器，Firefox，IE8没有问题。

jQuery的高度优化的版本：

function fluidNavBar(){
    $('.breadcrumbPadding').css('width',0);
    if($('.links').width() < $('body').width()){
        $('.breadcrumbPadding').css('width', $('.navPaddingTotal').width() / $('.breadcrumbPadding').size());
    }
}

// RUN ON PAGE LOAD
window.onload = function() {
    $('.navBar').css('min-width', $('.links').width());
    fluidNavBar();
};

// RUN ON WINDOW RESIZE
$(window).resize(function() {
    fluidNavBar();
});

在更新的jsfiddle，你会看到前面的导航栏这是现在固定在底部进行比较。

选择你的味道：
jQuery的原始教程
jQuery的无评论
jQuery代码高度优化
jQuery的原始教程+样式

jQuery的这一点，你真的要演示的一个
jQuery的这一点，你真的真的想要演示的一个（因为它是相当大的和自动中心）

文章来源: For a fluid Navigation Menu, how to adjust padding dynamically for each Breadcrumb?