9 août 2010

Créer un menu dans le clic droit de la souris

Normalement, si vous faîtes Clic droit de la souris sur votre blog, vous obtenez une fenêtre qui s'ouvre sur un menu de la sorte :



Avec ce programme, vous obtenez votre propre menu personnalisé.

Cliquez sur ce lien : Mon menu personnalisé puis sur le clic droit

Première étape :

Le site  DDmenu sur lequel j'avais trouvé ce programme est fermé. Je vous donne donc l'adresse de mes fichiers à copier :
Il vous suffit :
  • de mettre chacune de ces adresses dans la barre de navigation
  • de copier le contenu qui apparaît
  • d'ouvrir le bloc-note sur votre PC
  • de copier ce contenu
  • d'enregistrer sous le même nom les fichiers.
Deuxième étape :

Allez sur MooTools

Assurez-vous de bien télécharger une version Mootools inférieure à mootools 1.2 beta 2

Cliquez sur Download MooTools 1.2
  • Une page s'ouvre sur le contenu de mootools-1.2.js
  • Faîtes Edition - Tout Sélectionner
  • puis Edition - Copier
  • Ouvrez le bloc-Notes sur votre PC
  • Faîtes Edition - Copier
  • Sauvegardez sous le même nom
Troisème étape :

Il vous faut 3 images de 16*16px pour mettre dans votre menu.

Dans l'administration de votre blog - Mes Documents - Autres Fichiers :
  • vous créez un répertoire nommé ddMenu

    • dans lequel vous créez un sous-répertoire nommé images

      • dans lequel vous enregistrez vos 3 images
      • vous notez leur adresse
Quatrième étape :

Sur votre PC :
  • Ouvrez le Bloc-Notes
  • appelez le fichier ddMenu.css
  • modifiez les adresses des images : vous les avez noté lors de la troisième étape

 .ddmenu.def a.objects {padding-left: 24px; background: url(../images/objects-16x16x32b.png) 4px 50% no-repeat;}

 .ddmenu.def a.letter {padding-left: 24px;background: url(../images/text-16x16x32b.png) 4px 50%
no-repeat;}      

 .ddmenu.def a.umbrella {padding-left: 24px;background: url(../images/umbrella-16x16x32b.png) 4px 50% no-repeat;}
  • enregistrez le fichier sous le même nom
Cinquième étape :

Dans votre Administration - Mes Documents - Autres Fichiers - ddMenu :
  • vous créez un autre sous-répertoire nommé css

    • dans lequel vous enregistrez ddMenu.css
    • vous notez son adresse
  • vous créez un troisième sous-répertoire nommé js

    • dans lequel vous enregistrez les fichiers moo.ddmenu.021.js et mootools-1.2.js
    • vous notez leur adresse
Sixième étape :

En HTML, de votre entête, vous collez
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/css/ddmenu.css" type="text/css" media="screen" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/mootools-1.2.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/moo.ddmenu.0.21.js" type="text/javascript"></script>
en personnalisant les adresses des fichiers en rouge : vous les avez noté à la cinquième étape

Toujours en HTML de votre entête, vous collez
<body onload="iniz()">
<div class="ddmenu def" id="ddmenu2" style="display:none">
<ul>
<li class="title">Menu Title</li>
<li class="item" id="menu_item1"><a href="http://annak.over-blog.com/article-4719536.html">Top
Liste
</a></li>
<li class="item" id="menu_item2"><a href="http://annak.over-blog.com/article-4717928.html">Plugboard</a></li>
<li class="item" id="menu_big_item"><a href="http://annak.over-blog.com/article-14754421.html">PlugScroll</a></li>
<li class="sepline"></li>
<li class="item" id="menu_item_with_icon1"><a class="objects" href="http://annak.forumparfait.com/portal.php">Forum</a></li>
<li class="item" id="menu_item_with_icon2"><a class="letter" href="http://decoannak.over-blog.fr">La déco d'Anna K.</a></li>
<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="http://ann.over-blog.com/blog-contact.php?ref=371767">Contact</a></li>
<li class="sepline"></li>
<li class="item" id="menu_spec_links"><a href="http://ann.over-blog.com/recommander.php?ref=371767">Recommander</a></li>
<li class="item" id="menu_spec_texts"><a href="http://ann.over-blog.com/blog-newsletter.php?ref=371767">Newsletter</a></li>
<li class="item" id="menu_spec_images"><a href="http://annak.over-blog.com/articles-blog.html">Publication</a></li>
</ul>
</div>
</body>
En personnalisant les URL en bleu et ce qui apparaît dans le menu en vert

Et pour finir, à la suite, toujours en HTML, vous collez
<script>
function iniz () {
    pagemenu = new DDMenu ('ddmenu2', document, {            //document can be the whole page,                                                      
//an element or a parent of elements
        onOpen: function (e) {        
this.enableItems(true);                          //enable all
            this.enableItems('menu_item_with_icon2',false);  //disable menu_item_with_icon2
        },
        onItemSelect: function (act_id, act_el, menu_bindon) {
            console.info("menu action -> item id: "%s" from: %o in %o", act_id, act_el, menu_bindon)
        }
    });
}
</script>

5 commentaires:

  1. si je peux me permettre une remarque, afin d'éviter aux lecteurs de chercher dans la source, je pense que tu devrais mettre en lien l'url de ton mootols hébergé (celui utilisé pour ta page démo) , le lien donné à l'étape 2 débouche sur une 404 et pas trouvé la version requise chez mootools ^^

    Bon vais essayer de bidouiller un truc sur cette base...^^

    RépondreSupprimer
  2. pff j'ai survolé trop vite,tu le donnes en 6...

    RépondreSupprimer
  3. Bonjour Booba :) oui je donne en général, sauf oubli, l'adresse de mes propres fichiers, qui sont donc utilisables sans vergogne :p

    RépondreSupprimer
  4. salut Annak, merci pour ces tutos, j'ai un petit souci sur ce tutos, impossible de trouver un mootools inferieur a la version 1.2 beta 2.

    RépondreSupprimer
  5. Bonjour Messi69 :)
    Le plus simple est d'utiliser mes fichiers :
    http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/css/ddmenu.css
    http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/mootools-1.2.js
    http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/moo.ddmenu.0.21.js
    Ils sont hébergés sur OverBlog comme ton blog, tu ne devrais pas avoir de problème.

    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)