Question

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

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

我已经放弃了使用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 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/

Answer 2

参考： jsFiddle

我已经使用添加/删除项目提供的评论编辑了您的jsFiddle，以使您的流动导航菜单正常工作。

值得注意的是，我在white-space: nowrap;上使用了.container，在min/max width上删除了.row，并使用了jQuery .resize();侦听器来处理动态更新导航栏。

已修订： 状态更新： jsFiddle Newer Method (Tutorial)

我从不同角度接近你的目标。相反，你不想要的东西的工作（ 盒装面包的），我已经攻克了填充分配迎头（来自外部的在）。

注意： 会出现面包屑按钮。

以下是我使用的流程：
1。创建在一行中包含所有面包屑的HTML布局。没有填充，没有边距，只是原始链接。
2。接下来，测量像素中的剩余空间。这将是可用的总填充。
3. 在HTML导航标记中，动态计算使用的 填充范围 的数量。
4. 可用的总填充量除以 填充范围 。这将成为共享部分。
5. 设置的共享部分 {{1 }＆amp;窗口page load事件。

一旦您看到代码并且允许轻松更改或自定义调整，这种方法很容易理解。包括扩展笔记。在Chrome，Firefox，IE8中测试没有任何问题。

jQuery高度优化版本：

resize

在更新的jsFiddle中，您将看到之前的导航栏，现在将其固定在底部进行比较。

选择你的风味：
jQuery original tutorial
jQuery without comments
jQuery code highly optimized
jQuery original tutorial + Style

jQuery this it the one you really want Demo
jQuery this it the one you really really want Demo (because it's sizeable and auto-centers)

对于流畅的导航菜单，如何为每个Breadcrumb动态调整填充？

2 个答案: