📌  相关文章
📜  物化 CSS 下拉菜单(1)

📅  最后修改于: 2023-12-03 15:27:05.686000             🧑  作者: Mango

物化 CSS 下拉菜单

简介

物化 CSS 下拉菜单是一款基于 CSS、HTML 和 JavaScript 的开源下拉菜单组件。它使用了 Material Design 设计语言，提供了简单易用的 API 和丰富的样式配置选项，可以帮助开发者快速实现美观、易用的下拉菜单功能。

使用方法
在 HTML 中引入物化 CSS
<!-- 引入物化 CSS 样式 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@materializecss/materialize@next/dist/materialize.min.css">
在 JavaScript 中初始化下拉菜单
<!-- 在 HTML 中添加触发下拉菜单的 HTML 元素 -->
<a class="dropdown-trigger" href="#!" data-target="dropdown1">下拉菜单</a>

<!-- 在 JavaScript 中初始化下拉菜单 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var options = {'coverTrigger': false};
    var instances = M.Dropdown.init(elems, options);
  });
</script>
在 CSS 中自定义样式

使用物化 CSS 提供的配置选项，可以轻松自定义下拉菜单的样式。

<!-- 添加菜单项 -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">菜单项 1</a></li>
  <li><a href="#!">菜单项 2</a></li>
  <li><a href="#!">菜单项 3</a></li>
</ul>

<!-- 使用 data-* 属性自定义菜单项样式 -->
<a class="dropdown-trigger" href="#!" data-target="dropdown1" data-color="blue" data-hover-color="red">
  下拉菜单
</a>

<!-- 使用 CSS 自定义菜单项样式 -->
<style>
  /* 修改菜单项背景颜色 */
  #dropdown1 li>a {
    background-color: #f0f0f0;
  }
  /* 修改菜单项悬停背景颜色 */
  #dropdown1 li>a:hover {
    background-color: #d0d0d0;
  }
</style>

更多自定义样式的示例可以参考物化 CSS 的官方文档。

示例

下面是一个简单的物化 CSS 下拉菜单示例。

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入物化 CSS 样式 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/@materializecss/materialize@next/dist/materialize.min.css">
  </head>
  <body>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li>
            <!-- 添加下拉菜单 -->
            <a class="dropdown-trigger" href="#!" data-target="dropdown1">下拉菜单</a>
            <!-- 在菜单中添加菜单项 -->
            <ul id="dropdown1" class="dropdown-content">
              <li><a href="#!">菜单项 1</a></li>
              <li><a href="#!">菜单项 2</a></li>
              <li><a href="#!">菜单项 3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>

    <!-- 引入物化 CSS JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/@materializecss/materialize@next/dist/materialize.min.js"></script>
    
    <!-- 在 JavaScript 中初始化下拉菜单 -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.dropdown-trigger');
        var options = {'coverTrigger': false};
        var instances = M.Dropdown.init(elems, options);
      });
    </script>
  </body>
</html>
参考资料