电子隐藏菜单栏 - Javascript

电子隐藏菜单栏是一个使用Javascript编写的小程序，可以帮助你实现一个隐藏菜单栏，让你的网站更加美观和简洁。

功能及特点

• 点击按钮可以展开/收起菜单栏。
• 菜单栏可以包含多个菜单项，你可以自由定制菜单项的数量和样式。
• 使用纯Javascript编写，无需使用任何外部库或框架，体积小、加载速度快。

安装和使用

1. 在你的HTML文件中添加以下代码：

   <link rel="stylesheet" href="menu.css">
   <script src="menu.js"></script>
   

2. 在你的HTML文件中添加一个<div>容器来存放菜单栏：

   <div id="menu"></div>
   

3. 在你的Javascript文件中创建一个菜单对象并初始化：

   // 创建一个菜单对象
   var menu = new Menu({
     el: '#menu', // 菜单容器的选择器
     items: [     // 菜单项的内容数组
       {text: '首页', url: '/'},
       {text: '关于我们', url: '/about'},
       {text: '联系我们', url: '/contact'}
     ]
   });
   
   // 初始化菜单
   menu.init();
   

4. 在你的CSS文件中编写菜单栏的样式，代码片段如下：

   #menu {
     display: none; /* 隐藏容器 */
   }
   
   .menu-toggle {
     position: fixed;  /* 固定在页面上 */
     top: 20px;
     right: 20px;
     z-index: 1; /* 置于最上层 */
     background-color: #f5f5f5;
     font-size: 20px;
     padding: 10px 20px;
     border-radius: 5px;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
     cursor: pointer;
   }
   
   .menu-list {
     display: flex;
     flex-direction: column;
     margin-top: 10px;
     padding-left: 0;
     list-style: none;
   }
   
   .menu-item {
     padding: 10px;
     background-color: #fff;
     border-bottom: 1px solid #eee;
     font-size: 16px;
     cursor: pointer;
   }
   
   .menu-item:last-child {
     border-bottom: none;
   }
   
   /* 展开菜单栏的样式 */
   #menu.show {
     display: block;
   }
   

API文档

new Menu(options)

创建一个新的菜单对象。

参数

• options: 配置对象，包含以下属性：
  • el: 菜单容器的选择器，必填。
  • items: 菜单项的内容数组，必填。每个菜单项包含以下属性：
    • text: 菜单项文本。
    • url: 菜单项链接地址。

menu.init()

初始化菜单，绑定事件等。