当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 打造超酷网页右键菜单二法

Dreamweaver
用Dreamweaver设计限时自动关闭网页
DreamweaverMX制作导航下拉菜单
用Dreamweaver MX创造网页鼠标样式
巧用Dreamweaver MX制作阴影字
十六则Dreamweaver使用快技法
用Dreamweaver MX制作文字特效
妙用dw图层与表格进行网页布局
巧用Dreamweaver制作复杂图像
巧用Dreamweaver MX控制页面元素
用Dreamweaver实现飘浮光球特效
巧用Dreamweaver4文件库更新网站
用Dreamweaver4添加背景音乐及制作动态字
用Dreamweaver 4.0编制会议通知
妙用DreamweaverMX共享WPS Office文件
妙用Dreamweaver MX共享Word XP文件
巧用Dreamweaver MX共享Execl XP文件
用Dreamweaver MX制作导航下拉菜单
DreamweaverMX Ultradev探索:技巧荟萃
在网页中显示可拖动月历
Dreamweaver制作技巧四则

Dreamweaver 中的 打造超酷网页右键菜单二法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 43 ::
收藏到网摘: n/a

 

  在一般的网页中,IE浏览器的默认右键菜单是一成不变的固定模式,大部分网友浏览网页时对它的利用率不高。对专业的网页设计师来说,如果能将右键菜单设计成个性化的内容,样式该是多么的酷和方便。  
  试想一下,用户在你的网站上一点右键,就是你精心组织的“链接”、“发信”,甚至包含了缤纷的交互式Flash动画!如图1——别流口水了,下面咱们就解解馋,看看如何制作吧:)。

  右键菜单的改造,我有两种途径(其实,本质是一样的,都是JavaScript的东西)。

  第一种方法是较早的,把下列源代码复制到网页中HTML文件的中即可。

  < style>
  < !--
  .skin0 {
  position:absolute;
  text-align:left;
  width:200px;
  border:2px solid black;
  background-color:menu;
  font-family:Verdana;
  line-height:20px;
  cursor:default;
  visibility:hidden;
  }
  .skin1 {
  cursor:default;
  font:menutext;
  position:absolute;
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  width:120px;
  background-color:menu;
  border:1 solid buttonface;
  visibility:hidden;
  border:2 outset buttonhighlight;
  }
  .menuitems {
  padding-left:15px;
  padding-right:10px;
  }
  -->
  < /style>

  < SCRIPT LANGUAGE="JavaScript1.2">
  < !-- Web Site: http://www.painting-effects.co.uk -->

  < !-- This script and many more are available free online at -->
  < !-- The JavaScript Source!! http://javascript.internet.com -->

  < !-- Begin
  var menuskin = "skin1"; // skin0, or skin1
  var display_url = 0; // Show URLs in status bar?
  function showmenuie5() {
  var rightedge = document.body.clientWidth-event.clientX;
  var bottomedge = document.body.clientHeight-event.clientY;
  if (rightedge < ie5menu.offsetWidth)
  ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
  else
  ie5menu.style.left = document.body.scrollLeft + event.clientX;
  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";
  }
  function highlightie5() {
  if (event.srcElement.className == "menuitems") {
  event.srcElement.style.backgroundColor = "highlight";
  event.srcElement.style.color = "white";
  if (display_url)
  window.status = event.srcElement.url;
   }
  }
  function lowlightie5() {
  if (event.srcElement.className == "menuitems") {
  event.srcElement.style.backgroundColor = "";
  event.srcElement.style.color = "black";
  window.status = "";
   }
  }
  function jumptoie5() {
  if (event.srcElement.className == "menuitems") {
  if (event.srcElement.getAttribute("target") != null)
  window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
  else
  window.location = event.srcElement.url;
   }
  }
  // End -->
  < /script>
  < div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()"   onClick="jumptoie5();">
  < div class="menuitems" url="javascript:history.back();">返回< /div>
  < div class="menuitems" url="http://javacool.3322.net">回首页< /div>
  < hr>
  < div class="menuitems" url="http://www.163.com">网易< /div>
  < div class="menuitems" url="http://www.sohu.com">搜狐< /div>
  < hr>
  < div class="menuitems" url="http://www.sina.c"