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

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

我一直在尝试解决类似问题的在线教程和其他Stack Overflow解决方案,有些非常聪明并且非常接近,但没有一个能够处理类似块的悬停效果{display：block;填充：10px 40px;}
a：悬停{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)) );

解决方法

在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/

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

解决方法

相关文章