1

Como eu posso criar um menu auto ajustável sem usar nenhuma tabela, somente li? Ou seja, criar um menu horizontal onde as li's se ajustassem na largura sem ultrapassar o tamanho da ul conforme fosse adicionando itens!

Este site aqui: apple.com/br tem uma barra de busca em cima que quando clicamos nele, os menus diminuem, eu queria fazer mais ou menos assim no meu site. obrigado!

Valeu!!

2
  • Definindo um width em uma ul, caso o número de li ultrapasse o valor definido a lista vai se quebrar em uma nova linha. 15/05/2015 às 0:03
  • Este site aqui: apple.com/br tem uma barra de busca em cima que quando clicamos nele, os menus diminuem, eu queria fazer mais ou menos assim no meu site. obrigado!
    – heromax
    20/05/2015 às 18:46

2 Respostas 2

2

De uma maneira bem simples, seu problema se resolve com li{display: inline}. Dessa maneira, os li alinham-se horizontalmente, e quebram linha conforme necessário.

1
  • Este site aqui: apple.com/br tem uma barra de busca em cima que quando clicamos nele, os menus diminuem, eu queria fazer mais ou menos assim no meu site. obrigado!
    – heromax
    20/05/2015 às 16:05
0

Segue uma solução com 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
});

Nesse modelo sugerido usaremos o nav do HTML5. vai ficar mais ou menos assim:

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

O css básico para esse modelo:

/*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;}

Se por algum motivo o menu quebrar linha, basta remover uma pequena porcentagem da largura de cada item no seguinte trecho: $(this).width((((100 * $(this).width()) / largMenu) - 0.9) + '%'); //A largura de cada item é dada em porcentagem. O - 0.9 é o ponto em questão.

Espero ter ajudado ;D.

1
  • Obs: Só com HTML e CSS, isso é impossível (até agora). 15/07/2015 às 16:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .