Affichez un menu de navigation par le bouton droit de la souris.
Etape 1 :Ajouter entre les balises <HEAD>...</HEAD>:
<style> #menu{ position:absolute; width:155px; border:3px solid navy; background-color:lightblue; font-family:Arial, Verdana; font-size: 9pt; line-height:18px; cursor:default; visibility:hidden; } .menuitems{ padding-left:5px; padding-right:5px; } </style> <script language="JavaScript1.2"> var display_url=1 function showmenu(){ var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY if (rightedge<menu.offsetWidth) menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth else menu.style.left=document.body.scrollLeft+event.clientX if (bottomedge<menu.offsetHeight) menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight else menu.style.top=document.body.scrollTop+event.clientY menu.style.visibility="visible" return false } function hidemenu(){ menu.style.visibility="hidden" } function over(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="yellow" if (display_url==1) window.status=event.srcElement.url } } function out(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="black" window.status='' } } function linkTo(){ if (event.srcElement.className=="menuitems") window.location=event.srcElement.url } </script>
On peut configurer la présentation de l'infobulle dans la partie <style> #menu{...
Etape 2 :Ajouter dans le body :
<!--[if IE 5]> <CENTER><B>Bouton droit pour ouvrir le menu - - Bouton gauche pour fermer le menu</B></CENTER> <![endif]--> <![if ! IE 5]> <center><b>Désolé, ce script nécessite Internet Explorer, Version 5+</b></center> <![endif]> <div id="menu" onMouseover="over()" onMouseout="out()" onClick="linkTo()"> <div class="menuitems" url="index.htm">Page d'accueil</div> <div class="menuitems" url="tbnew.html">Nouveautés du mois</div> <div class="menuitems" url="../search/search.htm">Recherche dans le site</div> <HR SIZE=1 NOSHADE> <div class="menuitems" url="auteur.htm">L'auteur</div> <div class="menuitems" url="meme.htm">Du même auteur</div> </div>
Vous pouvez adapter le texte selon vos souhaits.
Etape 3 :Ajouter à la fin de la page, juste avant </BODY>
<script language="JavaScript1.2"> document.oncontextmenu=showmenu if (document.all&&window.print) document.body.onclick=hidemenu </script>