竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3 d动画的方式弹出对应的二级菜单。
采用jQuery和CSS3实现。支持Chrome,火狐,边缘等浏览器。
效果图:
代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”比;
& lt; title> jQuery鼠标悬停3 d菜单展开动画——何问起& lt;/title> & lt;基地目标="平等"/比;
& lt;链接rel="样式表" type=" text/css " href=" http://hovertree.com/texiao/jquery/93/css/index.css "比;
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; div类="标志"比;
& lt; h2> & lt; a href=" javascript:,“目标=癬self”祝辞& lt; img src=" http://hovertree.com/themes/hvtimages/hovertree.png "祝辞& lt;/a> & lt;/h2>
& lt;/div>
& lt; p>鼠标移入侧边栏,二级菜单3 d展开& lt; br/祝辞鼠标盘旋背景变色& lt; br/祝辞鼠标移入二维码背景变色& lt;/p>
& lt; div比;
& lt; a href=" http://hovertree.com/"祝辞何问起& lt;/a>
& lt; a href=" http://hovertree.com/h/bjag/clwkm5fc.htm "祝辞说明& lt;/a>
& lt;/div>
& lt;/div>
& lt; div类=皀av-main”比;
& lt; div类=皀av-box”比;
& lt; div类="导航"比;
& lt; ul类=皀av-ul”比;
& lt; li> & lt; a href=" http://hovertree.com "类=凹摇痹? lt; span>首页& lt;/span> & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/h/bjaf/lxsexx3m.htm "类=翱ⅰ弊４? lt; span> JavaScript & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/h/bjaf/l3c6nm7b.htm " class="微信"祝辞& lt; span> ASP.NET & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/h/bjag/hxti6to6.htm "类=鞍咐弊４? lt; span>何问起键盘& lt;/span> & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/h/bjaf/ati6k7yk.htm "类=靶挛拧弊４? lt; span> HoverClock & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/about/"类=敖哟ァ弊４? lt; span>关于何问起& lt;/span> & lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=皀av-slide”比;
& lt; div类=" nav-slide-o "祝辞& lt;/div>
& lt; div类=皀av-slide-o”比;
& lt; ul>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/texiao/hewenqi/"祝辞& lt; span> hewenqi & lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=皀av-slide-o”比;
& lt; ul>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop & lt;/a> & lt;/li>
& lt; li> & lt; a href=" http://hovertree.com/top/"祝辞& lt; span> HoverTreeTop
