Self-adjusting menu with li’s

Question

How can I create a self adjustable menu without using any table, just read? That is, create a horizontal menu where li’s adjust in width without exceeding ul size as you add 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!!

Answer 1

In a very simple way, your problem is solved with li{display: inline}. Thus, the li align horizontally, and break line as needed.

Answer 2

Follows 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 model we will use the nav 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 line break menu, 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. The - 0.9 is the point at issue.

I hope I helped ;D.