41Mag - Tutoriel : Une menu fixe jQuery en bas de page comme le Dock Mac OSx d’Apple

Tutoriel : Une menu fixe jQuery en bas de page comme le Dock Mac OSx d’Apple

Dans ce tutoriel, nous allons vous détaillé comment créer un menu fixe jQuery en bas de page comme le Dock d’Apple.

C’est donc un menu fixe qui ne bougera pas au défilement de la page. L’utilisateur aura la possibilité de le cacher ainsi que de le faire réapparaitre. Nous utiliserons la bibliothèque jQuery pour l’animer. Nous avons choisis différentes images ou icônes pour le rendre plus jolie. Vous pouvez le modifier comme bon vous semble, il ne s’agit ici que d’une utilisation parmis tant d’autres.

Nous vous détaillerons pas à pas les différentes étapes de création. Bien qu’elle ne soit pas obligatoire, une connaissance minimum en HTML5 est souhaitée pour la compréhension. En savoir plus sur  : le HTML5, tutoriel complet.

Le résultat final

Introduction

Notre tutoriel se déroulera dans l’ordre suivant :

  1. Creation du corps de la page web et du dock en HTML5
  2. Appliquer un style CSS
  3. Relier la bibliothèque jQuery
  4. Le script d’animation du dock en jQuery

Corps de la page web et du dock en HTML5

pour commencer, nous allons créer le corps de notre page web en HTML5 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Démo Dock type Mac OSx en jQuery</title>
</head>
<body>
 
        <h1>Démo "Dock" type Mac OSx en jQuery</h1>
 
	<article>
	Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.<br />Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse te.<br />Eodem tempore etiam Hymetii praeibus victus inopitegre sine ulla restituit mora.ublicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem<
	</article>
 
 
<footer>
	<p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
</footer>
 
</body>
</html>

Le code ci-dessus étant suffisamment simple à comprendre, nous n’apporterons aucune précision supplémentaire.

Nous allons maintenant coder le corps de notre dock en HTML5 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="dock">
 
<ul>
  <li><a href="#"><img class="imgDock" src="imgDock/home.png" /><span>Accueil</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/download.png" /><span>Download</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/news.png" /><span>Tutoriel</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/facebook.png" /><span>Facebook</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/twitter.png" /><span>Twitter</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/flickr.png" /><span>FlickR</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/rss.png" /><span>Flux RSS</span></a></li>
  <li><a class="desc" id="mask"><img class="imgDock" src="imgDock/systeme.png" /><span id="mask2">Masquer</span></a></li>
</ul>
 
</div>

Nous avons placé le dock à l’intérieur d’une balise <div> sur laquelle nous pourront intervenir (en CSS ou jQuery) grâce à son attribut id ayant pour valeur dock.

Pour respecter la sémantique, nous avons choisis d’utiliser l’élément de liste non ordonné : <ul>. Nous aurions pu également, cela aurait même été conseillé d’utiliser l’élément <nav> en HTML5 mais, par soucis de compatibilité, nous avons préférez utiliser la liste non ordonné.

Chaque élément de la liste est construit sous le même schéma :

1
<liste> <lien> <image> <texte-de-legende>

Ce qui donne :

1
<li><a href="#"><img class="imgDock" src="imgDock/home.png" /><span>Accueil</span></a></li>

Nous avons laissé les liens vides. A vous de les modifier et de les ajuster en fonction de votre projet. Il vous suffit juste de remplacer le symbole # par l’adresse de destination dans l’attribut href de la balise <a>.

Nous avons ajouter des icônes dans notre dock à l’image de celui d’Apple. Vous pouvez les modifier ou les changer comme bon vous semble. Notre illustration l’est à titre d’exemple.

Nous avons mis volontairement le texte de légende entre les balises <span> et </span. Il devra apparaitre lorsque notre souris survolera l’icône relatif au dock. Nous le mettrons en place grâce au CSS et nous l’animerons en jQuery. Les balises <span> nous serviront justement à l’identifier et lui appliquer style et script.

Appliquer un style CSS

Pour cet étape, nous allons créer un feuille de style que nous nommerons : styleDockBar. Nous allons donc la relier à notre document HTML5 en ajoutant la ligne de code ci-dessous entre les balises <head> et </head>.

1
2
<!-- Feuille de style -->
<link rel="stylesheet" href="styleDockBar.css" />

Nous pouvons des à présent appliquer un style à notre dock. Commençons par le conteneur du dock symboliser par la balise div avec l’ attribut id ayant pour valeur dock (rappelez-vous …).

1
2
3
4
5
6
7
8
9
10
11
12
13
#dock {
	position:fixed;
	bottom:4px;
	left:50%;
	background:url('imgDock/dock.png') bottom no-repeat;
	width:600px;
	height:105px;
	margin:auto;
	margin-left:-300px;
	padding:0px;
	overflow:hidden;
	text-align:center;
}

