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 :

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 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;}
  • 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>
Voir les 5 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Commentaires

Petit coucou du soir après une journée bien remplie ! ! ! ! Je me prépare à partir au Caire dimanche pour quelques jours ! ! Des articles sont programmés pendant mon absence ! Bonne soirée et bisous du pays de Râ @nne marie
Commentaire n° 1 posté par soleil51 le 20/06/2008 à 19h35
C' est mignon comme tout :)
Commentaire n° 2 posté par clo le 21/06/2008 à 12h58
Remarque : Les liens ne sont cliquable ! Quand je clic sur "Top Liste" rien ne se passe.
Commentaire n° 3 posté par Lucifer le 14/01/2009 à 23h07
J'ai compris le problème (mais je dois trouver une solution), lors d'un clic gauche, la fonction iniz() met en display:none le div#ddmenu2 sans prendre en compte le clic sur le lien. Quelqu'un a une solution ? (Je n'y connais rien en javascript moi -__- ) Thanks
Commentaire n° 4 posté par Lucifer le 15/01/2009 à 13h26
il doit y avoir un return false quelquepart dans une des focntions...
Commentaire n° 5 posté par Anonyme le 15/01/2009 à 22h24
Ecrire un commentaire

 

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

Sommaires Pour les Blogs OverBlog Sommaires Pour tous les Blogs Détente

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

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