Boutons extensibles JQuery horizontaux à la largeur de la fenêtre

Question

Je tente de créer un menu qui étend ses éléments à la largeur de la fenêtre. Quelqu'un pourrait-il me dire ce que je fais de mal? Je sais que cette question a déjà été posée mais je ne sais pas quel est le problème avec mon code.

C'est ce que je "essaie d'atteindre. Le rouge est la fenêtre

http://jsfiddle.net/JdGeQ/5/

Javascript

$(function(){ 
    $(window).resize(function (e) { 
     setTimeout(function() { 
      resizeButtons(); 
     }, 200); 
    }); 
    resizeButtons(); 
}); 

function resizeButtons() { 
    var count = $("#menu").length; 
    var itemwidth = $(window).width/count; 

    $(".item").css("background", "blue"); 
    $(".item").css("width", itemwidth); 
} 

css

.elementtop { 
    position: fixed; 
    top: 0; 
} 
.elementfooter { 
    position: fixed; 
    bottom: 0; 
} 
.elementright { 
    right: 0; 
} 
ul { 
    min-width:100%; 
    padding:0; 
    margin:0; 
    float:left; 
    list-style-type:none; 
    background: #000000; 
} 
li { 
    display:inline; 
} 
a { 
    overflow: hidden; 
    text-decoration:none; 
    color:white; 
    background-color:purple; 
    padding:0.2em 0.6em; 
    border-right:1px solid white; 
} 

html

<div> 
    <ul id="menu"> 
     <li> <a href="#" class="item"> 
       <span>Text text</span> 
      </a> 

     </li> 
     <li> <a href="#" class="item"> 
       <span>Text2</span> 
      </a> 

     </li> 
     <li> <a href="#" class="item"> 
       <span>Text3</span> 
      </a> 

     </li> 
    </ul> 
</div> 

Merci à l'avance.

Answer 1

Vous avez quelques erreurs dans votre code jQuery. Vous devez utiliser width() au lieu de width, car il s'agit d'un appel de fonction. En outre, vous ne sélectionnez pas les éléments de menu lorsque vous affectez count, vous sélectionnez uniquement le #menu.

function resizeButtons() { 
    var count = $("#menu .item").length; 
    var itemwidth = $(window).width(); 
    itemwidth = itemwidth/count; 
    $(".item").css(
     "width", itemwidth 
    ); 
} 

Vous devez également définir display:inline-block ou display:block sur vos points d'ancrage, de sorte que vous pouvez affecter la width.

a { display:inline-block; } 

Updated Fiddle

Remarque: Vous devrez également tenir compte du rembourrage, etc. sur vos éléments de menu pour obtenir le bon résultat.

Answer 2

Avec longueur $ (menu « # ») vous obtenez le nombre d'occurrences de l'élément #menu -. 1. Vous devez utiliser ce qui suit pour obtenir le nombre d'éléments de menu

var count = $("#menu li").length; 

Answer 3

Cela peut être fait avec CSS pur:

http://cssdeck.com/labs/hgmvgwqc

ul { 
    min-width:100%; 
    padding:0; 
    margin:0; 
    display: table; 
    list-style-type:none; 
    background: #000000; 
} 
li { 
    display: table-cell; 
    width: 33%; 
} 
a { 
    overflow: hidden; 
    text-decoration:none; 
    color:white; 
    background-color:purple; 
    padding:0.2em 0.6em; 
    border-right:1px solid white; 
    display: block; 
} 

Cette méthode nécessite de connaître le nombre d'éléments liste il y a.