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

Dreamweaver
Dreamweaver MX进阶教程(十八)使用css样式制作细线表格
Dreamweaver MX进阶教程(二十二)制作反馈表单(email发送)
Dreamweaver MX进阶教程(二十)使用一象素透明图像固定单元格宽度
Dreamweaver MX进阶教程(十一)使用“层”布局网页
Dreamweaver MX进阶教程(十四)使用server-side include(服务器端包括)
Dreamweaver MX进阶教程(十五)插入具有辅助功能的表格
Dreamweaver MX进阶教程(十九)防止英文字符撑破表格
Dreamweaver MX进阶教程(十七)设置表格的属性
Dreamweaver MX进阶教程(十二)在居中页面使用层
DW MX 设计留言本实战(1)
DW MX 设计留言本实战(4)
DreamWeaver,经典50问(9)
DreamWeaver,经典50问(8)
DreamWeaver,经典50问(7)
DreamWeaver,经典50问(3)
DreamWeaver,经典50问(10)
DreamWeaver,经典50问(4)
DreamWeaver,经典50问(6)
巧用背景颜色和间距快速制作出细边线表格
DW MX 2004代码编辑新功能

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 32 ::
收藏到网摘: 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"