Self-adjusting menu with li's

1

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!

    
asked by anonymous 15.05.2015 / 01:40

2 answers

2

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

    
15.05.2015 / 15:44
0

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.

    
15.07.2015 / 00:23