Essayer de centrer un menu jquery de largeur dynamique

Question

J'ai un menu construit avec jquery de apycom.com que j'essaie de centrer. Les éléments de menu sont à partir d'un cms et créés dynamiquement lorsque la page se charge. Cela signifie donc que le menu n'est pas une largeur fixe. J'ai essayé plusieurs méthodes en utilisant simplement css, mais sans avoir une largeur définie pour le menu, ils ne veulent pas travailler.

J'ai trouvé des informations qui me portent à croire qu'il pourrait y avoir un moyen de le faire avec javascript.

Y a-t-il un moyen de définir dynamiquement la largeur de l'élément div autour du menu, puis de définir les marges gauche et droite sur Auto pour centrer le menu?

S'il existe une meilleure façon d'y parvenir, je suis ouvert aux idées.

Merci à l'avance Bjorn

Voici un échantillon de ce que j'ai jusqu'ici.

J'ai déjà essayé d'utiliser 'margin: 0 auto;' mais sans paramètre de largeur qui ne fonctionne pas. Parce que le menu est créé en faisant une boucle sur les éléments de menu disponibles à partir des cms, je ne connais pas la largeur du menu.

J'ai essayé d'utiliser 'display: inline-block;' aussi bien, et cela m'amène à un point que l'espace de bloc que le menu prend est seulement la largeur du menu. Maintenant, je dois juste pouvoir centrer ce bloc. Je pensais qu'il pourrait y avoir un moyen qu'une fois que le menu a été créé et la largeur est alors connu que vous pourriez ensuite appliquer les paramètres de marge.

Peut-être similaire à la façon dont jquery peut appliquer et modifier les paramètres de style à la volée.

<div class="top_navigation_bar"> 
<div id="menu"> 
    <ul class="menu"> 
     <li><a class="parent" href="/en/"><span>Home</span></a></li> 
     <li><a class="parent" href="/en/web-design"><span>Web Design</span></a> 
     <div> 
      <ul> 
       <li><a href="/en/design-packages"><span>Design Packages</span></a></li> 
       <li><a href="/en/website-maintenance"><span>Website Maintenance</span></a></li> 
       <li><a href="/en/redesign-website"><span>Redesign Website</span></a></li> 
       <li><a href="/en/design-fundamentals"><span>Design Fundamentals</span></a></li> 
       <li><a href="/en/design-elements"><span>Design Key Elements</span></a></li> 
      </ul> 
     </div> 
     </li> 
     <li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li> 
     <li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a> 
     <div> 
      <ul> 
       <li><a href="/en/small-business-marketing"><span>Small Business Marketing</span></a></li> 
       <li><a href="/en/leveraging-the-internet"><span>Leveraging the Internet</span></a></li> 

      </ul> 
     </div> 
     </li> 
     <li><a class="parent" href="/en/doing-business"><span>About Us</span></a> 
     <div> 
      <ul> 
       <li><a href="/en/about"><span>Design Team</span></a></li> 
      </ul> 
     </div> 
     </li> 
     <li><a class="parent" href="/en/blog"><span>Blog</span></a></li> 
     <li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li> 
     <li class="last"><a href="/en/faq"><span>FAQ</span></a></li> 
    </ul> 
</div> 

.top_navigation_bar { 
    height: 46px; 
    padding-top: 4px; 
    background-color: #3a8658; 
} 

div#menu { 
    height: 46px; 
    padding-left: 24px; 
    background: url(/site_media/template_images/images/left.png) no-repeat; 
    _background: url(/site_media/template_images/images/left.gif) no-repeat; 
    width:auto; 
} 

div#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
} 

Answer 1

Si vous essayez de centrer l'#menu à l'intérieur du .top_navigation_bar alors vous pouvez utiliser le margin:0 auto et utiliser plus jQuery comme celui-ci

$(function(){ 
    $menu = $('#menu'); 

    $menu.width(
     $('.menu').outerWidth() + 
     $menu.outerWidth() - $menu.width() 
    ); 
    // added the following line, because the lavalamp plugin 
    // corrects itself when the window resizes.. 
    // so we trigger a resize event, and the plugin fixes everything ;) 
    $(window).trigger('resize'); 
}); 

ce redimensionnera le #menu selon son contenu, et deviendra centrée en raison de la marge automatique que nous avons définie dans css.

exemple à http://www.jsfiddle.net/MCnbr/

Answer 2

Sans un échantillon rend plus difficile de voir ce qui se passe exactement. Ce serait bien si vous postez un échantillon pour HTML et CSS que vous utilisez. Mais la cécité ...

Pour un élément horizontal de centrage avec CSS, vous pouvez le faire:

element {margin: 0px auto;} 

Cela suffit pour centrer correctement un élément.

Notez que block elements (comme div, ul, li et p) tend à remplir 100% horizontalement. Les éléments flottants ou le positionnement absolu les fait perdre ce characterer fullfillment. Si tel est le cas, les éléments seront enroulés à une taille confortable minimum qui permet au contenu d'être affiché, sauf si vous définissez des propriétés de largeur et/ou de débordement.

Si vous définissez la largeur et que le contenu est supérieur à la largeur déclarée, il sera surchargé ou enveloppera. Vous avez également des propriétés CSS pour gérer ces cas.

Je recommande de le faire avec CSS, car cela rend la mise en page plus accessible. Mais si vous préférez, vous pouvez coder la largeur avec javascript ou jquery, ce qui vous facilitera la vie.

Pour processus avec le javascript, vous aurez besoin de quelque chose comme:

myMenuElement.style.width = "200px"; 

avec Jquery (width method):

$('#myMenuElement').width(200); 

Vive.

EDIT

Je ne sais pas ce qui est exactement l'effet désiré, mais je fait quelques changements dans votre css. Vérifier.

.top_navigation_bar { 
    height: 46px; 
    padding-top: 4px; 
    background-color: #3a8658; 
} 

div#menu { 
    height: 46px; 
    padding-left: 24px; 
} 

div#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul.menu>li { 
    display: inline; 
    position: relative; 
} 

ul.menu>li>div { 
    display: block; 
    position: absolute; 
    left: 0%; 
} 

ul.menu span { 
    white-space: nowrap; 
} 

Suivez a good reference from both, vertical and horizontal menus (j'ai appris de ceux-ci).