.menucontextuel{
position: absolute;
display: none;
}
A la fin de vos pages HTML vous devez vous assurer que les lignes suivantes soient présentes afin que le menu contextuel de vos navigateurs ne s'affiche pas par dessus les votres :
<script type="text/javascript">
// <![CDATA[
document.body.oncontextmenu = function(){return false;}
// ]]>
</script>
Vous devez ajouter la propriété suivante à votre balise body :
<body onmouseup="menuContextuel(event, '');">
Construisez ensuite vos menus contextuels en leur appliquant la classe CSS menucontextuel :
<div id="menucontextuel1" class="menucontextuel">
<ul>
<li><em>Menu 1</em></li>
<li><a href="http://blog.oli-web.com">oli web, le blog !</a></li>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Hello World
!</a></li>
<li><a href="">Recharger</a></li>
</ul>
</div>
<div id="menucontextuel2" class="menucontextuel">
<ul>
<li><em>Menu 2</em></li>
<li><a href="">Recharger</a>
<li><a href="" onclick="hideMenu(); alert('Hello World !'); return false;">Hello World
!</a></li>
<li><a href="http://blog.oli-web.com">oli web, le blog !</a></li>
</ul>
</div>
Enfin pour appliquer un menu contextuel vous devez simplement ajouter ce code aux balises souhaitées :
<div class="box" id="box1" onmousedown="menuContextuel(event,
'menucontextuel1');"></div>
Le premier argument de la fonction menuContextuel sera toujours event, le second dépendra de l'id que vous avez donné à votre menu contextuel, ici menucontextuel1.
Le script au format ZIP.
Ce script a été testé sous Firefox 1.5 et Internet Explorer 6.
Source
Programme TV
0 commentaires :
Enregistrer un commentaire