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

Dreamweaver
DW MX实例二:快速建立站点
DW MX实例三:巧用框架建立网站
DW MX实例四:嵌入式框架的妙用
DW MX实例五:模板构建和更新网站
DW MX实例:利用表格美化页面
DW MX实例:制作弹出菜单
DW MX实例:多彩文字链接
DW MX实例:个性化 IE 滚动条
DW MX实例:极酷的鼠标外观
DW MX实例:特色分隔线
DW MX实例:网站个性小图标
DW MX实例:构建Java插入模块
DW MX实例:图片应用技巧
DW MX实例:地图链接综合实例
DW MX实例:网页过渡特效
DW MX实例:实现全景图浏览
DW MX实例:插入Flash按钮与文本
DW MX实例:插入交替图像按钮
DW MX实例:添加透明背景的Flash
DW MX实例:Flash个性播放界面

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


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