How can I create a self-adjusting menu without using any tables, just read? That is, create a horizontal menu where the li's would fit in the width without exceeding the size of the ul as you were adding items!
This site here: apple.com/br has a search bar on top that when we click on it, the menus decrease, I wanted to do more or less like this on my site. Thank you!
Thanks!
In a very simple way, your problem solves with li{display: inline} . In this way, the li align horizontally, and break line as needed.
Here's a solution with jQuery :
largMenu = 0; //Esta variável vai juntar a largura inicial de cada item do menu em um único valor
$('nav > ul > li').each(function(){
largMenu += $(this).width(); //A largura de cada item é somado
});
$('nav > ul > li').each(function(){
$(this).width((((100 * $(this).width()) / largMenu)) + '%'); //A largura de cada item é dada em porcentagem
});
In this suggested template, we will use nav of HTML5. will look something like this:
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2 maior</a></li>
<li><a href="#">Item 1 ainda maior</a></li>
<li><a href="#">Item 1 final</a></li>
</ul>
</nav>
The basic css for this template:
/*Reseta os elementos do menu*/
nav, nav >ul, nav > ul > li {display:block; position:relative; margin:0; padding:0; list style:none;}
nav > ul > li {float:left;}
If for some reason the menu break line, just remove a small percentage of the width of each item in the following snippet: $(this).width((((100 * $(this).width()) / largMenu) - 0.9) + '%'); //A largura de cada item é dada em porcentagem . - 0.9 is the point in question.
I hope I have helped; D.