Maison > interface Web > js tutoriel > Méthode JavaScript pour implémenter un menu contextuel caché en cliquant avec le bouton gauche n'importe où sur une page Web_javascript skills

Méthode JavaScript pour implémenter un menu contextuel caché en cliquant avec le bouton gauche n'importe où sur une page Web_javascript skills

WBOY
Libérer: 2016-05-16 15:59:32
original
1235 Les gens l'ont consulté

Cliquez avec le bouton gauche n'importe où sur la page Web et une fenêtre contextuelle apparaîtra. En fait, JS est utilisé pour contrôler l'affichage de la couche DIV. Il y a un tableau imbriqué dans la couche DIV et un menu est placé. dans le tableau. De cette façon, il est facile à modifier et ne nécessite pas de CSS. Ce n'est pas grave, vous pouvez le copier, l'ouvrir avec DW et re-modifier le style du menu selon votre couleur préférée

.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏菜单</title>
<style type="text/css">
body {
 font: 9pt;
}
.box {
 font: 9pt "宋体";
 position: absolute;
 background: skyblue;
}
</style>
</head>
<body>
<table cellpadding="5" id="itemopen" class="box" style="display:none">
 <tr>
  <td bgcolor="#0066cc">网站导航:</td>
 </tr>
<tr>
  <td><a href="/">AJAX实例</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">jQuery相关</a></td>
 </tr>
 <tr>
  <td><a href="/jscss/">ExtJS演示</a></td>
 </tr>
</table>
</center>
</div>
<script language="JavaScript">
document.onclick = popUp 
function popUp() {
newX = window.event.x + document.body.scrollLeft
newY = window.event.y + document.body.scrollTop
menu = document.all.itemopen
 if ( menu.style.display == ""){
  menu.style.display = "none" }
 else {
   menu.style.display = ""}
  menu.style.pixelLeft = newX - 50
  menu.style.pixelTop = newY - 50
}
</script>
<body>
<p align="center"><font size="3">点击左键看看?</p>
</body>
</html>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal