在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

简介: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

需求说明:


jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

用户将光标移动到“最新动态页”或“帮助查询”菜单上时,其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时,其二级菜单滑出隐藏


71.png

72.png


实现思路:


新建 HTML 页面,在页面上使用无序列表显示一级菜单

在“最新动态页”和“帮助查询”菜单中加入二级菜单,二级菜单默认状态为隐藏

当鼠标悬浮在一级菜单上时,菜单的背景色变为红色,字体颜色变为白色

为一级菜单的鼠标移入、移出事件绑定方法,实现二级菜单的滑入滑出效果

当鼠标悬浮在二级菜单上时,菜单的背景色变为红色,字体颜色变为白色


实现代码:


核心代码:

<script type="text/javascript">
  $(function(){
    $("#menu>li:has(ul)").hover(
      function(){
        $(this).find('ul').slideDown(500);
      },
      function(){
        $(this).find('ul').slideUp(500);
      }
    )
  })
</script>


完整代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      body{
        font-size: 14px;
      }
      ul{
        list-style: none;
      }
      a{
        text-decoration: none;
        color: #000;
      }
      #wrap{
        position: relative;
        top: 0px;
        width: 876px;
        height: 34px;
        line-height: 34px;
        margin: 0 auto;
      }
      #menu li{
        float: left;
        display: block;
        width: 92px;
        height: 37px;
        line-height: 37px;
        text-align: center;
        margin-right: 2px;
      }
      #menu li a{
        display: block;
        background: #edebec;
        font-size: 14px;
        color: #333;
        width: 92px;
        height: 37px;
        line-height: 37px;
      }
      #menu li a:hover{
        background: red;
        color: white;
      }
      #menu li ul{
        position: absolute;
        top: 37;
        width: 90px;
        display: none;
        border: 1px solid #ce070e;
        border-top: none;
        background: #fff;
      }
      #menu li ul li{
        float: left;
        width: 90px;
        height: 37px;
        line-height: 37px;
      }
      #menu li ul ll a:link{
        width: 90px;
        height: 37px;
        line-height: 37px;
      }
      #menu li ul li a:hover{
        color: white;
        text-decoration: none;
      }
    </style>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        $("#menu>li:has(ul)").hover(
          function(){
            $(this).find('ul').slideDown(500);
          },
          function(){
            $(this).find('ul').slideUp(500);
          }
        )
      })
    </script>
  </head>
  <body>
    <div id="wrap">
      <ul id="menu">
        <li><a href="#">网站首页</a></li>
        <li><a href="#">最新动态页</a>
          <ul>
            <li><a href="#">源码爱好者</a></li>
            <li><a href="#">编程导航</a></li>
            <li><a href="#">网页特效</a></li>
          </ul>
        </li>
        <li><a href="#">产品预订</a></li>
        <li><a href="#">帮助查询</a>
          <ul>
            <li><a href="#">时速快递</a></li>
            <li><a href="#">太空一号</a></li>
            <li><a href="#">蜘蛛侠前传</a></li>
            <li><a href="#">未来战士</a></li>
            <li><a href="#">蟒蛇之灾</a></li>
          </ul>
        </li>
        <li><a href="#">会员俱乐部</a></li>
        <li><a href="#">凯撤论坛</a></li>
      </ul>
    </div>
  </body>
</html>
目录
打赏
0
0
0
0
6
分享
相关文章
jQuery动画特效
jQuery动画特效
N..
114 1
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
52 22
|
2月前
|
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
68 9
jQuery 动画
【10月更文挑战第8天】
128 55
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
41 0
|
3月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
36 1
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
64 0
jQuery和CSS3带变形特效的固定导航菜单
这是一款jQuery和CSS3带变形特效的固定导航菜单。该导航菜单开始时固定在页面左上角,当用户向下滚动时,导航菜单以水滴变形的方式转换为圆形菜单,然后固定在页面的左上角位置。
|
5月前
|
jQuery 停止动画
jQuery 停止动画
35 4
jQuery 效果- 动画
jQuery 效果- 动画
43 4