Dans les pages Web générales, le menu contextuel par défaut du navigateur IE est un mode fixe immuable, et la plupart des internautes n'en font pas un grand usage lors de la navigation sur les pages Web. Pour les concepteurs de sites Web professionnels, ce serait vraiment cool et pratique si le menu contextuel pouvait être conçu avec un contenu personnalisé.
Imaginez, lorsqu'un utilisateur clique avec le bouton droit sur votre site Web, vous verrez vos « liens » et vos « envois de messages » soigneusement organisés, qui incluent même des animations Flash interactives colorées ! Comme le montre la figure 1 : ne bave pas, étancheons ta soif et voyons comment y parvenir :).
J'ai deux façons de transformer le menu contextuel (en fait, l'essence est la même, les deux sont des éléments JavaScript).
La première méthode est antérieure, copiez simplement le code source suivant dans le fichier HTML de la page Web.
<style>
< !--
.skin0 {
position : absolue ;
texte-align:gauche;
largeur : 200 px ;
bordure : 2 px, noir uni ;
couleur d'arrière-plan: menu ;
famille de polices : Verdana ;
hauteur de ligne : 20 px ;
curseur : par défaut ;
visibilité : masquée ;
}
.peau1 {
curseur : par défaut ;
police:menutexte;
position : absolue ;
texte-align:gauche;
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 10 pt ;
largeur : 120 px ;
couleur d'arrière-plan: menu ;
bordure : 1 bouton pleine ;
visibilité : masquée ;
bordure : 2 boutons de démarrage en surbrillance ;
}
.menuitems {
remplissage-gauche : 15px ;
remplissage à droite : 10 px ;
}
-->
</style>
< LANGUE DE SCRIPT="JavaScript1.2">
< !-- Site Web : http://www.painting-effects.co.uk -->
< !-- Ce script et bien d'autres sont disponibles gratuitement en ligne sur -->
< !-- La source JavaScript http://javascript.internet.com -->
< !-- Commencer
var menuskin = "skin1" ; // skin0 ou skin1
var display_url = 0; // Afficher les URL dans la barre d'état ?
fonction showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
si (bord droit < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
autre
ie5menu.style.left = document.body.scrollLeft + event.clientX ;
if (bord inférieur < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
autre
ie5menu.style.top = document.body.scrollTop + event.clientY ;
ie5menu.style.visibility = "visible";
renvoie faux ;
}
function hidemenuie5() {
ie5menu.style.visibility = "caché" ;
}
fonction highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "surligner";
event.srcElement.style.color = "blanc";
si (display_url)
window.status = event.srcElement.url;
}
}
fonction lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "noir";
fenêtre.status = "" ;
}
}
fonction jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
autre
window.location = event.srcElement.url;
}
}
// Fin -->
</script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Retour</div>
< div class="menuitems" url=" http://javacool.3322.net ">Retour à la page d'accueil</div>
<hr>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<hr>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<langage de script="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
L'effet est le suivant :
La deuxième méthode consiste à utiliser un plug-in pour Dreamweaver - Right_Click_Menu_Buil-der, qui peut être téléchargé depuis http://www.macromedia.com . Après l'installation, la commande "Right Click Menu Builder" se trouve dans le menu "Command" de Dreamweaver.
Cliquez sur cette commande et une boîte de paramètres comme indiqué dans la figure 3 apparaîtra. Il y a principalement deux parties : « Menu » et « Styles ».
Le menu sert à définir les fonctions. Les hyperliens et les liens d'envoi sont définis ici. Jusqu'à 10 connexions peuvent être définies ici. « Texte du menu » dans cette zone de sélection est le texte qui sera affiché lorsque vous cliquez avec le bouton droit (changez-le en chinois) ; écrivez le chemin du lien correspondant dans « URL » ; « Cible » détermine s'il s'agit d'une nouvelle fenêtre ou de la fenêtre actuelle ; La fenêtre est utilisée pour l'affichage. Le contenu du lien sera affiché dans une nouvelle fenêtre en remplissant "Vide", ce qui est le même que le paramètre "Cible" de Dreamweaver.
Styles est responsable de la définition de l’apparence du menu. Il existe deux options :
img src=" "Menu de type Windows (par défaut)" est l'élément par défaut - l'apparence la plus simple, le style Windows familier ;
« Menu personnalisé » Menu personnalisé, si vous sélectionnez cet élément, vous devez également définir le contenu suivant :
« Largeur du menu », la largeur du menu ;
"Police", police ;
"Couleur de police", couleur de police ;
« Côté police », taille de la police ;
« Couleur d'arrière-plan », « Image d'arrière-plan », couleur d'arrière-plan et image d'arrière-plan ;
Il existe également un "Curseur", qui permet de sélectionner le style de la souris.
Après avoir défini ce qui précède, vous pouvez cliquer sur « Ajouter » pour générer l'effet. Prévisualisez-le, c'est bon ?
Alors comment ajouter Flash ? Voici comment procéder : Ajoutez un « Tableau » à la page web Il est recommandé que sa largeur « W » soit réglée à : « 100% ». Cela facilitera le positionnement des différents éléments que vous ajouterez ci-dessous. D'accord, insérez le fichier Flash SWF dans le "Tableau" et définissez la position sur "Centre" (principalement pour faciliter le positionnement, bien sûr, vous pouvez analyser les problèmes spécifiques en détail et vous obtiendrez des informations en essayant davantage).
Astuce : L'animation Flash pourrait tout aussi bien être réalisée avec des liens interactifs. Pourquoi ? De cette façon, vous pouvez ajouter autant d’hyperliens que vous le souhaitez. Le plug-in lui-même est limité à 10 éléments, qui peuvent être résolus en utilisant Flash ^_^ !