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

Dreamweaver
Dreamweaver打造多彩文字链接
Dreamweaver基础技巧全面接触
Dreamweaver MX 2004从零开始(4)
Dreamweaver MX 2004设计留言本实战
Dreamweaver MX 2004从零开始(5)
Dreamweaver MX 2004从零开始(6)
Dreamweaver MX 2004从零开始(7)
Dreamweaver MX 2004 打造细线表格
在DW中插入Flash的参数详解
用Dreamweaver MX建设神奇网页图片超链接
Dreamweaver中实现flash的透明背景
DreamweaverMX打造留言本(二)
DreamweaverMX打造留言本(三)
DreamweaverMX打造留言本(四)
DreamweaverMX打造留言本(五)
Dreamweaver MX技巧汇粹
DreamwaverMX与ASP.NET(一)
DreamwaverMX与ASP.NET(二)
DreamwaverMX与ASP.NET(三)
DreamwaverMX与ASP.NET(四)

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


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