网站首页导航栏移入移出动画（一）slideDown、slideUp

最新推荐文章于 2022-04-26 07:46:54 发布

lifei932734766

最新推荐文章于 2022-04-26 07:46:54 发布

阅读量650

点赞数

分类专栏：导航栏下拉菜单

本文链接：https://blog.youkuaiyun.com/lifei932734766/article/details/106893595

版权

本文介绍了如何利用CSS3和jQuery实现网站首页导航栏的滑动显示和隐藏动画。通过:hover选择器和slideDown/slideUp方法，创建鼠标移入移出时菜单项的下滑和上拉动画。同时提到了CSS过渡效果对于提升用户体验的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲暇时间浏览别的网站发现首页导航栏有一个比较友好的动画，鼠标移入导航菜单，菜单item下拉内容缓慢显示，移出则迅速拉起消失，于是想着自己试着实现下。

首先想到元素hover，上代码。

<style>
    .ul>li:hover>.news{
            display: block;
     }
     .news{
            display:none;
            background: green;
            border-radius: 10px;
            overflow: hidden;
      }
      .news>ul>li:not(:last-child){
            border-bottom: 1px solid gray;
      }

</style>
<ul class="ul">
        <li>
            <a href="">新闻业务</a>
            <div class="news">
                <ul>
                    <li><a href="">集团动态</a></li>
                    <li><a href="">专题报道</a></li>
                    <li><a href="">品牌专类库</a></li&g