2

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

我一直在阅读在线教程和其他试图解决类似问题的 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)) );
4

2 回答 2

1

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

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

你可以通过做同样的事情

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

CSS 明智的做法是确保您的未排序列表具有显示块或内联块（因为它是水平的，因此是内联的）。如果我是正确的，这样你也可以摆脱列表项上的 CSS hack。

根据这篇文章在调整窗口大小时自动调整文本大小（字体大小）？ 对于触发窗口调整大小的 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/

于 2012-07-17T00:26:23.357 回答
1

参考： jsFiddle

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

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


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

我从不同的角度接近了你的目标。我没有使用您不想要的东西（盒装面包屑），而是正面解决了填充分配问题（从外到内）。

注意： 演示了面包屑导航按钮。

下面是我使用的过程：
1.创建 HTML 布局，在一行中包含所有面包屑。没有填充，没有边距，只有原始链接。
2.接下来，以像素为单位测量剩余空间。这将是可用的总填充。3.在 HTML 导航标记中，动态计算使用的填充跨度数。4.可用的总填充除以填充跨度。这成为共享部分。 5.设置可用总填充的共享部分


page load开窗事件resize。

一旦您看到代码，这种方法就很容易理解，并且可以轻松更改或自定义调整而无需大惊小怪。包括扩展注释。在 Chrome、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 这就是你真正想要的 Demo
jQuery 这就是你真正想要的 Demo（因为它很大并且自动居中）

于 2012-07-17T04:50:56.147 回答