8,906
社区成员
发帖
与我相关
我的任务
分享[转载]如何实现微软网站左侧导航条
仿XP风格的导航条制作教程
作者：深蓝色系统
日期：2002年1月底
访问过Microsoft网站的朋友们一定对他们页面上左侧的XP风格的导航条很感兴趣。微软一直都在走在最新技术的前言，通过这么一个小小的导航条我们就可以看出来，其中的创意和技术含量是十分让人佩服的。下面我就通过一个实例简单的讲解一下这种导航条的做法，由于我的水平有限，这种导航条所使用的脚本中的部分代码我也不是很明白，所以这里重点讲用法，其他的问题您可以自己研究。
请先看一下这种导航条的演示页面：
http://www.epubcn.com/originalspace/computer_relative/msleftbar/sample/sample.htm
ＯＫ，看过演示后，相信您已经迫不及待的想知道如何实现这种效果了，下面我就分别讲解一下其中的内容。
在讲解之前，请先下载我为您准备的演示代码（11KB）。您可以对照文章分析一下代码，相信您很快就能运用自如了。
简单的说，制作这种导航条用到了XML和微软的脚本封装以及JScript技术。实现这种效果所需要的最基本的文件是：一个htm页面、一个xml文件、一个htc文件以及一个css文件。当然，这里只限于我从微软网站分析出来的页面文件，您也可以将其中的部分文件合并或者分解，这都是自由发挥了，这里不作讨论。
演示页面共分为4个文件：sample.htm，default.css，default.htc，submenu.xml，其中：sample.htm即刚才的演示的htm文件；default.css为样式表定义文件；default.htc里面封装了导航条的主要实现代码，使用JScript编写；submenu.xml为弹出菜单的菜单项说明文件。下面我们依次都四个文件进行说明：
一、sample.htm
我们拿导航条中的一部分的HTML代码来说明，如下： <!-- Begin of LeftBar's Code-->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table class="flyoutMenu" menudata="submenu.xml" width="180" cellpadding="2" cellspacing="0" border="0" >
<tr>
<td>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1000">Executable制作软件 </td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1236">Welcome to my website</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1193">OH YES! ^_^</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1339">Technical Resources</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1408">Using Windows XP</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" >Downloads</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of LeftBar's Code-->
大家可能已经注意到了，整个菜单都是使用表格来实现的，包括每一个主菜单项，都是使用一个表格来实现的。请注意上面代码中以不同颜色加粗的代码，这些代码都是最关键的。其中：
(1)class=flyoutMenu和class=flyoutLink是定义表格以及文字的样式的，这些都是在default.css文件中定义的，后面我们会讲到这个文件，这里就不赘述了。
(2)menudata="submenu.xml"是引用了外部文件submenu.xml，刚才我们已经提过，submenu.xml是主菜单项的子菜单项内容定义文件，里面包含了子菜单项的文字以及链接。submenu.xml文件也在后面介绍，这里暂不提。
(3)handle="XXXX"是具有子菜单项的主菜单项才有的，如果没有该主菜单没有弹出子菜单，则无需加入handle值。handle等于的值可以是任何非中文字符。其含义为子菜单项的句柄（句柄的含义请参看有关编程书籍），它对应于submenu.xml文件中的对应项。等我们介绍完submenu.xml大家自然会明白。
【提示】增加任何主菜单项需要按照上面的代码加入相应的表格，有子菜单项的需要加入handle说明，并在submenu.xml中加入子菜单项说明。
二、default.css
default.css文件中定义了菜单的外观样式，内容请大家参看default.css中的详细代码。如果您对CSS还不是很熟悉，请先学习CSS相关的内容。制作这种导航条首先必须在页面头部把default.css文件包含进来，如下所示：
<link rel="stylesheet" type="text/css" href="default.css">
在default.css中，有一个大家需要注意的地方： .flyoutMenu {
background-color: #F1F1F1;
border-color: #999999;
border-width: 0 1px 1px 0;
border-style: solid;
behavior: url(default.htc);
}
在flyoutMenu定义中，请看上面加色加粗的代码，这里引用了一个外部文件default.htc，该文件我们刚才也已经提到了，里面包含了导航条的主要实现代码，使用JScript编写。而我们后面讲到的自定义菜单多数都和这个文件有关，这里大家知道我们在什么地方引用它就行了，其他的我们后面再讲。
作者：深蓝色系统
日期：2002年1月底
访问过Microsoft网站的朋友们一定对他们页面上左侧的XP风格的导航条很感兴趣。微软一直都在走在最新技术的前言，通过这么一个小小的导航条我们就可以看出来，其中的创意和技术含量是十分让人佩服的。下面我就通过一个实例简单的讲解一下这种导航条的做法，由于我的水平有限，这种导航条所使用的脚本中的部分代码我也不是很明白，所以这里重点讲用法，其他的问题您可以自己研究。
请先看一下这种导航条的演示页面：
http://www.epubcn.com/originalspace/computer_relative/msleftbar/sample/sample.htm
ＯＫ，看过演示后，相信您已经迫不及待的想知道如何实现这种效果了，下面我就分别讲解一下其中的内容。
在讲解之前，请先下载我为您准备的演示代码（11KB）。您可以对照文章分析一下代码，相信您很快就能运用自如了。
简单的说，制作这种导航条用到了XML和微软的脚本封装以及JScript技术。实现这种效果所需要的最基本的文件是：一个htm页面、一个xml文件、一个htc文件以及一个css文件。当然，这里只限于我从微软网站分析出来的页面文件，您也可以将其中的部分文件合并或者分解，这都是自由发挥了，这里不作讨论。
演示页面共分为4个文件：sample.htm，default.css，default.htc，submenu.xml，其中：sample.htm即刚才的演示的htm文件；default.css为样式表定义文件；default.htc里面封装了导航条的主要实现代码，使用JScript编写；submenu.xml为弹出菜单的菜单项说明文件。下面我们依次都四个文件进行说明：
一、sample.htm
我们拿导航条中的一部分的HTML代码来说明，如下： <!-- Begin of LeftBar's Code-->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table class="flyoutMenu" menudata="submenu.xml" width="180" cellpadding="2" cellspacing="0" border="0" >
<tr>
<td>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1000">Executable制作软件 </td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1236">Welcome to my website</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1193">OH YES! ^_^</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1339">Technical Resources</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" handle="1408">Using Windows XP</td>
</tr>
</table>
<table width="175" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="flyoutLink" >Downloads</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of LeftBar's Code-->
大家可能已经注意到了，整个菜单都是使用表格来实现的，包括每一个主菜单项，都是使用一个表格来实现的。请注意上面代码中以不同颜色加粗的代码，这些代码都是最关键的。其中：
(1)class=flyoutMenu和class=flyoutLink是定义表格以及文字的样式的，这些都是在default.css文件中定义的，后面我们会讲到这个文件，这里就不赘述了。
(2)menudata="submenu.xml"是引用了外部文件submenu.xml，刚才我们已经提过，submenu.xml是主菜单项的子菜单项内容定义文件，里面包含了子菜单项的文字以及链接。submenu.xml文件也在后面介绍，这里暂不提。
(3)handle="XXXX"是具有子菜单项的主菜单项才有的，如果没有该主菜单没有弹出子菜单，则无需加入handle值。handle等于的值可以是任何非中文字符。其含义为子菜单项的句柄（句柄的含义请参看有关编程书籍），它对应于submenu.xml文件中的对应项。等我们介绍完submenu.xml大家自然会明白。
【提示】增加任何主菜单项需要按照上面的代码加入相应的表格，有子菜单项的需要加入handle说明，并在submenu.xml中加入子菜单项说明。
二、default.css
default.css文件中定义了菜单的外观样式，内容请大家参看default.css中的详细代码。如果您对CSS还不是很熟悉，请先学习CSS相关的内容。制作这种导航条首先必须在页面头部把default.css文件包含进来，如下所示：
<link rel="stylesheet" type="text/css" href="default.css">
在default.css中，有一个大家需要注意的地方： .flyoutMenu {
background-color: #F1F1F1;
border-color: #999999;
border-width: 0 1px 1px 0;
border-style: solid;
behavior: url(default.htc);
}
在flyoutMenu定义中，请看上面加色加粗的代码，这里引用了一个外部文件default.htc，该文件我们刚才也已经提到了，里面包含了导航条的主要实现代码，使用JScript编写。而我们后面讲到的自定义菜单多数都和这个文件有关，这里大家知道我们在什么地方引用它就行了，其他的我们后面再讲。
...全文
请发表友善的回复…
发表回复
childish 2003-06-01
- 打赏
- 举报
太棒了
stationxp 2003-05-29
- 打赏
- 举报
示例代码下载：
http://www.epubcn.com/originalspace/computer_relative/msleftbar/mleftbar_sample.zip
http://www.epubcn.com/originalspace/computer_relative/msleftbar/mleftbar_sample.zip
stationxp 2003-05-29
- 打赏
- 举报
下面我们来继续说明剩下的两个重要的文件：default.htc和submenu.xml
三、submenu.xml
这里我拿submenu.xml文件中的一小部分来说明一下：
<?xml version='1.0' encoding="GB2312"?>
<menu rev="1">
<submenu handle="1235">
<item href="#" label="Evaluation" />
<item href="#" label="How to Buy" />
<item href="#" label="Using Windows XP" />
<item href="#" label="Technical Resources" />
<item href="#" label="Downloads" />
<item href="#" label="hardware" />
<item href="#" label="software" />
</submenu>
</menu>
请大家注意其中不同颜色表示的代码，其中，<submenu>里面的handle="1235"即对应于我们在sample.htm文件中提到的handle，也就是说，这里的handle即对应着sample.htm中的一个主菜单项，<submenu handle="XXXX">子菜单项</submenu>里面包含的内容便是handle对应的主菜单项的子菜单项内容说明。<item href="子菜单项链接地址" label="子菜单项文字">这一条可以重复使用，如果您想增加或者删除子菜单项，只要按照这里的格式加入或者删除即可。
另外，<?xml version='1.0' encoding="GB2312"?>这一行是每个xml文件开始都要有的，这一行不能修改。其中，encoding表示页面的编码方式，对于中英文混合的菜单，需要使用GB2312这种编码方式。如果是纯英文菜单，可以不加这一说明。
四、default.htc
default.htc是制作整个导航条的最重要的一个文件，假如你要修改菜单的某些效果，几乎都是在这个文件中完成的。因为我的水平有限，在这里不能给大家一一讲解其中的实现函数了，如果您感兴趣，可以参看微软的JScript技术资料以及htc脚步封装技术资料。
下面我说明几个大家需要注意的代码，请参看具体的default.htc文件（该文件可以用记事本等文本编辑器打开，如果您的计算机安装有Microsoft FrontPage，则该文件默认的打开方式即为该软件）。
1、var IMAGES = "images/"
说明：当子菜单项过多的时候，整个屏幕必然无法全部显示。所以微软采用了菜单项滚动的功能。大家可以将浏览器窗口放小，然后将鼠标移到某个具有子菜单的主菜单上，等子菜单显示出来后，如果子菜单足够多，大家会看到子菜单上下有两个双箭头，这个箭头是GIF图片，包括两种状态。这几个箭头图片以及具有子菜单的主菜单右边的黑色三角都包含在images目录下，大家可以自己到images目录下查看。如果这些图片被你换了一个地方，记住要修改这一行代码中的路径，否则将不会正常显示。
2、var MENU_WIDTH = 190
说明：主菜单宽度。这个宽度一方面影响主菜单在一行所能显示的文字的多少，另一方面则影响黑色三角形的位置，大家可以改变一下它的值，然后浏览一下改变后的导航条效果，自然就会明白了。
3、var MENU_BORDER_COLOR = '#999999'
说明：弹出的子菜单项的边框颜色，这里是深灰色。
4、var MENU_BACKGROUND_COLOR = '#f1f1f1'
说明：弹出子菜单的背景颜色。
5、var MENU_MOUSEOVER_COLOR = '#cccccc'
说明：鼠标移到子菜单上所显示的颜色。
6、var MENU_MOUSEDOWN_COLOR = '#999999'
说明：当鼠标按下（点击）子菜单项所显示的颜色
7、var MENU_SHADOW_COLOR = '#666666'
说明：子菜单的阴影颜色
8、var FLYOUT_DELAY = 200
说明：子菜单的弹出延时，以毫秒计算，这里是200毫秒，即2秒。
9、var KILL_DELAY = 300
说明：子菜单消失的延时，这里为3秒
10、var SCROLL_DELAY = 35
说明：鼠标在菜单上移动时的延时效果
11、var MIN_FLYOUT_WIDTH = 100和var MAX_FLYOUT_WIDTH = 410
说明：定义了子菜单项最大和最小的宽度
以上只是对一些常用的参数做了一点简单的说明，大家可以尝试改变它们的值，然后观看对应的效果，这样也许能更快的理解它们的含义。
另外，default.htc中还有很多实现的函数，鉴于个人水平和时间的关系，这里就不一一说明了，如果您感兴趣可以自己去研究。我基本上没有对函数做过多的改动。
ＯＫ，我们上面通过对各个文件的一些简单的说明讲解了这种导航条的制作方法。相信您已经对如何制作这种效果有了一个大概的认识。当然，可能也不是非常明白。不过没关系，多动手、多尝试，相信您很快就会掌握如何使用这些文件的。如果您就这种效果以及微软的一些其他页面技术有问题，我欢迎您给我来信，我们可以互相学习、互相交流。我的E-mail是xuyu@transtar.com.cn
三、submenu.xml
这里我拿submenu.xml文件中的一小部分来说明一下：
<?xml version='1.0' encoding="GB2312"?>
<menu rev="1">
<submenu handle="1235">
<item href="#" label="Evaluation" />
<item href="#" label="How to Buy" />
<item href="#" label="Using Windows XP" />
<item href="#" label="Technical Resources" />
<item href="#" label="Downloads" />
<item href="#" label="hardware" />
<item href="#" label="software" />
</submenu>
</menu>
请大家注意其中不同颜色表示的代码，其中，<submenu>里面的handle="1235"即对应于我们在sample.htm文件中提到的handle，也就是说，这里的handle即对应着sample.htm中的一个主菜单项，<submenu handle="XXXX">子菜单项</submenu>里面包含的内容便是handle对应的主菜单项的子菜单项内容说明。<item href="子菜单项链接地址" label="子菜单项文字">这一条可以重复使用，如果您想增加或者删除子菜单项，只要按照这里的格式加入或者删除即可。
另外，<?xml version='1.0' encoding="GB2312"?>这一行是每个xml文件开始都要有的，这一行不能修改。其中，encoding表示页面的编码方式，对于中英文混合的菜单，需要使用GB2312这种编码方式。如果是纯英文菜单，可以不加这一说明。
四、default.htc
default.htc是制作整个导航条的最重要的一个文件，假如你要修改菜单的某些效果，几乎都是在这个文件中完成的。因为我的水平有限，在这里不能给大家一一讲解其中的实现函数了，如果您感兴趣，可以参看微软的JScript技术资料以及htc脚步封装技术资料。
下面我说明几个大家需要注意的代码，请参看具体的default.htc文件（该文件可以用记事本等文本编辑器打开，如果您的计算机安装有Microsoft FrontPage，则该文件默认的打开方式即为该软件）。
1、var IMAGES = "images/"
说明：当子菜单项过多的时候，整个屏幕必然无法全部显示。所以微软采用了菜单项滚动的功能。大家可以将浏览器窗口放小，然后将鼠标移到某个具有子菜单的主菜单上，等子菜单显示出来后，如果子菜单足够多，大家会看到子菜单上下有两个双箭头，这个箭头是GIF图片，包括两种状态。这几个箭头图片以及具有子菜单的主菜单右边的黑色三角都包含在images目录下，大家可以自己到images目录下查看。如果这些图片被你换了一个地方，记住要修改这一行代码中的路径，否则将不会正常显示。
2、var MENU_WIDTH = 190
说明：主菜单宽度。这个宽度一方面影响主菜单在一行所能显示的文字的多少，另一方面则影响黑色三角形的位置，大家可以改变一下它的值，然后浏览一下改变后的导航条效果，自然就会明白了。
3、var MENU_BORDER_COLOR = '#999999'
说明：弹出的子菜单项的边框颜色，这里是深灰色。
4、var MENU_BACKGROUND_COLOR = '#f1f1f1'
说明：弹出子菜单的背景颜色。
5、var MENU_MOUSEOVER_COLOR = '#cccccc'
说明：鼠标移到子菜单上所显示的颜色。
6、var MENU_MOUSEDOWN_COLOR = '#999999'
说明：当鼠标按下（点击）子菜单项所显示的颜色
7、var MENU_SHADOW_COLOR = '#666666'
说明：子菜单的阴影颜色
8、var FLYOUT_DELAY = 200
说明：子菜单的弹出延时，以毫秒计算，这里是200毫秒，即2秒。
9、var KILL_DELAY = 300
说明：子菜单消失的延时，这里为3秒
10、var SCROLL_DELAY = 35
说明：鼠标在菜单上移动时的延时效果
11、var MIN_FLYOUT_WIDTH = 100和var MAX_FLYOUT_WIDTH = 410
说明：定义了子菜单项最大和最小的宽度
以上只是对一些常用的参数做了一点简单的说明，大家可以尝试改变它们的值，然后观看对应的效果，这样也许能更快的理解它们的含义。
另外，default.htc中还有很多实现的函数，鉴于个人水平和时间的关系，这里就不一一说明了，如果您感兴趣可以自己去研究。我基本上没有对函数做过多的改动。
ＯＫ，我们上面通过对各个文件的一些简单的说明讲解了这种导航条的制作方法。相信您已经对如何制作这种效果有了一个大概的认识。当然，可能也不是非常明白。不过没关系，多动手、多尝试，相信您很快就会掌握如何使用这些文件的。如果您就这种效果以及微软的一些其他页面技术有问题，我欢迎您给我来信，我们可以互相学习、互相交流。我的E-mail是xuyu@transtar.com.cn