Nous lui avons appliquer la valeur fixes pour qu’il ne bouge pas et reste visible malgré le défilement de la page.

Pour l’aligner au centre du bas de la page, nous avons procéder de la manière suivante :

  1. Nous lui avons d’abord définis une largeur de 600px
  2. Nous avons ensuite déplacé l’ensemble du dock vers la gauche pour une valeur de 50%. Cela signifie donc que le début du dock se situe au centre de la page, en bas à 4px du bord.
  3. Pour le centrer, il ne nous reste plus qu’à retirer la moité de la longueur du dock : margin-left:-300px;

Nous lui avons également appliquer une image d’arrière-plan :

Toutes les images et icônes, ainsi que les script, utilisé dans ce tutoriel sont contenu dans le dossier téléchargeable du dock.

Notre dock étant légèrement transparent – image png – nous allons ajouter un style pour que l’image du dock change au survol de la souris afin de garantir une meilleur lisibilité de notre menu :

1
2
3
#dock:hover {
    background:url('imgDock/dock2.png') bottom no-repeat;
}

Il ne nous reste plus qu’à mettre en place la liste :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#dock ul {
    margin:60px 0 0 0;
    padding:0;
}
 
#dock ul li {
      display:inline;
      margin:0 5px 0 5px;
}
 
#dock ul li a:hover {
  text-decoration:none;
}
 
#dock ul li img {
      width:40px;
      height:40px;
       -webkit-box-reflect: below 0px -webkit-gradient(linear, 0 50%, 0 100%, from(transparent), color-stop(0.7, transparent), to(white));
}

A la ligne 7, nous avons appliquer à l’attribut display la valeur inline pour aligner cote à cote les élément de la liste.

A la ligne 18, nous avons appliquer un effet de reflet en CSS3 à l’instar du Dock d’Apple.

La mise en forme du texte de légende

Pour commencer, nous allons cacher le texte de légende. Il ne devra s’afficher qu’au survol de son icône correspondant. Rappelez-vous, nous l’avions encadré entre les balises <span>. Il ne nous reste donc qu’à appliquer un effet sur l’élément <span> contenu dans un élément de liste qui lui-même appartient au dock :

1
2
3
#dock ul li a span {
  display:none;
}

Et enfin, pour le CSS, il nous suffit juste de faire apparaitre ce texte lorsque la souris survole une icône correspondante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#dock ul li a:hover span {
  display:inline;
  position:absolute;
  bottom:75px;
  margin-left:-80px;
  width:80px;
  border:1px solid #555;
  background:#888;
  border-radius:5px;
  padding:4px 8px 4px 8px;
  text-shadow:1px 0px 2px #111,0px 1px 2px #111,-1px 0px 2px #111,0px -1px 2px #111;
  color:#fff;
  font:bold 16px Arial;
}

Nous nous sommes servis du CSS pour situer le texte de légende au dessus de son icône relative.

Relier la bibliothèque jQuery

Nous utiliserons la bibliothèque jQuery pour réaliser l’animation de notre Dock. Commencez par télécharger la dernière version de jQuery et reliez-le à votre document en ajoutant la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
<!-- jQuery  -->
<script src="js/jquery-1.4.3.min.js"></script>

Script d’animation du dock en jQuery

Nous allons maintenant procéder à la dernière étape de nord projet : Animer notre Dock en jQuery. Il devra modifier chaque icône au passage de la souris en le grossissant. Nous aurions pu réaliser cette étape en CSS mais l’animation aurait été moins fluide. Le script devra également permettre de cacher et de faire réapparaitre le Dock.

Animer les icônes du Dock

1
2
3
4
5
6
7
8
9
$(".imgDock").hover(function() {
    $(this).animate({ width: "60px"  }, 40 );
    $(this).animate({ height: "60px"  }, 40 );
    $(this).css("margin-top", "-20px");
  },function(){
    $(this).animate({ width: "40px"  }, 65 );
    $(this).animate({ height: "40px"  }, 65 );
    $(this).animate({ marginTop: "0px"  }, 65 );
  });

Réduisez ou augmentez le chiffre en rouge pour ajuster la vitesse d’animation de vos icônes.

Masquer et afficher le Dock

1
2
3
4
5
6
7
 $("#mask").toggle(function() {
    $("#dock").animate({ bottom: "-30px"  }, 400 );
    $("#mask2").replaceWith('<span id="mask2">Afficher</span></a>');
  },function(){
    $("#dock").animate({ bottom: "4px"  }, 400 );
    $("#mask2").replaceWith('<span id="mask2">Masquer</span></a>');
  });

