效果体验：
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. shell判断文件是否为空

    [[ `cat a.log |wc -l` -eq 0 ]] && echo "file is empty"

  2. 带你了解zabbix如何监控mysql主从到报警触发

    本章博客我们一起来聊一聊如何监控mysql数据库主从状态? 思路梳理: 1)首先我们都知道,判断Mysql主从是否正常,是通过主从上面的SQL和IO线程都为yes状态判断(通过awk取值,grep过滤 ...

  3. git之一: git基础

    参考: SourceTree使用 git教程 廖学风git  文档1 文档2 1. git 概念介绍 工作区: 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区,工作区下面有. ...

  4. HDU4622 Reincarnation 字符串 SAM

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4622.html 题目传送门 - HDU4622 题意 多组数据. 对于每一组数据,给定一个字符串 s , ...

  5. Snowflake Snow Snowflakes POJ - 3349（hash）

    You may have heard that no two snowflakes are alike. Your task is to write a program to determine wh ...

  6. poj1041 【无向图欧拉回路】 按最小升序输出

    题目链接:http://poj.org/problem?id=1041 题目大意: 题目大意:一个城镇有n个二叉路口,这些路口由m条街道连接,某人想要从某个路口出发,经过所有的街道且每条街道只走一次, ...

  7. 动手创建 SSD 目标检测框架

    参考:单发多框检测(SSD) 本文代码被我放置在 Github:https://github.com/XinetAI/CVX/blob/master/app/gluoncvx/ssd.py 关于 SS ...

  8. 简单封装kafka相关的api

    一.针对于kafka版本 <dependency> <groupId>org.apache.kafka</groupId> <artifactId>ka ...

  9. Java中的泛型 --- Java 编程思想

    前言 ​ 我一直都认为泛型是程序语言设计中一个非常基础,重要的概念,Java 中的泛型到底是怎么样的,为什么会有泛型,泛型怎么发展出来的.通透理解泛型是学好基础里面中非常重要的.于是,我对<Ja ...

  10. 理解JSON对象：JSON.parse、 JSON.stringify

    何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...