快速制作微软风格下拉菜单

转载 2004年08月04日 19:52:00

本文转载自:http://www.5d.cn/rudolf/web/web-navi1-0.htm

网页制作中有一种技术,叫作源代码修改型,也就是将一些高手现成编制好的Javascript源代码进行一些修改,然后复制/粘贴到你的网页中。下文就是一个典型的例子。您甚至不需要知晓该语言,只要您知道一些HTML语言规范,就能快速创建自己又酷又炫的网页特效。

说起网页上的下拉菜单,最最经典的就是微软风格的下拉菜单。凡是去过www.microsoft.com网站的看官都对这个简洁明快的下拉菜单垂涎不已。然而无奈的是复杂的代码让人望而生畏,记得论坛上经常有人询问这种菜单怎么做。现在我们就来介绍这个菜单如何制作。我们使用smartmenu。它可以制作一个始终浮动在屏幕顶端的下拉菜单。

  源代码名称:Smart Menu (跨浏览器版)
  作者:Constantin Kuznetsov Jr. 
  类型:外部js文件
  效果:http://www.5dmedia.com/rudolf/web/web-navi1-0.htm
  制作方法:菜单源文件下载

  第一步:将下列代码复制到网页的<HEAD></ HEAD>标签之间。
  <style>
  <!--
  all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
  .clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
  A:hover {color: red;}
  -->
  </style>

  第二步: 将下面的代码复制到<body>标签的右边,位置紧挨着<body>标签 :
  <script language="JavaScript" src="menu.js">
  /*
  Static Top Menu Script
  By Constantin Kuznetsov Jr. (GoldenFox@bigfoot.com) 
  Featured on Dynamicdrive.com
  For full source code and installation instructions to this script, visit Dynamicdrive.com
  */
  </script>
  <script language="JavaScript" src="menucontext.js"></script>
  <script language="JavaScript">
  showToolbar();
  </script>
  <script language="JavaScript">
  function UpdateIt(){
  if (document.all){
  document.all["MainTable"].style.top = document.body.scrollTop;
  setTimeout("UpdateIt()", 200);
  }
  }
  UpdateIt();
  </script>

  第三步:添加菜单的内容。编辑menucontext.js文件,所有的菜单选项都在这里设置。默认的menucontext.js里面的内容,比较复杂我现在把代码精简出来。给大家做一个说明。整个代码如下:
  function showToolbar()
  {
  // AddItem(id, text, hint, location, alternativeLocation);
  // AddSubItem(idParent, text, hint, location); 
  //主菜单定义
  menu = new Menu();
  menu.addItem("multimedia", "多媒体", "多媒体软件", null, null);
  menu.addItem("image", "图像处理", "图像处理软件", null, null);

  //多媒体子菜单定义
  menu.addSubItem("multimedia", "Macromedia公司", "Macromedia公司", "http://www.macromedia.com");
  menu.addSubItem("multimedia", "5D多媒体", "5D多媒体", "http://www.5dmedia.com");

  //图像处理子菜单定义
  menu.addSubItem("image", "Adobe公司", "Adobe公司", "http://www.adobe.com");
  menu.addSubItem("image", "Corel公司", "Corel公司", "http://www.corel.com");
  menu.addSubItem("image", "Metacreation公司", "Metacreation公司", "http://www.metacreations.com");

  //结束菜单定义
  menu.showMenu();
  }

  上面的例子中制作的是一个有两个主菜单的菜单。一个主菜单为多媒体,一个主菜单为图像处理。主要靠两个命令来制作Additem为添加主菜单项目。格式为AddItem(菜单标记, 文本说明, 文本提示, 位置,替换位置)。AddSubItem为添加子菜单项目,idparent为主菜单的菜单标记,其余同前。

到这里还不算完。我们现在要继续完成菜单文件的上传和修改。

  第四步:上传菜单文件。
  将 menu.js和menucontext.js文件上传到和网页文件同一目录下。这样就完成了所有的操作。

  菜单安装的一些善后工作:
  安装了菜单之后如果需要将菜单完全和网页顶部和左边紧密结合。需要把<body>标签修改成为<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">。
  或许大家也许会对菜单的文字感到不满意。可以把制作菜单第一步的CSS代码进行修改。比如<style>,将里面的字体大小换成了10.5磅这样的话中文字就简洁干净多了。
  <!--
  all.clsMenuItemNS{font-size: 10.5pt; color: white; text-decoration: none;}
  .clsMenuItemIE{text-decoration: none; font-size: 10.5pt; color: white; cursor: hand;}
  A:hover {color: red;}
  -->
  </style>

  同样如果对菜单的表格觉得不满意的话,可以修改menu.js文件中的代码例如:
  function Menu()
  {
  this.bgColor = "#008080";
  if (ie) this.menuFont = "bold xx-small Verdana";
  if (n) this.menuFont = "bold x-small Verdana";
  // this.fontColor = "white"; 
  this.addItem = addItem;
  this.addSubItem = addSubItem;
  this.showMenu = showMenu;
  this.mainPaneBorder = 0;
  this.subMenuPaneBorder = 0;
  }

  this.bgcolor修改的是菜单属性。
  this.mainPaneBorder修改的是主菜单的边框宽度
  this.subMenuPaneBorder 修改的是子菜单的边框宽度。
  修改完毕文件之后重新上传js文件即可。只要修改的好就可以把它发挥成为多种风格。

html+css简单下拉菜单制作

额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: ...
  • no2015214099
  • no2015214099
  • 2017年06月14日 00:04
  • 489

[JavaScript] JS+CSS 制作超级简单的下拉菜单

先看效果: 代码: Good Test function showSubM...
  • shylx123
  • shylx123
  • 2013年11月21日 23:17
  • 1674

微软数字证书制作方法

首先去MS的网站上下载CODESIGN.EXEP这个文件,这是个自解压文件,然后确保你的机器用的是WIN2000或更高版本的windows(版本低了会气死人的哦),一定要先在上句指定的系统中打包,然后...
  • wuxs
  • wuxs
  • 2014年06月07日 16:37
  • 1372

【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList

我本以为UGUI至少是C#控件有的控件它就有,其实上这货所提供的组件少的可怜,如图所示,但是没有枪没有炮我们自己造。比如一个简单的下拉列表DrowDownList,这货到处都有,连那最SB的HTML都...
  • yongh701
  • yongh701
  • 2017年04月25日 10:23
  • 1883

Tensorflow实现照片风格的迁移

很多人都用过Prisma这个app,可以将普通照片转换为想要的风格。其背后的原理,就是通过神经网络学习某个图像的风格,然后再将这种风格应用到其他图像上。 这次通过tensorflow自己实现了一个这样...
  • AIchipmunk
  • AIchipmunk
  • 2017年01月10日 15:51
  • 7821

怎么让你的照片带上艺术大师风格?李飞飞团队开源快速神经网络风格迁移代码

这是来自 Justin Johnson、Alexandre Alahi 和李飞飞的论文《Perceptual Losses for Real-Time Style Transfer and Super...
  • roslei
  • roslei
  • 2016年12月02日 17:39
  • 1857

UGUI制作动态的下拉列表

也就是下拉列表中的下拉选项不是写死的,而是在程序中动态的产生下拉列表实现很简单: 下面就看程序的了看看从服务器取过来的json{'fg':["中式","混搭","田园","地中海","现代","欧式...
  • qq_15267341
  • qq_15267341
  • 2016年09月18日 20:43
  • 2242

下拉菜单制作

样式举例请看淘宝首页的菜单,比如鼠标悬浮商品分类或者网站导航的菜单效果。类似如下。具体内容不重要,重要的是其样式。 剖析表现1,当鼠标悬停时,弹出另外一个“蒙层”,展示菜单。 2,此时,主标题右侧...
  • qq_28300493
  • qq_28300493
  • 2016年08月25日 16:47
  • 98

css实现一级下拉菜单

html代码 北大青鸟——下拉列表菜单页面 北大青鸟授权培训中心 青鸟官网 | 中心首页 ...
  • qq_34137397
  • qq_34137397
  • 2016年11月05日 23:47
  • 262

HTML+CSS+JavaScript实现简易下拉菜单

html lang="en"> head> meta charset="UTF-8"> title>下拉列表title> link rel="stylesheet" href=...
  • darongzi1314
  • darongzi1314
  • 2016年09月14日 16:17
  • 836
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:快速制作微软风格下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)