仅顺风下拉菜单

简介

仅顺风下拉菜单是一款小巧易用的下拉菜单组件，具有以下特点：

• 无需引入jQuery等第三方库，仅使用原生 JavaScript 开发；
• 支持多级菜单；
• 支持自动定位；
• 支持自定义样式。

如何引入

你可以直接下载 Menu.js 文件，然后在 HTML 中引入：

<script src="path/to/Menu.js"></script>

如何使用

基本用法

只需在 HTML 中添加一个包含菜单项的 <ul> 标签，然后在 JavaScript 中实例化 Menu 类即可。

<ul id="menu">
  <li><a href="#">一级菜单 1</a></li>
  <li>
    <a href="#">一级菜单 2</a>
    <ul>
      <li><a href="#">二级菜单 2-1</a></li>
      <li><a href="#">二级菜单 2-2</a></li>
      <li><a href="#">二级菜单 2-3</a></li>
      <li><a href="#">二级菜单 2-4</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单 3</a></li>
</ul>

<script>
  const menu = new Menu('#menu');
</script>

自定义样式

你可以使用内置样式，也可以自定义菜单样式。只需在菜单项的父元素上添加 data-menu 属性，该属性的值为自定义样式的 CSS 选择器，如下所示：

<ul id="menu">
  <li><a href="#">一级菜单 1</a></li>
  <li data-menu=".custom-menu"><a href="#">一级菜单 2</a></li>
  <li><a href="#">一级菜单 3</a></li>
</ul>

<style>
  .custom-menu {
    background-color: #f5f5f5;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
  }

  .custom-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .custom-menu li {
    margin-bottom: 5px;
  }

  .custom-menu a {
    color: #333;
    text-decoration: none;
  }

  .custom-menu a:hover {
    color: #fff;
    background-color: #333;
  }
</style>

<script>
  const menu = new Menu('#menu');

  menu.addStyle('.custom-menu ul', {
    paddingLeft: '15px',
    borderRadius: '3px'
  });
  menu.addStyle('.custom-menu li', {
    fontSize: '14px'
  });
  menu.addStyle('.custom-menu a', {
    fontWeight: 'normal'
  });
</script>

自动定位

默认情况下，菜单会在点击元素的下方展开，如果菜单超出了视口范围，则会自动调整位置，使菜单上下完全可见。你可以通过设置 data-position 属性来自定义菜单的位置：

<a href="#" data-menu="#menu" data-position="top-left">点击菜单</a>

data-position 的值可以是以下字符串之一：

• top-left：菜单在点击元素的上方，靠左；
• top-right：菜单在点击元素的上方，靠右；
• bottom-left：菜单在点击元素的下方，靠左；
• bottom-right：菜单在点击元素的下方，靠右；
• left-top：菜单在点击元素的左侧，靠上；
• left-bottom：菜单在点击元素的左侧，靠下；
• right-top：菜单在点击元素的右侧，靠上；
• right-bottom：菜单在点击元素的右侧，靠下。

API

构造函数

const menu = new Menu(selector, options);

• selector（必选）：菜单项的父元素的 CSS 选择器。

• options（可选）：配置项，包括：

  • openOnHover：是否支持鼠标移入触发菜单，默认为 false；
  • autoClose：点击菜单外区域是否自动关闭菜单，默认为 true；
  • autoPosition：是否自动调整菜单位置，默认为 true；
  • offsetX：菜单位置的 X 偏移量，默认为 0；
  • offsetY：菜单位置的 Y 偏移量，默认为 0。

方法

• addStyle(selector, styles)：向菜单中添加自定义样式。其中：

  • selector：自定义样式的 CSS 选择器；
  • styles：CSS 样式对象。

作者信息

• 作者：仅顺风
• GitHub：https://github.com/justwindy/OnlyBreezesDropdownMenu

License

MIT License.