publié dans : Tous Blogs - Effets d'Ecriture et de Texte
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é.
Comme d'habitude, j'ai des difficultés à faire passer un programme javascript sur cette plateforme.
Je l'ai donc mis sur un page HTML séparée : Mon menu personnalisé
Première étape :
Allez sur DDmenu
Cliquez sur Download moo.ddmenu.0.21.js
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
Il vous faut 3 images de 16*16px pour mettre dans votre menu.
Dans votre Administration - Mes Documents - Autres Fichiers :
Sur votre PC :
Dans votre Administration - Mes Documents - Autres Fichiers - ddMenu :
En HTML, de votre entête, vous collez
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
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
Avec ce programme, vous obtenez votre propre menu personnalisé.
Comme d'habitude, j'ai des difficultés à faire passer un programme javascript sur cette plateforme.
Je l'ai donc mis sur un page HTML séparée : Mon menu personnalisé
Première étape :
Allez sur DDmenu
Cliquez sur Download moo.ddmenu.0.21.js
- Une page s'ouvre sur le contenu de moo.ddmenu.021.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
- Une page s'ouvre sur le contenu de ddmenu.css
- 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
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
Il vous faut 3 images de 16*16px pour mettre dans votre menu.
Dans votre Administration - 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
- dans lequel vous créez un sous-répertoire nommé images
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;}
.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;}
- enresgitrez le fichier sous le même nom
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
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>
<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>
<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>
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>
Commentaires