Menu de largeur fluide utilisant CSS

J’ai un menu CSS horizontal. Le problème est que lorsque l’utilisateur crée plus de 5 éléments de menu, les tabs li se déplacent vers une nouvelle ligne. Je ne veux pas que cela se produise.

Comment puis-je utiliser une largeur fluide? Ainsi, si l’utilisateur ne crée que 3 éléments de menu, la largeur de chaque onglet augmente de manière à s’adapter à toute la largeur.

HTML:

    Test 
  Test 
  Test 
  Test 
  Test 
  Test 
  Test

CSS:

 div.container { clear: both; margin: 10px auto 0; width:960px; border:1px solid red; height:700px; } div#new-menu-lower { border-radius: 3px 3px 3px 3px; border-top: 0 solid lightgrey; margin: 0 8px 10px; } #new-menu-lower ul { border: 1px solid white; display: block; height: 27px; } #new-menu-lower ul li:first-child { border-left: 0 solid lightgrey !important; border-radius: 7px 0 0 7px; } #new-menu-lower ul li { background-image: url("http://soffr.miximages.com/jquery/16if95z.png"); background-repeat: repeat; border-right: 0 solid lightgrey !important; float: left; height: 27px; padding-left: 10px; padding-right: 10px; text-align: center; width: 168px; }

Exemple JSFIDDLE: http://jsfiddle.net/rM9MW/

Vous n’avez pas javascript jed!

démo jsBin

Il suffit de changer ces lignes dans votre CSS:

 #new-menu-lower ul { /*display: block; //////////////////REMOVE//////////////////// */ display:table; /* //////////////////ADD//////////////////// */

et:

 #new-menu-lower ul li { /* float: left; //////////////////REMOVE//////////////////// */ display:table-cell; /* //////////////////ADD//////////////////// */

comme ça?

 var mw = $('.menuul').width(); var ll = $('.menuli').length; var c = mw / ll; $('.menuli').css('width', c)

http://jsfiddle.net/rM9MW/8/

Vous pouvez utiliser un peu de JQuery pour y parvenir, voici le jsfiddle

Aussi, veuillez trouver le code ici: –

 $(document).ready(function(){ var liCount = $('li.menuli').length; var parentUlWidth = $('li.menuli').parent('ul').width(); var liWidth = Math.floor(parentUlWidth * (1/liCount)) - 10; $('#new-menu-lower ul li').css({ 'width':liWidth }); });

MODIFIER:

J’ai mis à jour le violon s’il vous plaît vérifier le lien de violon maintenant. J’ai changé le script et un peu de css.

CSS:

 #new-menu-lower ul li { padding-left: 5px; padding-right: 5px; }

Démo en direct http://jsfiddle.net/rM9MW/29/

Hé maintenant, vous pouvez utiliser display:table-cell propriétés de display:table-cell dans votre css comme ceci

et mettre à jour votre css et changer de couleur en fonction de votre mise en page

 div.container { margin: 10px auto 0; width:960px; border:1px solid red; height:700px; background:red; } div#new-menu-lower { border-radius: 3px 3px 3px 3px; border-top: 0 solid lightgrey; margin: 0 8px 10px; background:green; } #new-menu-lower ul { border: 10px solid yellow; } #new-menu-lower ul li:first-child { border-left: 0 solid lightgrey !important; border-radius: 7px 0 0 7px; } #new-menu-lower ul li{ display:table-cell; padding-left: 10px; padding-right: 10px; } #new-menu-lower ul li a{ background: url("http://soffr.miximages.com/jquery/16if95z.png"); border-right: 0 solid lightgrey !important; height: 27px; padding-left: 10px; padding-right: 10px; text-align: center; display:block; width: 168px; }

Démo en direct http://jsfiddle.net/rM9MW/29/

Mise à jour de la démo http://jsfiddle.net/rM9MW/39/

En utilisant le JQuery suivant, vous pouvez atteindre votre objective.

JQUERY

 $ulWidth = $('.menuul').width(); $listLength = $('.menuli').length; $('.menuli').css('width', $ulWidth / $listLength )

Voir cette démo: http://jsfiddle.net/rathoreahsan/nxurR/

J’ai créé un exemple qui fonctionne (je pense):

http://jsfiddle.net/ybmGr/2/

Cela dépend de la quantité de texte à l’intérieur de l’élément de liste. Cela ne fonctionnera pas pour les éléments X. Vous ne pouvez simplement pas utiliser un X illimité avec cela.

EDIT : Eh bien, il semble que undefined affiché la solution qui fonctionne pour autant d’éléments que vous voulez …

Je viens du futur, pour les futurs téléspectateurs 🙂

Vous pouvez utiliser un écran: flex; pour le ul et un flex: 1; pour les éléments de menu, je pense que c’est une très bonne solution pour les navigateurs récents.

 ul{display: flex;} li{flex: 1;} /* modify witdh of item */