41Mag - Un menu fixe en jQuery qui s’affiche au passage de la souris

Un menu fixe en jQuery qui s’affiche au passage de la souris

menu fixe en jquery

Dans ce tutoriel, nous allons vous expliquer comment créer un menu fixe se situant sur un bord de l’écran et restant statique lorsque la page défile. Le menu sera réalisé en HTML, son design en CSS et son animation en jQuery.

Ce menu sera modifiable tant dans son contenu que dans son utilisation. Vous pourrez lui intégrer tous les liens que vous souhaités. Il peut également servir de menu secondaire, de regroupement de catégorie de lien (tous vos réseaux sociaux ou lien de partage) ou tout autre chose sortant de vote imagination.

Son principe est simple. Il est disposés sur un bord de l’écran – nous avons choisis le droit mais il vous sera expliqué comment le disposer de l’autre côté – et s’affiche par une courte animation au passage de la souris le rendant visible puis se re-cache quand la souris ne le survole plus.

Ce tutoriel s’adresse à tous. Chaque étape est décortiqué et expliqué pas à pas.

Voir la démo en ligneTélécharger les fichiers

La mise en place papier

Pour commencer, nous allons définir les contraintes et mettre à plat nos idées. Un calque, symbolisé par la balise DIV, entourera tous le menu. Nous lui donnerons comme identifiant : cadre-menu.

Ce calque général en comportera lui-même deux autres. Le calque de gauche contenant le menu – qui sera invisible si le curseur de la souris ne survole pas le calque général – et le curseur de droite – toujours visible – contenant l’image ou il sera écrit Menu.

Le calque de gauche se nommera : bordure menu et celui de droite : bouton-menu. La hauteur du menu sera définis en fonction du nombre de liens que le calque de gauche contient. Par contre, la largeur des cadres ne changeras pas.

schema menu fixe jquery

Le principe d’animation sera très simple. La calque de gauche, nommé bordure-menu et représenté en bleu/violet ci-dessus sera caché car nous le disposerons « en-dehors » de l’écran. Mais comme précédemment, mieux vaut un bon schéma qu’un long discours …

schema menu fixe jquery 2

Le contenu en HTML

Nous commencerons à coder notre menu en HTML au quel nous indiquerons nos trois calques. Afin de respecter la sémantique, nos liens seront représenter sous formes de listes symbolisé par la balise OL.

Cet portion de code HTML est à placé ou vous souhaité entre les balises BODY . Néanmoins, nous vous conseillons de le placer juste avant la balise de fermeture BODY pour limiter le temps de chargement de la page. Les informations, plus vite chargé, seront plus vite affiché. Votre menu s’affichera dans la continuité.

Noter que le calque bouton-menu est vide car l’image du menu sera affiché en background en CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="cadre-menu">
	<div id="bordure-menu">
		<ul>
			<li><a href="#">Lien menu 1</a></li>
			<li><a href="#">Lien menu 2</a></li>
			<li><a href="#">Lien menu 3</a></li>
			<li><a href="#">Lien menu 4</a></li>
			<li><a href="#">Lien menu 5</a></li>
		</ul>
	</div>
	<div id="bouton-menu">
 
	</div>
</div>

La mise en page en CSS

Jusque-là, le résultat n’est pas spectaculaire. Nous allons dans cette étape mettre le menu en page. Il ne restera plus qu’à l’animer ensuite en jQuery.

Le calque général, cadre-menu, devra donc être fixe, situé à gauche légèrement en haut et d’une longueur totale de 215px.

1
2
3
4
5
6
7
8
#cadre-menu {
	position:fixed;
	left:-170px;
	overflow:hidden;
	top:25%;
	width:215px;
        font:12px Arial;
}

Le calque bordure-menu, contenant la liste des liens du menu, devra flotter à gauche. Nous lui donnerons une couleur de fond, une marge intérieur (padding) et une bordure pour le design. Ce calque aura une largeur de 115px (en vrai, il est plus grand car le navigateur ajoute la marge intérieur – padding)

Nous donnerons également des consignes à la liste de liens qu’il contient. Ces éléments devront avoir une marge suffisante de séparation ainsi qu’un carré symbolisant chaque entré. Et enfin, le choix d’une couleur d’écriture.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#bordure-menu {
	float:left;
	background:#ddd;
	width:115px;
	margin:0px;
	padding:25px;
	padding-top:30px;
	border:5px solid #999;
	border-left:none;
}
#bordure-menu ul {
	list-style: square inside;
}
#bordure-menu ul li {
	padding-bottom:8px;
}
#bordure-menu ul li a {
	color:#555;
}

Nous terminerons par le cadre bouton-menu qui devra lui flotter à droite et afficher une image de fond. Sa largeur sera de 45px.

