js点击弹出左侧隐藏菜单

最新推荐文章于 2021-03-27 10:58:28 发布

WeLoveSunFlower

最新推荐文章于 2021-03-27 10:58:28 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/WeLoveSunFlower/article/details/37502763

本文介绍了一个使用JavaScript实现的点击弹出隐藏菜单的效果。通过调整元素的左侧margin，达到菜单显示和隐藏的切换。提供了相关源码链接供参考。

效果如图所示：

展开前：

展开后：

原理是通过设置左侧margin来控制菜单的显示隐藏

源码:

<html>
<head>
    <title>SlideBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<style type="text/css">
    #menuBar {
        position: absolute;
        left: -200px;
        width: 226px;
        top: 0px;
        clip: rect()
    }

    #glider {
        position: absolute;
        left: 210px;