Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Apparitions / Disparitions

  Faire apparaître un menu contextuel système

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de faire apparaître un menu contextuel ressemblant à un véritable menu système lorsque l'utilisateur clique n'importe où sur la page.

Merci a vwalas pour ce script.
  Principe
On créé un ensemble de calques (layers) représentant le menu, avec les liens nécessaires. Ce calque est déclaré invisible au départ. Il ne sera visible que sur un 'clic-droit', n'importe où sur la page.
Pour cela, il convient de surveiller tout clic ou clic-droit sur la page (le clic-droit fait apparaître le menu, le gauche le fait disparaître).
De plus, on placera le menu à côté du pointeur de la souris (grâce aux coordonnées X et Y du clic).
  Le script
dans la partie <head>
<script language="JavaScript">
function affiche_menu() {

// Détection de la position du clic (distance au bords droit et bas)
var droite = document.body.clientWidth - event.clientX;
var bas = document.body.clientHeight - event.clientY;

// Si il n'y a pas la place à droite pour placer le menu
if ( droite < menu.offsetWidth ) {

// On place le menu à gauche de la souris
menu.style.left = document.body.scrollLeft + event.clientX - menu.offsetWidth;
}

// Sinon, on le place à droite de la souris
else {
menu.style.left = document.body.scrollLeft + event.clientX;
}

// Pareil vis-à-vis du bas de l'ecran
if ( bas < menu.offsetHeight ) {
menu.style.top = document.body.scrollTop + event.clientY - menu.offsetHeight;
}
else {
menu.style.top = document.body.scrollTop + event.clientY;
}

// Affichage proprement dit du menu
menu.style.visibility = "visible";
return false;
}


// Masquage du menu
function masque_menu() {
menu.style.visibility = "hidden";
}


// Surlignage des intitulés (position 'on')
function surlignage() {
if ( event.srcElement.className == "intitules" ) {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
}
}


// Remise à l'état normal des intitulés (position 'off')
function normal() {
if ( event.srcElement.className == "intitules" ) {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
}
}


// Chargement des liens
function aller() {
if ( event.srcElement.className == "intitules" ) {

// Vérification de la fenêtre cible pour le lien (nouvelle fenêtre...)
if ( event.srcElement.getAttribute("target") != null ) {
window.open(event.srcElement.url,event.srcElement.getAttribute("target"));
}
else {
window.location = event.srcElement.url;
}
}
}
</script>

<style>
.fond {
position: absolute;
width: 200px;
visibility: hidden;
border: 2px;
border-bottom-style : inset;
border-right-style : inset;
border-left-style : outset;
border-top-style : outset;
background-color: menu;
font-family: Tahoma;
line-height: 20px;
font-size: 13px;
}

.intitules { padding-left: 15px; padding-right: 10px; }
</style>

dans la partie <body>
<!-- Placez de préférence ceci au début de votre page -->
<div id="menu" class="fond" onmouseover="surlignage()" onmouseout="normal()" onclick="aller()">
<div class="intitules" url="javascript:history.go(-1)">Précédent</div>
<div class="intitules" url="javascript:history.go(1)">Suivant</div>
<div class="intitules" url="javascript:history.go(0)">Actualiser</div>
<div class="intitules" url="javascript:window.print()">Imprimer</div>
<hr>
<div class="intitules" url="http://www.biblioscript.com/">Biblioscript</div>
</div>

<script language="javascript">
<!-- Lancement de la détection des clics uniquement pour Internet Explorer -->
if ( document.all) {

// Sur clic-droit, affichage
document.oncontextmenu = affiche_menu;

// Sur clic gauche, masquage
document.body.onclick = masque_menu;
}
</script>
  Démonstration
Faîtes un 'clic-droit' n'importe où sur cette page...
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    app_menu_syst.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    app_menu_syst2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter