For a fluid navigation menu, how to dynamically configure dynamic padding for each breadcrumb?

Question

I am currently building a website with a liquid layout. None of the basic fluid patterns actually come with horizontal navigation, which can be adjusted when the window is resized or loaded with different widths.

I am posting online tutorials and other solutions for trying to deal with similar problems, some of them are very smart and very close, but no one can deal with the block effect of pointing a {display:block; padding:10px 40px;} a:hover {background:#ccc;} a {display:block; padding:10px 40px;} a:hover {background:#ccc;} . Others use smart ways to create block links that have the same width, which are customizable using the widht window; however, this is not accurate enough, and I do not want to create the same width among the link blocks, but have the same left / right inserts between the links. This is much more accurate since the distance between the links is identical.

I gave up on this with CSS, maybe someone has a solution to handle the complement variable, or something that acts very close to this. In any case, I decided to try working with it in jQuery.

I have never written jQuery before, but have worked with several plugins for many years. I thought I should at least try to come up with something before posting. It works for me. I am wondering if it is possible to add the ability to configure it on the fly if the user resizes the window, and not just the page load. . I am also wondering if there is something wrong with them as I did.

Here is a link to where I got it: 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); 

Also, if someone would not mind explaining why this does not work, this is my attempt to do all this in one equation:

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

Answer 1

In the HTML part, if you plan to have only one horizontal navigation, I would make sure that it has an identifier. Also I do not think this is necessary:

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

You can have the same thing by doing

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

Simplified CSS, you just make sure your unsorted list has a display block or inline block (since it is horizontal and therefore inline). That way, you can also get rid of the CSS hack in list items, if I'm right.

According to this message, automatically resize text (font size) when resizing a window? For the jQuery part, to start window resizing, use:

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

You can customize CSS at a time using the JSON parameter string, or when it is just simply padded:

 $("#hmenu li a").css("padding", "12px " + paddingNew + "px 12px " + paddingNew + "px"); 

or

 $("#hmenu li a").css({"padding-left": paddingNew, "padding-right": paddingNew}); 

Not sure about the concatenation of px. This may be optional.

Added jsfiddle, you can play with the size of the "results window" to see what happens: http://jsfiddle.net/tive/tKDjg/

Answer 2

Link: jsFiddle

I edited your jsFiddle with comments added to added / removed items so that your fluid navigation menu works correctly.

In particular, I used white-space: nowrap; in .container , removed min/max width on .row and used jQuery .resize(); to listen on the fly updates on the navigation bar.

---

REVISED: Updating jsFiddle State New Method (Tutorial)

I approached your goal from a different angle. Instead of working with what you don't want ( boxed breadcrumbs ), I set about distributing the distribution ( outside in ).

Note. buttons are shown Buttons .

In this process, I used:
1. Create an HTML layout that has all the breadcrumbs in one line. No indentation, no margins, only raw links.

2 .. Then measure the space on the left in pixels . This will be general availability .

3. In HTML Navigation markup, dynamically count the number of add-ons .

4. Available full complement is divided into capital gaps . This becomes a common port .

5. Total share available installed on page load and in the resize window.

This method is easy to understand as soon as you see the code and make it easy to change or customize settings without any problems. Extended notes are included. Tested in Chrome, Firefox, IE8 no problem.



Optimized jQuery 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 snapped to the bottom for comparison.

Choose your taste:
jQuery source tutorial
jQuery no comments
jQuery is very optimized
jQuery original tutorial + style

jQuery, this is the one you really need a demo
jQuery, this is the one you really need Demo (because it is large and auto centers)