基于js滑出式菜单

紫微右恒

于 2022-05-16 19:05:35 发布

阅读量386

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/weixin_45712645/article/details/124805837

版权

本文介绍了如何利用JavaScript和CSS创建一款动态的滑出式菜单。通过JavaScript控制HTML元素的显示与隐藏，实现菜单的平滑展开和收起效果，同时结合CSS实现样式美化。

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

css

<style>
        body{
            margin: 0;
            padding: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            height: 35px;
            width: 100%;
            background: #999;
        }
        ul{
            width: 600px;
            list-style: none;
            margin: auto;
        }
        .menu{
            position: relative;
            float: left;
            width: 100px; 
            line-height: 35px;
            height: 35px;
            text-align: center;
        }
        .subMenu{
            display: none;
            border: 1px solid #ccc;
        }
        .last{
            border-bottom: 0;
        }
        a{
            color: #000;
            text-decoration: none;
        }
    </style>

<script>
        window.onload = function(){
            var menu = docu

最低0.47元/天解锁文章