1
2
3
4
5
6
7
#bouton-menu {
	float:right;
	width:45px;
	margin:0px;
	height:136px;
	background:url('img/fond-demo-menu.jpg') top right no-repeat;
}

Vous pouvez télécharger l’image de notre menu ci-dessous en cliquant dessus avec le bouton droit de la souris et cliquez sur ‘Enregistrer l’image sous …’. Vous pouvez aussi créer votre propre bouton. Nous avons pris comme taille référence dans ce tutoriel 45×136.

fond-demo-menu

N’oubliez pas de reliée votre feuille de style CSS à votre page HTML. Ce qui vous donnera au final comme fichier 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
/* Menu DEROULANT */
#cadre-menu {
	position:fixed;
	left:-170px;
	overflow:hidden;
	top:25%;
	width:215px;
	font:12px Arial;
}
#bordure-menu {
	float:left;
	background:#ddd;
	width:115px;
	margin:0px;
	padding:25px;
	padding-top:30px;
	border:5px solid #999;
	border-left:none;
}
#bordure-menu ul {
	list-style: square inside;
}
#bordure-menu ul li {
	padding-bottom:8px;
}
#bordure-menu ul li a {
	color:#555;
}
#bouton-menu {
	float:right;
	width:45px;
	margin:0px;
	height:136px;
	background:url('img/fond-demo-menu.jpg') top right no-repeat;
}

L’animation en jQuery

Pour réaliser le script d’animation du menu en jQuery, nous utiliserons la bibliothèque du même nom jQuery. Il vous faudra donc la relier au page de vos sites affichant ce menu.Deux solutions s’offre à vous : vous télécharger et placez dans votre site ou comme dans notre exemple la relié à partir des scripts hébergé par Google.

Vous commencerez par placé cet ligne de code HTML dans chaque page ou sera présent le menu fixe. Placez cette instruction entre les balises Head.

1
2
3
4
<!-- On relie la bibiliotheque jQuery -->
<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'>
</script>

La dernière étape réside dans la conception du script du menu jQuery. Nous allons ajouter un marge de gauche de -170px. Sois la largeur réel du calque de gauche, bordure-menu, correspondant à la valeur de sa taille + la marge intérieur (padding).

Cette marge s’annulera si le curseur de la souris survole le calque général du menu, cadre-menu. Puis elle s’ajoutera de nouveau si le curseur sort du calque cadre-menu.

1
2
3
4
5
6
7
$(document).ready(function() {
  $("#cadre-menu").hover(function() {
    $("#cadre-menu").animate({ marginLeft: "170px"  }, 400 );
  },function(){
    $("#cadre-menu").animate({ marginLeft: "0"  }, 300 );
  });
});

Les valeurs en rouge 400 et 300 peuvent être modifier. Elles expriment, en ms ou milliseconde, la durée de l’animation. 400 correspond à 400ms d’animation d’apparition et 300 correspond à 300ms d’animation de disparition.

Variante : Le menu s’ouvre au click et se referme lorsque la souris quitte le cadre du menu

Il vous suffit d’insérer ce script jQuery à la place du précédent :

1
2
3
4
5
6
7
8
9
10
 $(document).ready(function() {
       $("#cadre-menu").click(function() {
    $("#cadre-menu").animate({ marginLeft: "170px"  }, 400 );
  },function(){
    $("#cadre-menu").animate({ marginLeft: "0"  }, 300 );  });
     $("#cadre-menu").hover(function() {
      },function(){
    $("#cadre-menu").animate({ marginLeft: "0"  }, 300 );
  });
});

Pour tout problèmes, questions ou améliorations. Merci d’en faire part dans les commentaires accessible légèrement plus bas.

Voir la démo en ligneTelecharger les fichiers

