Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

publié dans : Liens, listes, menus, curseurs - Tous blogs

Personnaliser le menu du clic droit de la souris - Privilège

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
  • 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
Cliquez sur Download ddmenu.css.
  • 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
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 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
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;}
  • enresgitrez 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>
commentaires (2)    ajouter un commentaire
Retour à l'accueil

Publicité

 

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

 

Recherche Rapide Sur le Site

 

Sommaires

 

Déco d'Hiver

 

Hiver - Neige sur le blog
Hiver - Mettre une congère

 

Déco de Noël

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus