Menu accordéon horizontal jQuery

La bibliothèque jQuery est entièrement libre. Elle permet d'ajouter des effets vraiment stupéfiant sur une page web à l'aide du JavaScript. Le tutoriel qui suis est compatible avec les principaux navigateurs web (Firefox, internet explorer, opera, Google chrome).

Ce tutoriel qui se base sur un ressource anglaise similaire (jQuery examples - Horizontal Accordion) est réservé aux personnes qui sont un minimum à l'aise avec l'HTML et le CSS.

Démonstration

Prérequis

Il est indispensable d'avoir un espace d'hébergement sur lequel mettre en ligne ce menu. En effet, le menu n'est pas installé sur le site Jimdo lui-même, car cela peut poser quelques problèmes.

Ainsi, si vous n'avez pas d'hébergeur je vous recommande de consulter cette liste d'hébergeurs gratuits qui n'impose pas de publicité.

Dans un second temps il vous est recommandé de télécharger la dernière version de jQuery sur leur site officiel.

Enfin, l'idéal pour comprendre ce tutoriel est d'avoir quelques notions d'HTML et de CSS.

/!\ Attention: il faut vraiment utiliser un service d'hébergement externe sous peine d'avoir de gros soucis avec son site Jimdo (impossibilité d'accéder au header, design...).

Étape 1: Créer une page HTML

La première chose à faire est de créer une page HTML de base. Pour cela créer un fichier texte avec le bloc-note de windows et renommez-le: "menu-jquery.html". Je vous recommande de bien faire attention à remplacer l'extension .txt par .html.

Ce fichier doit contenir le code suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Menu jQuery</title>
<!-- Contenu du header -->

<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript" src="jquery-1-3-2.js"></script>

<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#FirstLinkMenuJquery");
    maxWidth = 245;
    minWidth = 75;   

    $(".MenuJquery ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
    $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
    lastBlock = this;
      }
    );
});
</script>

</head>
<body>

<!-- Contenu du corp de la page -->

</body>
</html>

Étape 2: Créer une page CSS

Tout comme la création de la page HTML, il faut ensuite créer une page CSS en utilisant le bloc-note et en renommant la page "styles.css".
Cette page peut contenir le code suivant:

body{

background-color:white;
color:#666;
margin-left:10px;

}
.MenuJquery ul{

list-style:none;
font-family:Arial, sans-serif;
font-size:11px;
margin:0;
padding:0;

}
.MenuJquery ul li{

float:left;
padding:8px;
display:block;
margin-right:6px;
color:#f0cdcd;
background-color:red;

}
.MenuJquery ul li p strong{

color:black;
font-size:13px;
font-family:Georgia;

}
.MenuJquery ul li a{

display:block;
overflow:hidden;
height:75px;
width:75px;
text-decoration:none;
color:white;
cursor:pointer;

}
.MenuJquery #FirstLinkMenuJquery{

width:245px;

}
.MenuJquery ul li img{

z-index:100;
position:absolute;
border:3px solid white;

}
.MenuJquery ul li p{

margin:0;
padding:0;
width:155px;
display:block;
margin-left:85px;

}

Étape 3: Tout mettre dans le même dossier

Une fois les deux pages créées, il faut ensuite les mettre dans le même dossier pour éviter de se perdre par la suite. En ce qui me concerne, j'ai créé un dossier intitulé "menu-jquery" dans lequel il y a ma page HTML et ma page CSS. De plus, il faut commencer à planifier l'emplacement des images qui servent de vignettes à ce menu. En ce qui me concerne, j'ai ajouté à l'intérieur du dossier "menu-jquery" un autre dossier intitulé "img".

Étape 4: Créer les images

Le code CSS que je vous ai fournit est adapté pour des images de 69 pixels de haut et de large. Je vous recommande ainsi d'avoir vos vignettes à ce format ou alors d'adapter le code CSS à vos besoins.

Une fois vos vignettes créé, mettez les en place à l'intérieur du dossier "img" (lui-même placé à l'intérieur du dossier menu-jquery).

Étape 5: Récapitulatif des dossiers et fichiers

Voici le récapitulatif des dossiers, fichiers et images:

  • menu-jquery/
    • menu-jquery.html
    • styles.css
    • jquery-1-3-2.js
    • img/
      • image-1.jpg
      • image-2.jpg
      • image-3.jpg

Bien entendu, il vous est possible de renommer chacun de ces fichiers comme vous le souhaitez (en particulier pour les photos), mais assurez-vous de ne pas vous trompez en les renommants pour éviter les mini-bugs.

Attention: A noter que la bibliothèque jQuery téléchargée précédemment a été renommée et placée dans le dossier "menu-jquery".

Étape 6: Adapter le code dans l'HTML

Dans la page HTML, entre la balise <body> et </body> il faut insérer le code suivant:

<div class="MenuJquery">
<ul>
  <li><a
id="FirstLinkMenuJquery" href="http://www.google.fr/" target="_parent">
      <img
src="img/image-1.jpg" alt="vignette 1" />
      <p>
        <strong>
Titre 1</strong><br/>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      </p>
  </a></li>
  <li><a
href="http://www.infowebmaster.fr/" target="_parent">
       <img
src="img/image-2.jpg" alt="vignette 2" />
       <p>
         <strong>
Titre 2</strong><br/>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
       </p>
  </a></li>
  <li><a
href="http://funnycat.jimdo.com/" target="_parent">
      <img
src="img/image-3.jpg" alt="vignette 3" />
      <p>
        <strong>
Titre 3</strong><br/>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
      </p>
  </a></li>
</ul>
</div>

Bien évidemment, n'hésitez pas à personnaliser tout ce contenu (titre, lien, description ...

Étape 7: Mise en ligne

Une fois que tout vos fichiers sont prêt, vous pouvez les mettre en ligne sur votre service d'hébergement. Faites bien attention à l'endroit où il a été mis en ligne et essayez de récupérer l'adresse internet de votre menu.

En ce qui me concerne, mon menu est à l'URL suivante:

Étape 8: Mise en ligne sur Jimdo

Vous voici rendu à la dernière étape de ce tutoriel. Il faut se rendre sur votre site Jimdo et ajouter un nouvel élément de type "Widget/HTML" dans lequel vous devez-simplement copier/coller le code suivant:

<iframe src="http://www.infowebmaster.fr/demo/menu-jquery/menu-jquery-accordion.html" scrolling="no" width="500" height="120" frameborder="0"></iframe>

Sachant que tous les sites Jimdo sont suceptible d'utiliser un template différent, il faudrat surement adapter la largeur de cette frame en modifiant le paramètre "width" (actuellement égal à 500 pixels).

 

J'espère que ce tutorial vous plait et qu'il vous a été possible de le mettre en place.
Bon courage pour votre site Jimdo.