效果体验：
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. 【Android】setHapticFeedbackEnabled 设置

    使其在触摸的时候没有触感反馈.接着设置长按事件的监听. 代码在:launcher launcher->setupViews方法 // Setup the workspacemWorkspace. ...

  2. ArcGIS 卷帘效果

    一直没注意ArcGIS自带了卷帘功能,使用方法:调出Effects工具条,里面就有卷帘工具. AE开发参考: http://bbs.esrichina-bj.cn/esri/viewthread.ph ...

  3. Flask--Web From 表单

    需要拓展支持 1.Flask-WTF是WTForms项目的Flask框架扩展,我们将用他来帮助我们处理web表单 2.pip install Flask-WTF 配置WTF(不知道为什么,但是好像必须 ...

  4. python --判断列表重复

    一.判断单个列表中的元素是否存在重复 使用set方法去重后,和原list进行对比,如果相等,那么说明原列表无重复,如果存在重复,说明列表存在重复 def is_repect_all(L): repea ...

  5. 笔记本电脑清除BIOS密码

    进bios前输错3次密码弹出八位溢出码为A 用下面的网站计算出结果为B BIOS Master Password Generator for Laptops 登陆bios,输错3次密码后输入B,就可以 ...

  6. windows快速进入安装目录

    ctrl+R 输入%LOCALAPPDATA%\+应用名字 %LOCALAPPDATA%\composer

  7. Hadoop| MapReduce01 概述

    概述 分布式运算程序: 优点:易于编程:良好扩展性:高容错性:适合PB级以上海量数据的离线处理: 缺点:不擅长实时计算:不擅长流式计算:不擅长DAG有向图计算: 核心思想: 1)分布式的运算程序往往需 ...

  8. 基于PySpark的网络服务异常检测系统 阶段总结(二)

    在上篇博文中介绍了网络服务异常检测的大概,本篇将详细介绍SVDD和Isolation Forest这两种算法 1. SVDD算法 SVDD的英文全称是Support Vector Data Descr ...

  9. String.IsNullorEmpty()方法的使用

    != null 就是不为null !string.IsNullOrEmpty  不是null且不是""(string.Empty)

  10. redis虚拟内存

    对于redis 这样的内存数据库, 内存总是不够用的. 除了可以将数据分割到多个 redis 服务器以外. 另外的能够提高数据库容量的办法就是使用虚拟内存技术把那些不经常访问的数据交换到磁盘上 如果我 ...