Centrare elementi di un menu orizzontalmente tramite jquery

Per un cliente mi sono trovato a dover centrare orizzontalmente le voci di un menu in modo da distribuire equamente la spaziatura su tutta la larghezza del menu.

Questo è quello che vogliamo ottenere:

Schermata 2013-10-23 alle 10.32.50

usando il solo codice html seguente

<ul id="menu">
  <li><a href="#">questo</a></li>
  <li><a href="#">sarà un esempio</a></li>
  <li><a href="#">di impostazione di margini</a></li>
  <li><a href="#">automatici</a></li>
  <li><a href="#">a degli elementi di un menu</a></li>
</ul>

Con CSS ci sono alcuni “tricks” ma si tratta di soluzioni non definitive.

jquery.justifyNav.js plug-in

La soluzione è il plugin jquery justifyNav.js  distribuito con MIT license e disponibile su questa respository su GitHub.

// jquery.justifyNav.js plug-in
// This software is licensed under the MIT License
// Copyright (c) 2011 High Integrity Design, LLC.    
// highintegritydesign.com
//

(function($) {
$.fn.justifyNav = function() {
  return this.each(function() {
   var $this = $(this),
    $children = $this.children(),
    containerWidth = $this.width(),
    linksWidth = 0,
    count = $children.length;
   $children.each(function() {
    linksWidth += $(this).width();
   });

   // Don't give the last item or the 2nd to last item any right margin, then float the last item right.
   // This will account for small errors in JQuery's calculation of the item widths.
   // Otherwise the list can overflow the container!
   var linkSpacing = Math.floor((containerWidth - linksWidth) / (count - 1));
   $children
    .css('margin-right', linkSpacing + "px")
    .filter(":last")
     .css({"margin-right":0,"float":"right"})
     .prev()
      .css({"margin-right":0});
  });
};
})(jQuery);

Usare questo plugin è facilissimo. Ecco un esempio:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
    <script src="jquery.justifyNav.js"></script>
<script>
  $(document).ready(function(){
   $('ul#menu').justifyNav();
  });
</script>
<title> Esempio di utilizzo del plugin jquery.justifyNav per la centratura delle voci di un menu - niccolopandolfini.com </title>
<style>
/** questi stili non sono strettamente necessari per il funzionamento, impostate larghezze e proprietà a piacimento **/
    * {margin: 0; padding: 0; font-family: Helvetica, Arial, serif;}
  #menu {width: 980px; margin:50px auto; border-bottom: 5px solid #efefef;  overflow: hidden; *zoom: 1;}
  #menu li {display: block; float: left;}
  #menu li a {display: inline-block; color: #333; text-decoration:none; font-size:1em; margin-bottom:.5em}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="#">questo</a></li>
  <li><a href="#">sarà un esempio</a></li>
  <li><a href="#">di impostazione di margini</a></li>
  <li><a href="#">automatici</a></li>
  <li><a href="#">a degli elementi di un menu</a></li>
</ul>
</body>
</html>
 
 
 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

sette + 6 =