效果体验：
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. 【演示】在CSS里用calc进行计算

    请阅读 在CSS里用calc进行计算   下面的元素的width,padding,margin都使用了CSS calc进行计算. 简单计算: 100% – 100px 这是经过简单计算的元素宽度 复杂 ...

  2. linux下在root用户登陆状态下，以指定用户运行脚本程序实现方式

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAABKCAIAAACASdeXAAAEoUlEQVR4nO2dy7WlIBBFTYIoSIIkmD ...

  3. 排查Linux机器是否已被入侵

    来自--马哥Linux运维 1.入侵者可能会删除机器的日志信息 ,可以查看日志信息是否存在后者被清除 [root@zklf-server02 ~]# ll -h /var/log/ total 3.4 ...

  4. 完成将 toChineseNum， 可以将数字转换成中文大写的表示，处理到万级别，例如 toChineseNum(12345)，返回 一万二千三百四十五

    const toChineseNum = (num) => { const unit = ['', '十', '百', '千'] const counts = ['零', '一', '二', ' ...

  5. linux中通过lsof恢复删除的文件，前题是fd被占用。

    http://www.serverwatch.com/tutorials/article.php/3822816/Recovering-Deleted-Files-With-lsof.htm One ...

  6. Person Re-ID行人重试别数据集

    1. 杜克大学数据(DukeMTMC-reID) DukeMTMC 数据集是一个大规模标记的多目标多摄像机行人跟踪数据集.它提供了一个由 8 个同步摄像机记录的新型大型高清视频数据集,具有 7,000 ...

  7. Linux学习之后台任务与定时任务(二十)

    Linux学习之后台任务与定时任务 目录 后台任务 把进程放入后台 查看后台任务 将后台暂停的工作恢复到前台执行 将后台暂停的工作恢复到后台执行 定时任务 手动启动服务 将服务设置为自启动 用户的co ...

  8. [译]the cost of javascript in 2018(1)

    前言 为了构建交互性网站,我们需要发送js给我们的用户,但很多情况下,我们使用了太多js. 在移动端,经常看到只加载了个点击链接或者滚动不了的情况. 实话说,js仍然是移动端最昂贵的资源,因为其在很大 ...

  9. Java Lambda基础——Function, Consumer, Predicate, Supplier, 及FunctionalInterface接口

    这几个接口经常与Lambda结合使用,网上当然也有很多介绍,不过有些过于繁琐,有些又偏简单,秉着实用主义精神,今天这里折中一下,把介绍的内容分为两部分,第一部分相当于TLDR,总结几个"口诀 ...

  10. TCP粘包问题

    1.什么是粘包? 粘包指的是数据与数据之间没有明确的分界线,导致不能正确的读取数据.换句话说就是接收方不知道发送方一次到底发送了多少数据.只有TCP才会出现粘包现象,UDP不会出现粘包现象,因为TCP ...