Dans ce tutoriel, nous allons créer et mettre en place le dock "simpleDock" propulsé par jQuery qui pourra faire office de menu.

Il existe déjà différents plugins jQuery afin de réaliser un dock, jqDock est certainement le plus connu et le plus complet pour reproduire un dock façon Apple. Mais il est aussi très lourd et comprend un nombre incalculable de fioritures. L'objectif ici est donc de réaliser un dock simple et léger.

Dans un premier temps, nous mettrons en place la structure html et le style css, nous verrons ensuite comment utiliser le plugin par défaut et enfin nous étudierons son code et donc son fonctionnement.

* Pour les icônes, nous avons utilisé le thème iPhone Deep proposé par Toffeenut Design. Par ailleurs, ils proposent une multitude de goodies gratuits (pour une utilisation non-commerciale) très bien réalisés ! *

** Ce tutoriel utilise jQuery, bibliothèque JavaScript disponible ici. Pour la mise en forme CSS3 sous IE8 et antérieur, utilisez le hack PIE. **

EDIT : Afin de corriger les éventuels bugs liés au chargement des images, l'appel "$(document).ready()" est remplacé par "$(window).load()". Cette fonction exécute le script à la fin du chargement complet des éléments de la page et donc des images.

Voir la démo | Télécharger le plugin "simpleDock" | Télécharger la source


Création de la template HTML :

Le dock se compose d'une simple liste comportant des liens images :

<ul id="dock">
<li class="dock-objet"><a href="#"><img src="images/news.png" alt="news"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/agenda.png" alt="agenda"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/shop.png" alt="shop"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/movie.png" alt="movie"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/music.png" alt="music"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/contact.png" alt="contact"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/rss.png" alt="rss"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/facebook.png" alt="facebook"/></a></li>
<li class="dock-objet"><a href="#"><img src="images/twitter.png" alt="twitter"/></a></li>
</ul>

Pensez à bien remplir l'attribut "alt" de la balise image, il sera nécessaire pour le nom à afficher.


Création de la feuille de style :

Nous allons donner à notre dock un style à la "Apple", c'est à dire sobre, simple et efficace ;) Un beau dégradé, des bordures discrètes, une ombre et le tour est joué (enfin il me semble ?) :

ul#dock {
list-style:none;
overflow:hidden;
padding:15px 10px 10px 10px;
margin:100px auto;
background:rgb(77,84,93);
background: -moz-linear-gradient(
top,
rgba(100,110,120,.2),
rgba(100,110,120,.6)
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(100,110,120,.2)),
to(rgba(100,110,120,.6))
);
background: -o-linear-gradient(
top,
rgba(100,110,120,.2),
rgba(100,110,120,.6)
);
border:1px #636a72 solid;
border-bottom:1px #4f545c solid;
box-shadow:0px 8px 6px #262626;
border-radius:8px;
}
ul#dock li {
float:left;
position:relative;
top:0;
margin:0 8px 0 8px;
padding:0;
line-height:0;
}
ul#dock li a img {
border:none;
}
div.p_textdock {
position:absolute;
display:none;
text-align:center;
width:100%;
color:white;
font-family:arial, helvetica;
text-shadow:1px 1px 1px #222222;
font-size:.8em;
line-height:16px;
text-transform:uppercase;
}

Il est à noter qu'aucune largeur n'est défini pour le dock, c'est normal, elle sera défini par notre plugin en fonction des éléments présents. La classe "p_textdock" correspond au nom de l'élément à afficher en dessous de l'icône, celui-ci sera généré par le plugin.


Utilisation du plugin "simpleDock" :

Une fois que nous avons inclus la bibliothèque jQuery et le plugin à votre page :

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="simpleDock.min.js"></script>

Il ne reste plus qu'à appeler le constructeur sur notre liste :

$(window).load(function(){
$('#dock').makeDock();
});

Notre dock fonctionne ! Par défaut nous avons un décalage vers le haut de 10px et des temps de transition de 0,25s et 0,4s. Il est possible de les modifier à votre guise :

$('#dock').makeDock({
value: 8,
timeOn: 100,
timeOff: 200
});

Nous avons donc la variable "value" qui correspond au décalage que l'icône va effectuer (à partir de 0, les valeurs négatives fonctionnent, mais le plugin n'est pas conçu pour) et les temps (en millisecondes) qui correspondent à la durée de l'animation (à la montée et à la descente).


Le code :

Le plugin "simpleDock" se compose de trois fonctions, une qui va construire le dock, une autre qui va déterminer la taille du dock et la dernière qui s'occupera de l'animation. Elle s'insèreront dans le code suivant :

(function($){
//Nos fonctions
})(jQuery);

Et voici les fonctions commentées :




Voilà, vous avez maintenant toutes les clés en main pour créer ou intégrer un dock simple et efficace !

N'hésitez surtout pas à faire part de vos impressions, commentaires ou autres dans la zone prévue à cet effet.