效果体验：
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. JMeter非GUI模式下日志介绍

    Creating summariser <summary> Created the tree successfully using /opt/JMeter/TestPlan/test.jm ...

  2. React 入门实例教程（转载）

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. 51Nod1362 搬箱子 排列组合,中国剩余定理

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1362.html 题目传送门 - 51Nod1362 题意 题解 首先考虑枚举斜着走了几次.假设走了 ...

  4. BZOJ4802 欧拉函数 数论

    原文链接http://www.cnblogs.com/zhouzhendong/p/8117744.html 题目传送门 - BZOJ4802 题意概括 Description 已知N,求phi(N) ...

  5. Python交互图表可视化Bokeh：3. 散点图

    散点图 ① 基本散点图绘制② 散点图颜色.大小设置方法③ 不同符号的散点图 1. 基本散点图绘制 import numpy as np import pandas as pd import matpl ...

  6. 数仓1.4 |业务数仓搭建| 拉链表| Presto

    电商业务及数据结构 SKU库存量,剩余多少SPU商品聚集的最小单位,,,这类商品的抽象,提取公共的内容 订单表:周期性状态变化(order_info) id 订单编号 total_amount 订单金 ...

  7. JavaSE| 数组

    1.数组(array) 数组就是多个相同类型数据的组合,实现对这些数据的统一管理. 数组中的元素可以是任何数据类型,包括基本数据类型和引用数据类型.数组属引用类型,数组型数据是对象(object),每 ...

  8. oracle 中可以用 case when then else end来处理除数是0的情况

    case when a.ZJXJE != 0 then to_char(round((a.YFZK-b.YFZK)/a.ZJXJE,2)) else '本期总进项金额为零' end then和else ...

  9. HDU 1522 Marriage is Stable 【稳定婚姻匹配】(模板题)

    <题目链接> 题目大意: 给你N个男生和N个女生,并且给出所有男生和女生对其它所有异性的喜欢程度,喜欢程度越高的两个异性越容易配对,现在求出它们之间的稳定匹配. 解题分析: 稳定婚姻问题的 ...

  10. poj 3368 Frequent values(经典)【RMQ】

    <题目链接> 题目大意: 给你一个长度为n的序列,这个序列每个数都有一个值,接下来进行q次询问,问在指定区间内出现次数最多的数出现了几次. 解题分析: 因为该序列是非降序的,所以该序列中的 ...