效果体验：
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

更多特效：

http://www.cnblogs.com/roucheng/p/texiao.html

jQuery鼠标悬停3d菜单展开动画的更多相关文章

  1. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  4. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  5. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  6. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS3 3D折叠展开动画菜单

    在线演示 本地下载

  8. jquery鼠标悬停事件hover()

    在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...

  9. Jquery鼠标悬停按钮图标动态变化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 去掉select的原有样式

    1:设置select的边框为0px,背景设成透明(background: transparent;),这时候你会看到边框没有了,但是小三角还是在的.再在select外面加个div,固定死div的宽度, ...

  2. Codeforces 1045A Last chance 网络流,线段树,线段树优化建图

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1045A.html 题目传送们 - CF1045A 题意 你有 $n$ 个炮,有 $m$ 个敌人,敌人排成一 ...

  3. P1063 能量项链 区间dp

    题目描述 在MarsMars星球上,每个MarsMars人都随身佩带着一串能量项链.在项链上有NN颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一 ...

  4. 数据特征分析：3.统计分析 & 帕累托分析

    1.统计分析 统计指标对定量数据进行统计描述,常从集中趋势和离中趋势两个方面进行分析 集中趋势度量 / 离中趋势度量 One.集中趋势度量 指一组数据向某一中心靠拢的倾向,核心在于寻找数据的代表值或中 ...

  5. CSS选择器 + Xpath + 正则表达式整理（有空再整理）

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  6. day21 模块 异常处理

    常用模块:http://www.cnblogs.com/Eva-J/articles/7228075.html 今日概要: #time # —— 时间:时间戳 字符串 结构化时间 #collectio ...

  7. PageHelper在Mybatis中的使用

    环境:Spring 4.2.1 Mybatis 3.2.8 pagehelper 5.1.2 Mybatis官方教程:https://github.com/pagehelper/Mybatis-Pag ...

  8. sql语句表示不等于

    <> != 后面均不带引号“”

  9. Linux常用命令行补充——持续更新

    1.查看文件夹大小 =>ls -lht 路径 ls -lht /opt/jars 2.查看文件大小 =>du -sh / du -sh /opt/jars/calllog.csv 3.编辑 ...

  10. Bloxorz I POJ - 3322 （bfs）

    Little Tom loves playing games. One day he downloads a little computer game called 'Bloxorz' which m ...