jQuery鼠标悬停3d菜单展开动画
效果体验：
http://hovertree.com/texiao/jquery/93/
竖直的主菜单贴着页面左侧，当光标移入菜单项时，以3D动画的方式弹出对应的二级菜单。
采用jQuery和CSS3实现。支持Chrome，火狐，Edge等浏览器。
效果图：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>jQuery鼠标悬停3d菜单展开动画 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/93/css/index.css"> </head> <body> <div class="wrap"> <div class="logo"> <h1><a href="javascript:;" target="_self"><img src="http://hovertree.com/themes/hvtimages/hovertree.png"></a></h1> </div> <p>鼠标移入侧边栏，二级菜单3D展开<br/>鼠标hover背景变色<br />鼠标移入二维码背景变色</p> <div style="text-align:center;margin:50px 0; font-size:20px; color:#ffffff;" > <a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/clwkm5fc.htm" >说明</a> </div> </div> <div class="nav-main"> <div class="nav-box"> <div class="nav"> <ul class="nav-ul"> <li><a href="http://hovertree.com" class="home"><span>首页</span></a></li> <li><a href="http://hovertree.com/h/bjaf/lxsexx3m.htm" class="develop"><span>JavaScript</span></a></li> <li><a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm" class="wechat"><span>ASP.NET</span></a></li> <li><a href="http://hovertree.com/h/bjag/hxti6to6.htm" class="case"><span>何问起键盘</span></a></li> <li><a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="news"><span>HoverClock</span></a></li> <li><a href="http://hovertree.com/about/" class="contact"><span>关于何问起</span></a></li> </ul> </div> <div class="nav-slide"> <div class="nav-slide-o"></div> <div class="nav-slide-o"> <ul> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> <li><a href="http://hovertree.com/texiao/hewenqi/"><span>hewenqi</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> <li><a href="http://hovertree.com/top/"><span>HoverTreeTop</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> <li><a href="http://hovertree.com/tiku/"><span>何问起题库</span></a></li> </ul> </div> <div class="nav-slide-o"> <ul> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> <li><a href="http://hovertree.com/menu/texiao/"><span>网页特效</span></a></li> </ul> </div> <div class="nav-slide-o"></div> </div> </div> </div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ var thisTime; $('.nav-ul li').mouseleave(function(even){ thisTime = setTimeout(thisMouseOut,1000); }) $('.nav-ul li').mouseenter(function(){ clearTimeout(thisTime); var thisUB = $('.nav-ul li').index($(this)); if($.trim($('.nav-slide-o').eq(thisUB).html()) != "") { $('.nav-slide').addClass('hover'); $('.nav-slide-o').hide(); $('.nav-slide-o').eq(thisUB).show(); } else{ $('.nav-slide').removeClass('hover'); } }) function thisMouseOut(){ $('.nav-slide').removeClass('hover'); } $('.nav-slide').mouseenter(function(){ clearTimeout(thisTime); $('.nav-slide').addClass('hover'); }) $('.nav-slide').mouseleave(function(){ $('.nav-slide').removeClass('hover'); }) }) </script> </body> </html>
对于代码中的jQuery事件，可以使用on方法改进。参考：
http://hovertree.com/h/bjaf/ug1fikri.htm
源码下载：
http://hovertree.com/h/bjag/sdm5sdva.htm
更多特效：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
2014-01-19 实例对比剖析c#引用参数的用法
2014-01-19 如何理解css中的float