Article du même thême : .

  • John Casteur 59

    super le menu ! j’ai adopté ! mais une question : lorsque que je clique sur un lien dans le menu qui engenstre un pstback coté serveur , la page se recharge et le menu ne donne pas l’effet de se cacher. y a til un moyen de corriger ce bug visuel ? merci

    • http://41mag.fr 41Mag

      dites moi en plus sur votre problème …
      Si c’est top long à expliquer, n’hésitez pas à passer par MSN (mon adresse est visible sur la page contact).

  • Arnaud Fouquet

    Article très intéressant. Je m’en suis inspiré pour créer un onglet de connexion avec affichage d’un formulaire de connesion (login+mdp) au survol.
    Cela fonctionne très bien sur IE+FF+Safari mais sur google chrome, lorsque l’on survole le champ , le menu se déroule puis se ferme… indéfiniment.
    Avec vous une piste à me fournir ?
    Merci d’avance

  • TW

    Bonjour a tous
    Super script merci !

    Petite question:
    Est-ce qu’il y aurai un moyen de faire en sorte que le menu s’affiche sur un clic et non sur le hover.

    Merci d’avance pour le retour.
    Salutations
    TW

  • Miecaze

     Bonjour, merci pour votre code (simple et efficace …), j’aimerais juste une variante (si vous pouvez m’aider) comment remplacer le déclencheur qui est ici le passage de la sourie par un clic.
    merci

    • http://www.crea-troyes.fr Enzo

      Il suffit juste de remplacer hover() par click() dans le script jQuery. Ce qui donne :

      $(document).ready(function() {
      $(« #cadre-menu »).click(function() {
      $(« #cadre-menu »).animate({ marginLeft: « 170px » }, 400 );
      },function(){
      $(« #cadre-menu »).animate({ marginLeft: « 0″ }, 300 );
      });
      });

    • http://41mag.fr 41Mag

      Il suffit juste de remplacer hover() par click() dans le script jQuery. Ce qui donne :

      $(document).ready(function() {
        $(« #cadre-menu »).click(function() {
          $(« #cadre-menu »).animate({ marginLeft: « 170px »  }, 400 );
        },function(){
          $(« #cadre-menu »).animate({ marginLeft: « 0″  }, 300 );
        });
      });

      • Miecaze

         J’avais bien essayé, et cela fonctione bien pour ouvrir mais pas pour fermer ….. non?

        • http://41mag.fr 41Mag

          De quel façon souhaitez-vous fermer le cadre ?

          click ou passage de souris ?

          • giraud patrick

            l’idéal serait qu’il se ferme lorsque la sourie n’est plus sur le cadre.
            merci
            (miecaze)

          • http://41mag.fr 41Mag

            voici le code jQuery à insérer pour que le menu s’ouvre au click et se referme lorsque la souris quitte le cadre du menu :

             $(document).ready(function() {       $(« #cadre-menu »).click(function() {    $(« #cadre-menu »).animate({ marginLeft: « 170px »  }, 400 );  },function(){    $(« #cadre-menu »).animate({ marginLeft: « 0″  }, 300 );  });     $(« #cadre-menu »).hover(function() {      },function(){    $(« #cadre-menu »).animate({ marginLeft: « 0″  }, 300 );  });  }); 

          • giraud patrick

             MERCI BEAUCOUP!!!

          • http://41mag.fr 41Mag

            testez ce code et tenez moi informé.
            N’hésitez pas non plus à jeter un coup d’oeil a nos derniers tutos …

  • jesss33

    bonjour, tout d’abord merci beaucoup pour ce tuto !! Très clair et très utile !!
    j’aurais une question qui rejoint celle de Miecaze: je voudrais que le menu s’ouvre avec un clique et se referme aussi en cliquant sur le bouton menu…
    merci par avance :)

    • jesss33

      oooops désolé, je n’avais pas tout lu… il y a l’explication un peu plus haut.. désolé.. comme quoi ce tuto est vraiment très complet ^^’

      merci encore pour ce blog, très très utile

  • Toons77

    sniff ba moi ça ne fonctionne pas ….

  • ArK’

    Bonjour,
    Serait-il possible d’ouvrir et de fermer le menu au click uniquement ?
    J’ai beau essayer, je n’y arrive pas…
    J’ai essayer avec cette version de code sans aucun résultat :  $(document).ready(function() {
      $(« #cadre-menu »).click(function() {
        $(« #cadre-menu »).animate({ marginLeft: « 170px »  }, 400 );
      },function(){
        $(« #cadre-menu »).animate({ marginLeft: « 0″  }, 300 );
      });
    });

    Le menu s’ouvre bien, mais ne se referme pas au click (ni tout court d’ailleurs..)
    Merci d’avance
    Cordialement

  • ArK’

    Bon, après quelques heures de recherches, et de galère, j’ai finalement réussit à faire ce que je voulais, c’est à dire ouverture et fermeture au click.

    Je me permet donc de poster le code JS ainsi obtenu :

    $(document).ready(function() {
           $(« #cadre-menu »).click(function() {
                $(« #cadre-menu »).animate({ marginLeft: « 0″  }, 400 );
             $(this).toggleClass(« activate »);
             $(« .activate »).animate({marginLeft: »170px »}, 400);
        });
     
      });

    En espérant que ceci puisse éventuellement aider quelqu’un d’autre.
    Cordialement
    ArK’

  • capclem

    Bonjour,
    Merci pour ce tuto et ce menu très efficace !
    De quelle manière peut-on retourner le menu pour qu’il soit à droite de l’écran (et s’ouvre vers la gauche) ?
    Vous remerciant par avance !
     

  • Bub

    bonsoir, super article, j’aurai voulu savoir comment on peu l’avoir à droite ou lieu de gauche, merci

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.