11488 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'essaie de mettre au point un menu (bootstrap 3) dont la largeur des éléments s'adaptent pour occuper toute la largeur ou presque du conteneur du menu.
Cette largeur s'adapte à chaque chargement de page et à chaque redimensionnement.

Mais cela ne fonctionne pas correctement... et je ne sais pas trop où cela coince.

La largeur n'est pas totalement occupée mais bizarrement elle l'est parfois et, sur certains navigateurs, le menu passe parfois sur 2 lignes, ce qui signifierait que les éléments sont trop agrandis.

Voici les scripts correspondant :


<script>
function MenuUpdate(largeurMenu2){
	var largeurMenu = $("#menu .nav-container").width();
	var zoneVide=largeurMenu-largeurMenu2;
	var nbItems = $('#menu-menu > *').length;
	var nbPixels = Math.floor(zoneVide/nbItems);
	$("#menu-menu > li > a").css("padding-right",nbPixels);
}
	
$(document).ready(function () {
	$("#menu-menu > li > a").css("padding-right",0);
	var largeurMenu2 = $("#menu-menu").width();
	MenuUpdate(largeurMenu2);
	$( window ).resize(function() {
		MenuUpdate(largeurMenu2);
	});
});
</script>



<section id="menu">
 <nav class="navbar navbar-default affix-top" role="navigation" id="BB-nav">
    <div class="container-fluid">
        <div class="container container-no-padding nav-container">
                      <div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".BB-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                </div>
         
<ul id="menu-menu" class="nav navbar-nav BB-nav collapse navbar-collapse">
<li class="dropdown"><a href="/presentation">Présentation</a></li>
<li class="dropdown"><a href="/actu">Actualités</a></li>
<li class="dropdown"><a href="/offres-et-services">Offres et services</a></li>
</ul>

</div>
</div>
</nav>
</section>


Le menu est visible sur la page http://s754068984.onlinehome.fr
J'ai potentiellement résolu le problème, mais ce n'est pas parfait. Si l'affichage sur la largeur exacte (à 1 ou 2 pixels près) fonctionnait sur certains navigateurs, ce n'était pas le cas sur tous.
askhanir passe a bootstrap 4 tu pourras faire facilement ton menu sans une ligne de code en js.