jq实现二级下拉菜单动画效果

最新推荐文章于 2024-07-17 13:07:23 发布

qq_827188030

最新推荐文章于 2024-07-17 13:07:23 发布

阅读量6.5k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/qq_37950324/article/details/70198944

版权

这篇博客展示了如何利用jQuery库创建具有动画效果的二级下拉菜单。通过设置CSS样式和使用jQuery的hover及slideToggle方法，实现了当鼠标悬停在菜单项上时，下拉菜单平滑展开，移开时则快速收起的交互效果。

摘要由CSDN通过智能技术生成

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>jq实现二级才拉菜单动画效果</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 
    <style>  
        a{color: white;text-decoration: none;}  
        nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;cursor: pointer;}  
        nav li a{display:block;}  
        nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}  
    </style>
    <script>
    $(function(){
        $('.has_menu').hover(function(){
        $(this).find('ul').slideDown("1500");
    },function(){
        $(this).find('ul').slideUp("fast");
    });
    })
    
    </script>  
</head>  
&