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>
