对于流体导航菜单，如何动态调整每个面包屑的填充？ [英] For a fluid Navigation Menu, how to adjust padding dynamically for each Breadcrumb?

问题描述

我目前正在建立一个流动布局的网站。没有一个主流的流体模板实际上有一个股票水平导航，可以调整自己，因为窗口调整大小或加载在不同的宽度。

通过在线教程和其他Stack Overflow解决方案，尝试解决类似的问题，一些是非常聪明，非常接近，但没有一个能够处理一个块状的悬停效果 a {display：block; padding：10px 40px;}
a：hover {background：#ccc;} 。其他人使用聪明的方式创建块链接，其宽度与窗口宽度相同;然而，这不够精确，我不想在链接块之间创建相同的宽度，但在链接之间具有相同的左/右填充。这是更准确的，因为链接之间的距离是相同的。

我放弃了这样做与CSS，也许有人有一个解决方案处理一个变量padding ，或者是非常接近的东西。在任何情况下，我决定尝试在jQuery中工作。

我从来没有实际写过任何jQuery，但已经使用了几个插件多年。我想我应该至少尝试在发布之前想出一些东西。我有它的工作，我想知道如果用户调整窗口大小，而不只是页面加载，它是可能添加的功能，它的飞行调整。我也想知道他们的做法是否有什么问题。

这是一个指向我的地址的链接： http://jsfiddle.net/XZxMc/3/

HTML：

 < div class =container> 
< div class =row> 
< div class =twelvecol> 
< ul> 
< li>< a href =＃>短< / a>< / li> 
< li>< a href =＃>较长< / 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：

  //在css中设置的链接的初始左/右填充
 var paddingIni = 39; 
 // .row的初始最大宽度
 var widthIni = 700; 
 //链接数乘以2; 2因为我们将减少padding乘以2px的倍数，1px left，1px right 
 var linkQ = 5 * 2; 
 
 //链接容器的当前宽度
 var twelveWidth = $（。row .twelvecol）。 
 //（初始宽度/ 10） - （当前宽度/ 10）;这给了我们从我们的初始填充减去多少39 
 //这是写的方式有什么问题吗？ 
 var paddingSub =（widthIni / linkQ） - （twelveWidth / linkQ）; 
 //从我们的初始填充中减去上面的计算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）））; 
  

解决方案

参考： href =http://jsfiddle.net/WcLPd/ =nofollow> jsFiddle

值得注意的是，我使用了 white-space： nowrap; 在 .container ，已删除最小/最大宽度 > .row ，并使用jQuery .resize（）; 监听器来处理导航栏的即时更新。

---

REVISED： / em> 状态更新：    jsFiddle Newer方法（教程）

我从不同的角度不是使用你不想要的东西（ ），我已经从外部处理了填充分配（ ）。

注意： 会显示导航路径 。

以下是我使用的程序：

1。创建在单行中包含所有面包屑的HTML布局。没有填充，没有边距，只是原始链接。

2。接下来，测量像素中的左侧空间。这将是可用的总填充。

3。在HTML导航标记中，动态计算使用的 填充范围 的数量。

4。 可用总填充除以填充间距 。这将成为共享部分。

5。 共享部分从可用总填充 设置 在网页载入&窗口调整大小事件。

这种方法很容易理解，一旦你看到代码，并允许轻松更改或自定义调整没有太大的麻烦。包括扩展备注。测试在Chrome，Firefox，IE8没有问题。




jQuery高度优化版本：

  function fluidNavBar（）{
 $（'。breadcrumbPadding'）。css（'width'，0）; 
 if（$（'。links'）。width（）< $（'body'）。width（））{
 $（'breadcrumbPadding'）。css （'.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中，

br />
jQuery原始教程

无注释的jQuery

jQuery代码高度优化

jQuery原始教程+样式

jQuery这是你真正想要的Demo

jQuery这是你真正想要的Demo（因为它是相当大的和汽车中心）

I am currently building a site with a fluid layout. None of the mainstream fluid templates out there actually come with a stock horizontal navigation that can adjust itself as the window is resized or loads at different widths.

I've been pouring through online tutorials and other Stack Overflow solutions that try to tackle similar problems, some are extremely clever and come really close but none are able to handle a block-like hover effect a {display:block; padding:10px 40px;} a:hover {background:#ccc;}. Others use clever ways of creating block links that are identical widths that adjust with the window widht; however, this is not precise enough and I am not looking to create identical widths among the link blocks but to have identical left/right padding between links. This is much more precise as the distance between links is identical.

I've given up on doing this with CSS, maybe someone else has a solution for handling a variable padding, or something that acts very close to that. In any case, I decide to try to work on it in jQuery.

I have never actually written any jQuery before but have worked with several plugins for years. I thought I should at least try to come up with something before posting. I have it working, I am wondering is it possible to add the ability for it to adjust on the fly if the user resizes the window, not just on page load. I am also wondering if there is anything wrong with they way I have done it.

Here is a link to where I've gotten to: http://jsfiddle.net/XZxMc/3/

The 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>

The 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;}

​​The 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);

Also, if someone wouldn't mind explaining why this doesn't work, it's my attempt to do it all in one equation:

var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );

解决方案

Reference: jsFiddle

I've edited your jsFiddle with comments provided on added/removed items to allow your fluid Navigation menu to work correctly.

Notably, I used white-space: nowrap; on .container, removed min/max width on .row, and used jQuery .resize(); listener to handle on-the-fly updates to the Navigation Bar.

---

REVISED: Status Update:    jsFiddle Newer Method (Tutorial)

I've approached your objective from a different angle. Instead of working with what you don't want (the boxed breadcrumbs), I've tackled the padding allocation head-on (from the outside in).

Note: Breadcrumb Buttons are demonstrated.

Here's the process I used:
1. Create HTML layout that has all breadcrumbs on a single row. No padding, no margin, just raw links.
2. Next, measure the left-over space in pixels. This will be the total padding available.
3. In the HTML Navigation markup, dynamically count the number of padding spans used.
4. The total padding available is divided by the padding spans. This becomes the Shared Portion.
5. The Shared Portion from total padding available is set on page load & window resize event.

This method is simple to understand once you see the code and allows for easy changes or custom adjustments without much fuss. Extended notes included. Tested in Chrome, Firefox, IE8 with no issues.


The jQuery Highly Optimized Version:

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();
});

In the updated jsFiddle, you will see the previous Navigation Bar which is now pinned to the bottom for comparison.

Pick your flavor:
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)

这篇关于对于流体导航菜单，如何动态调整每个面包屑的填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！