I want to make a menu that always leaves the items with proportional sizes, occupying all available width and adapting.
.top-menu ul {
width: 100%;
}
.top-menu ul li {
display: inline;
list-style: none;
}
.top-menu ul li a {
display: inline-block;
}<div class="top-menu full">
<ul>
<li><a>Home</a></li>
<li><a>Aqui!</a></li>
<li><a>Alí!</a></li>
<li><a>Acolá!</a></li>
<li><a>Mais Pra lá</a></li>
<li><a>Não sei onde</a></li>
</ul>
</div> To achieve this you have to give display: table; to ul and display:table-cell; to li .
Test like this:
.top-menu ul {
width: 100%;
display: table;
}
.top-menu ul li {
display:table-cell;
list-style: none;
}
Another option in case you know how many li you can use this way in .top-menu ul li { :
float: left;
width: 16%; // neste caso (100% / 6 links) = 16%
Set display:table-cell; to li's, so they will behave like table cedulas and consequently fill up all available space.
Why do not you try dynamically using jQuery? For example, you can get the number of list items at runtime and divide the total width by that value by assigning the result to the width of each of the items in your list, something similar to the following code snippet:
var seletorDosItens = $(".top-menu full").find("li");
var totalDeItensDaLista = seletorDosItens.length;
seletorDosItens.css("width", (100 / totalDeItensDaLista) + "%");
Add float: left in li.
And with jQuery have the following code:
<script>
$(document).ready(function() {
$('.top-menu li').css("width", ($('.top-menu ul').width() / $('.top-menu ul li').size()) + "px");
$( window ).resize(function() {
$('.top-menu li').css("width", ($('.top-menu ul').width() / $('.top-menu ul li').size()) + "px");
});
});
</script>
But I think the best way is that @DiegoLopesLima quoted with css
display:table-cell;
Nas li