js+CSS实现QQ菜单样式(老版QQ菜单样式，兼容火狐)

kos — Mon, 30 Nov 2009 10:01:14 +0000

　　给大家一个都不陌生的导航样式，老版的QQ菜单样式，网上找了一些代码，但觉得很复杂，想用起来又不方便，于是自己动手写了一个简单的，除了没有写缓慢展开的效果外，其余的都应该差不多，相信很多地方都能用上。

功能如下：
　　1、初始状态下，所以菜单呈关闭状态，当点击某一个菜单时，就展开此菜单，展示里面的内容
　　2、当点击另外一个菜单时，前一个菜单关闭，展开新点击的菜单，展示里面的内容
　　3、浏览器窗口大小改变时，展开的菜单会对应于你的浏览器大小而拉伸或压缩
　　4、当浏览器窗口高度过小(即刷新浏览器出现上下滚动)时，报错提醒，（相信设置导航时会考虑到大体性，即不要把分类分得太多）

　　最后，用到的样式表都只是为了体现功能效果，没有细设，至于鼠标移动和其它样式，自己稍做修改就可达到你想要的效果

再看看下面例子的效果：



CODE
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>QQmenu(老版QQ菜单样式)</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/QQmenu.css"> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/QQmenu.js"></script> </head> <body onResize="Resize(objbak)"> <table width="200" height="100%" border="0" cellpadding="0" cellspacing="0" class="menubg">   <tr>     <td align="left" valign="top"> 	<table width="200" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px #387dd6 solid;" id="leftmenu">       <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的好友</ol> 		<ul class="smmenu"> 		  <li>张三</li> 		  <li>李四</li> 		  <li>王五</li> 		  <li>赵六</li> 		  <li>孙七</li> 		</ul> 		</div> 		</td>       </tr>       <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的同学</ol> 		<ul class="smmenu"> 		  <li>张三one</li> 		  <li>李四one</li> 		  <li>王五one</li> 		  <li>赵六one</li> 		  <li>孙七one</li> 		</ul> 		</div> 		</td>       </tr>       <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的亲人</ol> 		<ul class="smmenu"> 		  <li>张三two</li> 		  <li>李四two</li> 		  <li>王五two</li> 		  <li>赵六two</li> 		  <li>孙七two</li> 		</ul> 		</div> 		</td>       </tr>       <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的同事</ol> 		<ul class="smmenu"> 		  <li>张三trd</li> 		  <li>李四trd</li> 		  <li>王五trd</li> 		  <li>赵六trd</li> 		  <li>孙七trd</li> 		</ul> 		</div> 		</td>       </tr> 	  <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的群</ol> 		<ul class="smmenu"> 		  <li>我的同事</li> 		  <li>我的好友</li> 		  <li>我的亲人</li> 		  <li>我的同学</li> 		</ul> 		</div> 		</td>       </tr> 	  <tr>         <td height="26" bgcolor="#FFFFFF" class="menusty" onClick="menuOpreat(this)"> 		<div> 		<ol class="mainmenu">我的网站</ol> 		<ul class="smmenu"> 		  <li><a href="http://www.uideas.cn" target="_blank">友意博客</a></li> 		  <li><a href="http://www.uideas.cn" target="_blank">友意博客</a></li> 		  <li><a href="http://www.uideas.cn" target="_blank">友意博客</a></li> 		  <li><a href="http://www.uideas.cn" target="_blank">友意博客</a></li> 		</ul> 		</div> 		</td>       </tr>     </table></td>   </tr> </table> </body> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　css下载：QQmenu.css
　　js下载：QQmenu.js

散人笔记 » 兼容的QQ菜单

js+CSS实现QQ菜单样式(老版QQ菜单样式，兼容火狐)