菜单引导程序 - Html

介绍

菜单引导程序是一个使用 HTML 和 CSS 创建的菜单，通常用于网站或应用程序的导航栏。这个程序提供了一种简单的方法来创建具有良好用户体验的用户界面。

安装

<link rel="stylesheet" type="text/css" href="menu-style.css">
<script src="menu-script.js"></script>

使用

HTML

<nav id="menu">
   <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">产品</a>
         <ul>
            <li><a href="#">产品 1</a></li>
            <li><a href="#">产品 2</a></li>
            <li><a href="#">产品 3</a></li>
         </ul>
      </li>
      <li><a href="#">联系我们</a></li>
   </ul>
</nav>

CSS

#menu {
   font-family: Arial, sans-serif;
   font-size: 14px;
}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#menu > ul > li {
   display: inline-block;
   position: relative;
}
#menu > ul > li > a {
   display: block;
   padding: 10px 20px;
   text-decoration: none;
   color: #333;
}
#menu ul ul {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
   display: none;
   margin: 0;
   padding: 0;
   list-style: none;
   background: #fff;
   border: 1px solid #ccc;
   box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
#menu ul ul ul {
   top: 0;
   left: 100%;
   border-left: 1px solid #ccc;
   border-right: 0;
}
#menu ul ul > li {
   display: block;
   position: relative;
}
#menu ul ul > li > a {
   padding: 10px 20px;
   display: block;
   text-decoration: none;
   color: #333;
}
#menu ul ul > li:hover > a {
   background: #f6f6f6;
}
#menu ul ul ul > li:hover > a {
   background: #e6e6e6;
}
#menu ul ul > li > ul {
   display: none;
   position: absolute;
   left: 100%;
   top: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}
#menu ul ul > li:hover > ul {
   display: block;
}

JavaScript

// 激活菜单
document.addEventListener('DOMContentLoaded', function() {
    new Mmenu(document.querySelector('#menu'), {
        "extensions": [
            "theme-dark"
        ],
        "navbar": {
            "title": "菜单"
        }
    });
});

结论

菜单引导程序是一个很好的实用程序，可以帮助开发人员快速创建具有良好用户体验的用户界面。此外，该程序还提供了许多自定义选项，以便您可以根据您的需求进行自定义。通过使用 HTML 和 CSS，菜单引导程序提供了一种轻松的方式来创建具有可扩展性和可维护性的用户界面。