基础 CSS 下拉菜单

下拉菜单是网页开发中常见的一个组件，在用户点击或者鼠标悬浮到某个元素时，会弹出一个下拉列表，用户可以在列表中选择需要的选项。本文将介绍如何使用基础的 CSS 实现一个简单的下拉菜单。

HTML 结构

下拉菜单通常由两部分组成：触发下拉的元素和下拉菜单。触发下拉的元素可以是按钮、链接或者任何其它合法的 HTML 元素。下拉菜单一般是一个无序列表，其中的每个列表项都表示一个可选的菜单项。

以下是一个简单的下拉菜单的 HTML 结构：

<div class="dropdown">
  <button class="dropdown-btn">菜单</button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

在这个例子中，.dropdown 是下拉菜单的容器，.dropdown-btn 是触发下拉的按钮，.dropdown-menu 是下拉菜单本身。下拉菜单包含了三个菜单项，每个菜单项都是一个链接。

CSS 样式

在 HTML 结构中定义好了下拉菜单后，我们需要用 CSS 来控制下拉菜单的显示和隐藏。基本的思路是，当用户点击或者鼠标悬浮到触发下拉的按钮时，显示下拉菜单，否则隐藏下拉菜单。

以下是一个基础的下拉菜单的 CSS 样式：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
}

.dropdown-menu li {
  padding: 8px 12px;
}

.dropdown-menu li a {
  display: block;
  color: #333;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #f8f8f8;
}

这个样式定义了三个选择器，.dropdown、.dropdown-btn 和 .dropdown-menu，它们分别对应下拉菜单容器、按钮和菜单项列表。其中，position: relative 表示将下拉菜单容器设置为相对位置，.dropdown-menu 被设置为绝对位置，top: 100% 表示下拉菜单出现在触发按钮的下方。而 display: none 则表示一开始下拉菜单是隐藏的。当用户点击或者鼠标悬浮在 .dropdown-btn 上时，通过 JavaScript 将 .dropdown-menu 的 display 属性设置为 block，从而显示下拉菜单。

JavaScript 动效

在 CSS 中定义了下拉菜单的样式后，我们需要使用 JavaScript 添加一些用户交互动画。下面是一个简单的 jQuery 插件，它可以实现鼠标悬浮到触发按钮上时，显示下拉菜单；鼠标移开触发按钮或者下拉菜单本身时，隐藏下拉菜单。

$.fn.dropdown = function() {
  var $this = $(this),
      $btn = $this.find('.dropdown-btn'),
      $menu = $this.find('.dropdown-menu');

  $btn.on('click', function(e){
    e.stopPropagation();
    $menu.show();
  });

  $this.on('mouseleave', function(){
    $menu.hide();
  });

  $menu.on('mouseleave', function(){
    $menu.hide();
  });
};

$('.dropdown').dropdown();

这个插件非常简单，它定义了一个 $().dropdown() 函数，用于初始化下拉菜单。在插件中，我们首先获取到下拉菜单的三个元素 .dropdown-btn、.dropdown-menu 和 .dropdown，然后使用 click、mouseleave 等事件监听器来实现下拉菜单的显示和隐藏。

结论

在本文中，我们通过 HTML 和 CSS 实现了一个基础的下拉菜单，并且使用 jQuery 编写了一个简单的下拉菜单插件。本文的下拉菜单功能并不完整，但它可以作为一个基础模板来扩展更多更复杂的下拉菜单功能。