微软栏目导航的制作


　　今天在MSDN上看到一个好东西。什么？你还没看到过？那快去看看吧，网址：http://msdn.microsoft.com 

　　看到了吗？就是右边那个栏目导航啊！什么？你不觉得它有什么好？那让我来说说他有哪些特性吧：

　　1、内容可折叠。

　　这个都没什么特殊的，大家都见多了。再看

　　2、没有使用层，完全用表格实现！（你会吗？：）

　　3、可拖动换位置！

　　这个功能就很不错了！你可以把自己喜欢的常去的栏目放到最上面，这样就不必去动滚动条了。也许你会说每次访问都要拖一下，还不是一样麻烦？哈哈，这样想就错了，让我们来看看它最伟大的一点吧，就是：

　　4、可以记忆本次拖动后的各栏目位置及状态！

　　也就是说，你第一次打开这个网页，拖好位置后，关闭浏览器，第二次再进入这个页面的时候，菜单会自动切换到你上次拖好的状态现在是不是觉得这是个好东西了啊？（不过前提是你有ie5以上的浏览器：））

　　哈哈，好东西大家分享嘛！看我不把它弄回来！嘿嘿！不过越是好的东西，就越难到手。为了弄到它，我可是颇费了一番工夫，其中死了多少脑细胞就不提了！看看我最后得到的东西吧：

　　先下载这些文件： 
　　webparts.htc ie.css chevronDown.gif http://www.zzzyk.com/html/soft/chevronUp.gif 
　　downlevel.gif gripblue.gif gripGray.gif 

　　我已经对他们进行了修改。gif文件是栏目标题的图片，可以用自己的，但要保证文件名一样。把他们放在同一目录，然后在该目录下新建你自己的页面。打开css面版，选择ie.css为该页的外联样式文件。

　　下面就可以开始制作导航栏了！

　　1、新建一个1x1的表格用来放整个导航栏目，设置这个表格的ID属性为topTable选择它css式样为clsPartContainer.

　　(注意这些都是必要步骤，而且要注意大小写！）

　　2、在topTable里插入一个两行一列的表格，并设置它的ID属性（这个id属性可以随便设置，但每个栏目ID要不同），

　　第一行是栏目标题把它拆分为3列，选中前面两个单元格设置css属性为clsPartHead，第三个单元格为clsPartRight。

　　然后在第一个单元插入图片gripblue.gif，第三个单元格插入http://www.zzzyk.com/html/soft/chevronUp.gif。

　　选中这个cheveronUp.gif文件在代码编辑状态给它加上 class=clsMinimize 这个属性：

＜img src="http://www.zzzyk.com/html/soft/chevronUp.gif" width="25" height="19" class=clsMinimize＞

　　在第二个单元格插入图片或文字可以自己根据需要来定，但是要保证一点：

　　第二个单元格里至少有一对html标记！也就是说光有文字还不行你得给它加上标记！比如：

＜div＞Topic1＜/div＞、＜b＞Topic1＜/b＞、＜font color="FFFF99"＞ Topic＜/font＞ 这些都行！

　　表格的第二行就是栏目的内容了。可以自己随便写。

　　3、重复步骤2做好其他的导航栏。

　　4、在＜body＞前加入如下代码：

＜script＞
var sContentID = XXXXXXX; 
＜/script＞

　　注意，XXXXXXX你可以自己随便乱写一个随机的数字。它是一个表标识，用来却定当前页面保存的数据（导航栏状态）。

　　如果你有两个页面，并且两个页面的导航栏不一样，你想它们都能分别保存自己的状态就要设置不同的sContentID值。

　　5、在你的＜body＞区加入这行：

＜div class=storeUserData id=oLayout＞＜/div＞

　　这行是个空标记，用来实现数据保存的。

　　6、好啦！讲了这么多！现在终于大功告成了！是不是很麻烦啊？没办法，好东西就是这样的啦，比你自己写还是要来的方便吧？

　　关于这个导航栏实现的原理有兴趣的朋友可以研究一下。它使用了ie内建behavior.saveUserDate来保存网页放数据在浏览器端。

　　事实上IE的很多新特性都是很实用的。烦人的是一个兼容性问题 ，为什么这些实用的功能其它浏览器就不支持呢？

　　附：范列效果

　　有问题请与我联系Email:vn1999@sina.com；qq:3466499.