正文

jquery鼠标悬停3d菜单展开动画

roucheng  roucheng  2022-08-21  194

关键词：

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

Jquery子菜单，悬停动画问题

】Jquery子菜单，悬停动画问题【英文标题】：Jquerysubmenu,hoverin/outanimationproblem【发布时间】：2011-07-1308:18:20【问题描述】：我正在jquery中制作菜单。你可以在http://mywash.dk/testtest/index.html看到它从一开始显示的子菜单（在“Hvordan”... 查看详情

悬停时的Jquery动画子菜单不流畅

】悬停时的Jquery动画子菜单不流畅【英文标题】：Jqueryanimatesubmenuonhoverisn\'tsmooth【发布时间】：2011-08-1018:23:53【问题描述】：我正在开发一个带有子菜单的导航栏。在页面加载时，加载条，并且隐藏子菜单。当您将鼠标悬停在一... 查看详情

菜单项悬停动画所有其他项目不是第一个？

】菜单项悬停动画所有其他项目不是第一个？【英文标题】：Menuitemhoveranimateallotheritemsnotthefirstone?【发布时间】：2019-11-1214:12:21【问题描述】：使用jQuery或CSS或两者的组合来制作菜单项悬停动画。我需要有关菜单项的帮助。例如... 查看详情

jQuery - 将鼠标悬停在元素上并将元素动画到该位置

】jQuery-将鼠标悬停在元素上并将元素动画到该位置【英文标题】：jQuery-Hoveroverelementandanimateelementtothatposition【发布时间】：2011-08-1114:39:59【问题描述】：我想制作一个菜单……这样做：http://jsfiddle.net/8U9fy/1/（不想费心把它们定... 查看详情

jquery悬停动画高度（切换）

】jquery悬停动画高度（切换）【英文标题】：jqueryhoveranimateheight(toggle)【发布时间】：2011-10-1515:55:20【问题描述】：我确定这是一个常见问题，我已在此站点上尝试了许多线程来尝试解决我的问题，但我似乎无法使其正常工作。... 查看详情

如何使用 jQuery 在菜单悬停时创建滑动动画？

】如何使用jQuery在菜单悬停时创建滑动动画？【英文标题】：HowtocreateaslidinganimationonmenuhoverwithjQuery?【发布时间】：2012-06-1916:35:18【问题描述】：我在很多网站上都看到了这一点，但我不确定我是否能够解释它。导航中有时会有... 查看详情

html5/css3鼠标悬停动画菜单按钮

在线演示本地下载查看详情

jQuery 更改 CSS 背景位置和鼠标悬停/鼠标移出

】jQuery更改CSS背景位置和鼠标悬停/鼠标移出【英文标题】：jQuerychangeCSSbackgroundpositionandmouseover/mouseout【发布时间】：2011-01-3116:57:45【问题描述】：我有一个由单个图像（例如精灵）组成的菜单。为了显示悬停图像，我只需将背... 查看详情

jquery时间轴鼠标悬停动画

在线演示本地下载查看详情

JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

】JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法【英文标题】：ThewaytostopandcontinueanimationwhilemouseoverandmouseoutinJQuery【发布时间】：2011-07-0214:31:54【问题描述】：例如：一个简单的例子来解释：$(\'.moveDiv\').animate("margin-left":20... 查看详情

Jquery - 为啥我的图像不会在鼠标悬停时动画？

】Jquery-为啥我的图像不会在鼠标悬停时动画？【英文标题】：Jquery-Whywontmyimageanimateonmouseover?Jquery-为什么我的图像不会在鼠标悬停时动画？【发布时间】：2011-09-2216:07:09【问题描述】：我试图让我的图像在鼠标悬停（悬停）时进... 查看详情

jQuery - 当鼠标悬停在元素上时，如何继续动画？

】jQuery-当鼠标悬停在元素上时，如何继续动画？【英文标题】：jQuery-HowcanIcontinueananimationwhilethemousehoversoveranelement?【发布时间】：2011-01-2020:19:07【问题描述】：我需要一种方法来执行某种“whileonmouseover”功能，以便在鼠标悬停... 查看详情

使用 jQuery 制作动画时失去悬停（不移动鼠标）

】使用jQuery制作动画时失去悬停（不移动鼠标）【英文标题】：LosinghoverwhenanimatingwithjQuery(withoutmovingmouse)【发布时间】：2011-06-2223:18:33【问题描述】：我有这行缩略图，我正在使用jQuery制作动画。这些缩略图中的每一个都有一个... 查看详情

关闭多级 jquery 下拉菜单

】关闭多级jquery下拉菜单【英文标题】：Closingmultileveljquerydropdownmenu【发布时间】：2013-01-2922:15:21【问题描述】：我有一个下拉菜单，可以在点击时展开而不是悬停。问题是当我打开子菜单时，当我将鼠标从当前子菜单移动到它... 查看详情

分享一些经典的特效效果,希望对大家有帮助

jquerycolor颜色变化插件设置背景颜色变化透明图片变色效果https://www.mk2048.com/demo/demo_target_desc.php?id=j22ibc12jjquery图片滤镜特效插件轻松实现颜色不断渐变jQueryslide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播点击》jQueryslide... 查看详情

带有“鼠标方向”的悬停的 jQuery 动画

】带有“鼠标方向”的悬停的jQuery动画【英文标题】：jQueryanimationforahoverwith\'mousedirection\'【发布时间】：2011-04-0707:45:22【问题描述】：我正在尝试模拟将鼠标悬停在图像上的效果，叠加的半透明图像将从鼠标所在的方向淡入。... 查看详情

在带有子菜单的菜单上需要有关 JQuery 鼠标悬停的帮助

】在带有子菜单的菜单上需要有关JQuery鼠标悬停的帮助【英文标题】：NeedhelponJQuerymouseoveronmenuwithsubmenus【发布时间】：2011-05-0507:39:37【问题描述】：我有这个菜单(@jsFiddle)，如果发生以下鼠标事件，就会发生这种情况：悬停在Mov... 查看详情

jQuery动画无法悬停

】jQuery动画无法悬停【英文标题】：jQueryanimatenotworkingonhover【发布时间】：2015-03-1709:01:00【问题描述】：为此拉我的头发，看起来很简单，但无论出于何种原因都行不通。当您使用jquery将鼠标悬停在父元素上时，我正在尝试为元... 查看详情