`

CSS+JavaScript创建右击菜单

阅读更多
效果图:



<%@ page language="java" pageEncoding="GBK" %>

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>css和javascript创建页面右键菜单</title>

<style type="text/css">

body {

    font-family: "宋体";

    font-size: 12px;

}

 

.skin0 {

    padding-top: 4px;

    text-align: left;

    width: 100px;

    border: 2px solid black;

    background-color: menu;

    font-family: "宋体";

    line-height: 20px;

    cursor: default;

    visibility: hidden;

}

 

.skin1 {

    padding-top: 4px;

    cursor: default;

    font: menutext;

    text-align: left;

    font-family: "宋体";

    font-size: 10pt;

    width: 100px;

    background-color: menu;

    border: 1 solid buttonface;

    visibility: hidden;

    border: 2 outset buttonhighlight;

}

 

</style>

 

 

<script language='javascript'> 

function load1(){

    if (document.all && window.print) {

       document.oncontextmenu = showmenuie5;

       document.onclick = hidemenuie5;

    }

}

 

function showmenuie5() {

  //获取当前鼠标右键按下后的位置,据此定义菜单显示的位置

  var rightedge = document.body.clientWidth-event.clientX;

  var bottomedge = document.body.clientHeight-event.clientY;

 

 //如果从鼠标位置到窗口右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当//前鼠标位置向左一个菜单宽度

  if (rightedge <ie5menu.offsetWidth)

  ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;

   else     //否则,就定位菜单的左坐标为当前鼠标位置

   ie5menu.style.left = document.body.scrollLeft + event.clientX;

 

  //*如果从鼠标位置到窗口下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度

   if (bottomedge <ie5menu.offsetHeight)

    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;

else

ie5menu.style.top = document.body.scrollTop + event.clientY;

 

//设置菜单可见

ie5menu.style.visibility = "visible";

return false;

} 

 

 function hidemenuie5() {

  ie5menu.style.visibility = "hidden";

} 

 

//jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项

function jumptoie5() {

if (event.srcElement.getAttribute("target") != null)

window.open(event.srcElement.url, event.srcElement.getAttribute("target"));

else

 

window.location = event.srcElement.url;

} 

 

load1()

</script>

</head>

 

<body>

 右键菜单创建测试效果吧!
<div id="ie5menu" class="skin0">

<div  onclick="alert('后退请三思!)">后退</div>

<div  onclick="alert('祝你前程似锦,大胆往前走吧!')">前进</div>

<hr>

<div url="http://homepage.yesky.com" target="_blank" onclick="jumptoie5()">网页淘吧</div>

<div url="http://www.bewww.net/" target="_blank" onclick="jumptoie5()">速查手册</div>

<div url="http://wiki.mapbar.com/wiki2_0/edit.jsp?gid=1876" target="_blank" onclick="jumptoie5()">淘吧地图</div>

<div url="http://news.sohu.com/20081123/n260795459.shtml" target="_blank" onclick="jumptoie5()">征稿启事</div>

<hr>

<div url="http://soft.yesky.com" target="_blank" onclick="jumptoie5()">天极软件</div>

<div url="http://www.mydown.com/soft/" target="_blank" onclick="jumptoie5()">天极网站</div>

<hr>

<div url="http://liutao-2006-126-com.iteye.com" target="_blank" onclick="jumptoie5()">关于本站</div>

<div url="mailto:liutao_2006@126.com" onclick="jumptoie5()">联系我</div>

</div>  
</body>
</html>

代码解释:

1、 在页面载入时,先执行load1()方法

   首先检验是不是IE浏览器,如果当前浏览器是Internet Explorer,document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5,当用户产生左键事件时就调用函数hidemenuie5。



2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。

当然,这里的菜单并不是真正意义的右键菜单,而是我们自己做的一个div,在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐,这就达到了使用鼠标右键一样的效果了。

  这一块的最外层是一个id为ie5menu的div,我们定义了它的样式为skin0,你也可以根据自定义其他样式,然后替换skin0。

3、点击菜单选项后的操作

jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项
  • 大小: 16.3 KB
分享到:
评论

相关推荐

    javascript右击菜单

    JavaScript右击菜单是一种常见的网页交互功能,它允许用户在网页上的任意位置右键点击时弹出自定义的上下文菜单,而不是浏览器默认的菜单。这种技术主要基于JavaScript语言实现,通常结合HTML和CSS来设计菜单的结构...

    JavaScript CSS创建右击菜单效果代码

    ### JavaScript与CSS创建右击菜单效果详解 #### 一、引言 在Web开发中,为用户提供更加丰富的交互体验是一项重要的任务。右击菜单作为一项常见的功能,不仅可以增强用户体验,还可以提供更多的操作选项。本文将...

    JS 实现右击菜单

    在JavaScript和jQuery的世界里,实现一个右击菜单是一项常见的任务,它可以增强网页的交互性和用户体验。右击菜单,也称为上下文菜单,通常在用户鼠标右键点击时出现,提供与当前上下文相关的操作选项。下面我们将...

    html+css+js仿windows桌面、windows窗口

    和windows系统操作方法一样,如双击图标打开窗口,不用的窗口最小化到状态蓝,右击桌面图标可打开右键菜单。开始菜单中附件---游戏中有常见游戏。有适用万年历和设置壁纸功能。壁纸设置和windows设置壁纸一样。 你还...

    精美 右击菜单 Div

    总结,创建“精美右击菜单Div”涉及HTML结构、CSS样式以及JavaScript交互的综合运用,通过巧妙地组合这些技术,我们可以为用户提供一种直观且易于使用的交互方式,提升网站或应用程序的用户体验。

    HTML+javaScript右键菜单

    在右键菜单的场景中,JavaScript用于监听鼠标右键点击事件,当用户在页面上右击时,会触发预设的函数,弹出自定义的菜单。JavaScript还可以处理菜单的显示、隐藏、事件响应等功能,如点击菜单项时执行相应的操作。 ...

    JS鼠标右击弹出菜单效果

    在网页开发中,JavaScript(JS)常常用于实现各种交互效果,其中包括鼠标右击时弹出自定义菜单。这种效果能够增强用户体验,使用户在浏览网页时可以快速访问或执行特定的功能。本文将深入探讨如何使用JavaScript来...

    WEB网页上实现右击功能,制作网页右键弹出菜单,右击网页弹出菜单.zip

    "WEB网页上实现右击功能,制作网页右键弹出菜单,右击网页弹出菜单.zip"这个压缩包文件内容可能包含了一个关于如何在网页上创建自定义右键弹出菜单的教程或示例代码。下面我们将详细探讨这一主题。 首先,我们要了解...

    Openlayers扩展右键菜单

    3. **创建菜单**:菜单可以通过HTML和CSS构建,然后使用JavaScript动态添加到DOM中。可以使用弹出框(`popup`)或者浮动元素(`div`)来实现。菜单项可以是链接或按钮,每个都绑定到一个处理函数。 4. **样式覆盖**...

    js各种右键菜单控件

    这通常涉及到事件监听(如`contextmenu`事件)、DOM操作(创建和插入菜单元素)以及CSS样式设置等技术。 接下来,让我们探讨一下如何使用JavaScript实现右键菜单: 1. **事件监听**:首先,我们需要监听`...

    特定区域内右键菜单导航

    综上所述,"特定区域内右键菜单导航"是一项增强用户交互体验的技术,它结合了HTML、CSS和JavaScript的特性,提供了个性化的操作入口,使得用户能更高效地与应用程序进行交互。通过理解和应用这些技术,开发者可以...

    树状菜单控件

    创建一个基本的JavaScript树状菜单,我们需要考虑以下几个关键点: 1. 数据结构:首先,我们需要定义一个数据模型来存储树的结构。这通常是一个JSON对象或数组,其中包含节点的文本、ID、子节点等信息。 2. 渲染...

    Bootstrap鼠标右键下拉菜单特效.zip

    Bootstrap鼠标右键下拉菜单特效是一种常见的网页交互设计,它利用JavaScript和Bootstrap框架来实现用户在鼠标右键点击时出现的下拉菜单。这个压缩包文件包含了一个完整的示例,帮助开发者了解如何在自己的项目中集成...

    右击弹出框菜单纯js.rar

    然而,开发者可以通过JavaScript来定制这个行为,创建自定义的右键弹出菜单,提供与应用相关的功能。这样做可以让用户体验更加一致且符合应用需求。 接下来是"模仿select下拉菜单"。在HTML中,`&lt;select&gt;`元素用于...

    JQUERY 右键菜单操作

    本篇将详细介绍如何利用jQuery来创建和操作右键菜单。 首先,`ContextMenu`是一个用于响应鼠标右键点击事件的功能,通常会显示一个弹出式菜单,包含一组可选操作。通过jQuery,我们可以便捷地绑定事件监听器,监听...

    一款漂亮旋转菜单网页特效

    本篇将深入探讨“一款漂亮旋转菜单网页特效”,该特效利用了CSS3的强大功能,为用户提供了一种新颖、动态的导航体验。 首先,我们来解析这个“圆形菜单”特效的核心概念。圆形菜单是一种非传统的布局方式,它以圆形...

    jQuery左侧垂直四级导航菜单特效.zip

    CSS3引入了许多新特性,如过渡(Transitions)、动画(Animations)和边框半径(Border Radius),这些都可以用来实现平滑的菜单展开和收缩效果,以及创建现代感的界面设计。 3. **字体图标**:在描述中提到,该...

    echarts右键菜单实例 --- 不修改源码

    这通常涉及到CSS样式的设计以及DOM元素的创建。可以使用 `event.preventDefault()` 阻止默认菜单,然后创建一个包含多个菜单项的HTML元素。 ```javascript myChart.on('contextmenu', function(params) { event....

    一个简单的 JS .net treeview右键菜单

    - 创建一个隐藏的`&lt;ul&gt;`元素作为右键菜单的基础结构,每个菜单项都是`&lt;li&gt;`元素,可包含链接或其他交互元素。 - 使用CSS定位这些元素,确保它们在触发右键点击的位置正确显示。 4. **JavaScript 逻辑** - 注册`...

Global site tag (gtag.js) - Google Analytics