Le script ci-dessus aura deux tâches :

  • Il devra masquer le dock en le faisant descendre pour se cacher en bas de page et changer le texte de l’icône relatif à ce changement. La nouvelle légende sera Afficher.
  • Si le dock est masqué, il devra le faire réapparaitre à sa place originale et de nouveaux changer le texte de l’icône relatif à ce changement. La nouvelle légende sera Masquer.

Script complet

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Démo Dock type Mac OSx en jQuery</title>
 
	<!-- jQuery  -->
	<script src="js/jquery-1.4.3.min.js"></script>
 
        <!-- Feuille de style -->
	<link rel="stylesheet" href="styleDockBar.css" />
 
</head>
<body>
 
 
<script>
$(document).ready(function(e) {
 
  $(".imgDock").hover(function() {
    $(this).animate({ width: "60px"  }, 40 );
    $(this).animate({ height: "60px"  }, 40 );
    $(this).css("margin-top", "-20px");
  },function(){
    $(this).animate({ width: "40px"  }, 65 );
    $(this).animate({ height: "40px"  }, 65 );
    $(this).animate({ marginTop: "0px"  }, 65 );
  });
 
   $("#mask").toggle(function() {
    $("#dock").animate({ bottom: "-30px"  }, 400 );
    $("#mask2").replaceWith('<span id="mask2">Afficher</span></a>');
  },function(){
    $("#dock").animate({ bottom: "4px"  }, 400 );
    $("#mask2").replaceWith('<span id="mask2">Masquer</span></a>');
  });
 
 
});
</script>
 
 
	<h1>Démo "Dock" type Mac OSx en jQuery</h1>
 
 
<div id="dock">
 
<ul>
  <li><a href="http://www.41mag.fr"><img class="imgDock" src="imgDock/home.png" /><span>Accueil</span></a></li>
  <li><a href="http://www.41mag.fr/demo/dockTypeMac-41mag.zip"><img class="imgDock" src="imgDock/download.png" /><span>Download</span></a></li>
  <li><a href="#"><img class="imgDock" src="imgDock/news.png" /><span>Tutoriel</span></a></li>
  <li><a href="http://www.facebook.com/le41mag"><img class="imgDock" src="imgDock/facebook.png" /><span>Facebook</span></a></li>
  <li><a href="http://twitter.com/intent/user?screen_name=creatroyes"><img class="imgDock" src="imgDock/twitter.png" /><span>Twitter</span></a></li>
  <li><a href="http://www.flickr.com/photos/le41mag/"><img class="imgDock" src="imgDock/flickr.png" /><span>FlickR</span></a></li>
  <li><a href="http://feeds.feedburner.com/41mag"><img class="imgDock" src="imgDock/rss.png" /><span>Flux RSS</span></a></li>
  <li><a class="desc" id="mask"><img class="imgDock" src="imgDock/systeme.png" /><span id="mask2">Masquer</span></a></li>
</ul>
 
</div>
 
 
	<article>
	Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.<br />Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse te.<br />Eodem tempore etiam Hymetii praeibus victus inopitegre sine ulla restituit mora.ublicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem<
	</article>
 
 
	<footer>
		<p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
	</footer>
 
</body>
</html>

Et pour le fichier styleDockBar.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
54
55
56
57
58
59
60
61
/* Menu DEROULANT */
#dock {
	position:fixed;
	bottom:4px;
	left:50%;
	background:url('imgDock/dock.png') bottom no-repeat;
	width:600px;
	height:105px;
	margin:auto;
	margin-left:-300px;
	padding:0px;
	overflow:hidden;
	text-align:center;
}
 
#dock:hover {
    background:url('imgDock/dock2.png') bottom no-repeat;
}
 
#dock ul {
    margin:60px 0 0 0;
    padding:0;
}
 
#dock ul li {
      display:inline;
      margin:0 5px 0 5px;
}
 
#dock ul li a:hover {
  text-decoration:none;
}
 
#dock ul li img {
      width:40px;
      height:40px;
       -webkit-box-reflect: below 0px -webkit-gradient(linear, 0 50%, 0 100%, from(transparent), color-stop(0.7, transparent), to(white));
}
 
#mask, #mask2 {
  cursor:pointer;
}
/* Texte de légende */
#dock ul li a span {
  display:none;
}
 
#dock ul li a:hover span {
  display:inline;
  position:absolute;
  bottom:75px;
  margin-left:-80px;
  width:80px;
  border:1px solid #555;
  background:#888;
  border-radius:5px;
  padding:4px 8px 4px 8px;
  text-shadow:1px 0px 2px #111,0px 1px 2px #111,-1px 0px 2px #111,0px -1px 2px #111;
  color:#fff;
  font:bold 16px Arial;
}

Article du même thême : ...

  • http://www.facebook.com/raphael.hermann.18 Raphael Hermann

    comment faire un systeme de notification instantanée  comme sur facebook

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