1 août 2010

Créer un menu horizontal informatif avec phatfusion

Superbe effet pour ce menu tout en images.

Cliquez sur le lien ci-dessous. Vous pouvez tester en survolant chaque image et en cliquant dessus : un message d'annonce s'ouvre

ImageMenu

1ère étape :

Allez sur Phatfusion

Cliquez sur imagemenu.zip

Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.

2ème étape :

Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11

Vous arrivez sur le site Mootools, où vous cliquez sur Download.

Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.

Vous recliquez sur Download.

Vous venez d'enregistrer le fichier mootools.js

3ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :
  •  vous créez un répertoire nommé Imagemenu :
    •  dans lequel vous créez un sous-répertoire nommé images
      • dans lequel vous enregistrez les images qui composeront votre diaporama
      • vous notez leur adresse
4ème étape :

Sur votre PC :
  • vous ouvrez votre Bloc-Notes
  • vous appelez le fichier imagesMenu.css
  • vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
  • vous enregistrez sous le même nom
5 ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - Imagemenu :
  • vous créez un sous-répertoire nommé : css
    • dans lequel vous enregistrez le fichier :
      • ImageMenu.css
  • vous créez un sous-répertoire nommé : js
    • dans lequel vous enregistrez les fichiers :
      • imageMenu.js
      • mootools-release-1.11.js
  • vous notez les adresses de ces 3 fichiers
6ème étape :

Lors de la conception de votre menu, vous collez en HTML
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/css/imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/imageMenu.js"></script>
Vous remplacez en rouge par les adresses de vos fichiers, vous les avez noté dans la 5ème étape

Vous collez ensuite, toujours en HTML, ce pavé qui représente vos photos
<div id="imageMenu">
            <ul>
 <li class="landscapes"><a href="http://annak.over-blog.com/article-11838672.html">Landscapes</a></li>
                <li class="people"><a href="http://annak.over-blog.com/article-19659105.html">People</a></li>
                <li class="nature"><a href="http://annak.over-blog.com/article-11346926.html">Nature</a></li>
                <li class="urban"><a href="http://annak.over-blog.com/article-10131710.html">Urban</a></li>
                <li class="abstract"><a href="http://annak.over-blog.com/article-19386214.html">Abstract</a></li>
            </ul>
  </div>
En bleu, les adresses de vos liens qui apparaîtront dans le message d'annonce.

Et toujours en HTML
<script type="text/javascript">
            window.addEvent('domready', function(){
                var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
            });
        </script>  

8 commentaires:

  1. Bonjour, génial ton blog
    Peut-on utiliser ce menu avec Blogger?
    encore merci pour toutes ces astuces.

    Mon blog : http://les-bons-plans-de-tonton-phil.blogspot.com/

    RépondreSupprimer
  2. Bonjour Phil :) Comme on peut utiliser du javascript sur Blogger, ce menu peut être installé.
    Malheureusement, tu ne pourras pas utiliser mes fichiers, je pense : problème de hotlink.
    Tu peux héberger les fichiers css et js sur Archivehost, c'est gratuit. Et les images dans ton administration Blogger.
    Une petite astuce : l'éditeur de Blogger va sans doute te refuser la ligne <link car elle ne se referme pas. Force le à accepter : il te le propose et ça marche.

    RépondreSupprimer
  3. Bonjour Annak,
    Saurais-tu comment adapter cette solution aux forums s'il te plait?

    RépondreSupprimer
  4. Bonjour Justine, je ne m'y connais pas trop en forums. Mais il me semble qu'ils n'utilisent pas les mêmes langages et qu'il n'est pas possible de mettre un module/widget avec du HTML et du javascript.

    RépondreSupprimer
  5. Bonjour, super menu et merci pour le tuto super efficace ! Juste une question, sur mon site, quand un visiteur clique sur l'une des photos, le lien activé ouvre une fenetre "annonce de la page http://www.objectifgard.com/" au lieu d'aller sur le bon article. j'espère que vous avez une solution ? Merci d'avance

    RépondreSupprimer
  6. Quelques caractères dans votre code sont faux.
    Ce menu n'affiche que les liens.
    Même si on respecte à la lettre ....
    ce qui fait perdre un temps précieux, non ?
    Curieux tout de même de laisser des codes qui ne fonctionnent pas puisque je l'avais déjà signalé dans un précédent commentaire.
    Donc, pardonnez-moi de réitérer :
    c'est une perche pour moi !
    mais une ficelle pour les amis !
    auxquels vous dénouez les liens (vos réponses).

    RépondreSupprimer
  7. Bonjour Sagan, il s'agit d'un menu horizontal informatif : il informe donc.
    Ce que tu cherches, c'est un menu orienteur qui oriente.

    RépondreSupprimer
  8. Bonjour Anna, informatif ou orienteur, c'est égal, ce menu est très attractif donc je ferai selon. Le problème c'est que en suivant tes instructions, en édition d'article, seules les puces s'affichent avec les noms de mes images qui remplacent les tiennes. Et ils semblent en liens (soulignés)alors qu'ils ne le sont pas. Mais pas les photos. Comme tu mentionnes j'ai remplacé les 5 adresses des images par les miennes en http/jpg. J'ai bien vu que celles de ton menu étaient des liens d'articles (html) ...donc informatif, mais si l'on reprend ton ancien code phatt fusion avec tes liens, en édition j'ai bien les 5 photos qui apparaissent. Si je remplace par les miens, il y a juste puces et liens.
    Si tu pouvais m'aider. Merci beaucoup par avance. Cordialement

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)