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 :
- moo.ddmenu.0.21.js : http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/moo.ddmenu.0.21.js
- ddmenu.css : http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/css/ddmenu.css
- 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.
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 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
- dans lequel vous enregistrez vos 3 images
- 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;}
- enregistrez 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
- dans lequel vous enregistrez ddMenu.css
- 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
- dans lequel vous enregistrez les fichiers moo.ddmenu.021.js et mootools-1.2.js
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" />en personnalisant les adresses des fichiers en rouge : vous les avez noté à la cinquième étape
<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>
Toujours en HTML de votre entête, vous collez
<body onload="iniz()">En personnalisant les URL en bleu et ce qui apparaît dans le menu en vert
<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>
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>
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 ^^
RépondreSupprimerBon vais essayer de bidouiller un truc sur cette base...^^
pff j'ai survolé trop vite,tu le donnes en 6...
RépondreSupprimerBonjour Booba :) oui je donne en général, sauf oubli, l'adresse de mes propres fichiers, qui sont donc utilisables sans vergogne :p
RépondreSupprimersalut 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épondreSupprimerBonjour Messi69 :)
RépondreSupprimerLe 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.