Olivier El Mekki

Plugin JQuery de navigation web2.0

Le monde web2.0 nous recommande de conserver nos pages les plus concentrées possible et de permettre une plus grande interactivité à l’utilisateur. Voilà un travail pour le développeur frontend. Je vous propose ici un plugin jquery pour dissimuler le panneau de navigation de votre site dans votre header et de laisser l’utilisateur le faire apparaître et disparaître à son gré.

Pour une démonstration de ce plugin, vous pouvez voir la navigation de ce blog, ainsi que mon site professionnel.

Le code HTML

Le défilement étant vertical, ce code s’adapte particulièrement à un menu de navigation placé sous un header. À vous de styler le tout à votre convenance.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="jqNav">
  <ul id="nav">
    <li class="tab">
    </li>
    <li class="tab">
    </li>
    <li class="tab">
    </li>
    <li class="tab">
    </li>
  </ul>
 
  <ul id="menu">
    <li class="first"><a href="lien1">Lien1</a></li>
    <li><a href="lien2">Lien2</a></li>
    <li><a href="lien3">Lien3</a></li>
    <li><a href="lien4">Lien4</a></li>
  </ul>
</div>

Vous pouvez rajouter autant d’élément que vous le voulez, pourvu que le nombre de li de #menu corresponde au nombre de li.tab de #nav .

#nav représentera les différents onglets. Vous pouvez y placer ce que vous voulez (à partir du moment où cela reste du XHTML valide, bien entendu ;) ).

#menu représente la partie visible du panneau, idéalement une liste horizontale. La cible du lien ne sera jamais suivi, mais il est important de donner une cible valide à chacun pour que les personnes ayant désactivé le javascript puisse tout de même naviguer sur votre site (en particulier les bots des moteurs de recherche).

Le CSS

Vous êtes libre de styler votre panneau comme vous l’entendez, le seul impératif est de mettre #nav en display: none ; par défaut.

Voici un exemple de css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* Nav */
#nav
{
  width: 951px ;
  height: 200px ;
  margin: auto ;
  background-color: #e6e6e6 ;
  color: #FFFFFF ;
  display: none ;
}
 
  #nav li.tab
  {
    width: 75% ;
    text-align: center ;
    margin: auto ;
    padding: 25px ;
  }
 
/* Menu */
#menu
{
  width: 951px ;
  padding: 0 50px ;
  height: 37px ;
  margin: auto ;
  background-color: #e6e6e6 ;
}
 
  #menu li
  {
    width: 20% ;
    padding-top: 5px ;
    float: left ;
    margin: auto ;
    text-align: center ;
  }
 
  #menu li.first
  {
    margin-left: 10% ;
  }
 
    #menu li a
    {
      color: #FFFFFF ;
      text-decoration: none ;
    }
 
    #menu li a:hover
    {
      border-bottom: 1px dotted ;
    }

Le javascript

Veuillez tout d’abord ne pas oubliez d’inclure jquery. Incluez ensuite un fichier (je l’ai appelé jqNav.js pour ma part) contenant :

(function($)
{
  $.fn.jqNav = function()
  {
    return this.each( function()
    {
      var shown   = 0 ;
      var active  = 0 ;
      var obj     = $( this ) ;
 
      change_weight = function( str_value )
      {
        obj.children( '#menu' ).children( 'li' ).eq( active ).css( 'font-weight', str_value ) ;
      }  
 
      toggleNav = function()
      {
        if ( shown == 0 )
        {
          obj.children( '#nav' ).slideDown( 1000 ) ;
          shown = 1 ;
        } else {
          obj.children( '#nav' ).slideUp( 1000 ) ;
          shown = 0 ;
        }
      }  
 
      changeTab = function( i )
      {
        if ( shown == 0 )
        {
          obj.children( 'ul' ).children( '.tab' ).eq( active ).hide() ;
          obj.children( 'ul' ).children( '.tab' ).eq( i ).show() ;
          active = i ;
          change_weight( 'bold' ) ;
          toggleNav() ;
        } else {
          if ( active == i )
          {
            toggleNav() ;
            change_weight( 'normal' ) ;
          } else {
            change_weight( 'normal' ) ;
            obj.children( 'ul' ).children( '.tab' ).eq( active ).hide() ;
            obj.children( 'ul' ).children( '.tab' ).eq( i ).fadeIn( 500 ) ;
            active = i ;
            change_weight( 'bold' ) ;
          }
        }
      }  
 
      obj.children( 'ul' ).children( '.tab' ).each( function()
      {
        $(this).hide() ;
      } ) ;
 
      obj.children( '#menu' ).children( 'li' ).each( function(i){ $(this).children( 'a' ).click( function(){ changeTab( i ) ; return false ; } ) } ) ;
    } ) ;
  }
 
})(jQuery) ;
 
$(document).ready( function()
{
  $( '#jqNav' ).jqNav() ;
} ) ;

Et c’est tout. Le plugin se chargera de lui-même dès que le DOM sera prêt et effectuera les transformations nécessaires.

N’hésitez pas à me contacter pour toute information complémentaire.

Laisser un commentaire