一款CSS3实现多功能下拉菜单（带分享按）的教程

下面是一款CSS3实现多功能下拉菜单（带分享按钮）的完整攻略：

一、概述

本教程将会为你介绍一款用CSS3实现的多功能下拉菜单，该菜单不仅能够实现常规的下拉列表功能，还带有分享按钮，能够方便地分享当前页面的内容到社交媒体上。该菜单使用的是纯CSS3技术，不需要任何JavaScript代码即可实现。下面我们将会分步骤详细介绍该菜单的实现过程。

二、制作HTML结构

首先，我们需要先创建一个HTML结构，包含两个主要部分：一个下拉列表和一个分享按钮。具体实现方法如下：

<div class="dropdown-wrapper">
  <div class="dropdown">
    <select>
      <option value="" disabled selected hidden>选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>
  </div>
  <div class="share-button">
    <button>分享</button>
    <ul class="share-menu">
      <li><a href="#">分享到微信</a></li>
      <li><a href="#">分享到微博</a></li>
      <li><a href="#">分享到QQ空间</a></li>
    </ul>
  </div>
</div>

这段代码中，我们首先创建了一个包裹器dropdown-wrapper，然后在里面创建了两个部分：一个dropdown下拉菜单和一个share-button分享按钮。其中，下拉菜单是通过一个select标签来实现的，我们给其中的第一个option元素添加了一些属性用于在菜单首次打开时显示默认选项；分享按钮是通过一个button元素和一个ul列表来实现的，列表中的每一项都是带有相应链接的a标签。

三、添加CSS样式

接下来，我们需要为HTML元素添加一些CSS样式以实现菜单的样式和功能。具体实现方法如下：

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

.dropdown select {
  min-width: 120px;
  padding: 8px;
  border: none;
  background: #f3f3f3;
  color: #555;
  font-size: inherit;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dropdown select::-ms-expand {
  display: none;
}

.share-button button {
  padding: 8px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
}

.share-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
  border-radius: 3px;
  display: none;
}

.share-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.share-menu a {
  display: block;
  padding: 5px 10px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}

.share-menu a:hover {
  background: #f3f3f3;
}

这段代码中，我们使用了position和display等属性来对HTML元素进行定位和布局；使用background、border、padding等属性来调整元素的样式；使用appearance和-ms-expand等属性来修饰下拉菜单的样式；使用box-shadow来为分享菜单添加阴影效果，等等。除了这些属性外，我们还使用了伪类::before和::after来实现了分享按钮的上、下箭头图标，具体实现方法如下：

.share-button button::before {
  content: " ";
  display: inline-block;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  height: 0.45em;
  width: 0.45em;
  position: relative;
  margin-right: 0.4em;
  top: 0.2em;
  transform: rotate(-45deg);
  vertical-align: middle;
}

.share-button button::after {
  content: " ";
  display: inline-block;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  height: 0.45em;
  width: 0.45em;
  position: relative;
  margin-left: 0.4em;
  top: 0.2em;
  transform: rotate(45deg);
  vertical-align: middle;
}

这段代码中，我们使用了content、display、border-style、border-width、height、width等属性来创建了一个倾斜的直角三角形，并使用transform旋转使其变成上、下两个箭头图标。

四、添加菜单交互

最后，我们需要为菜单添加交互效果。具体实现方法如下：

.dropdown select:hover {
  cursor: pointer;
}

.share-button button:focus + .share-menu,
.share-button button:hover + .share-menu {
  display: block;
}

这段代码中，我们使用了cursor属性为鼠标悬浮的下拉菜单添加了一个“手形”鼠标指针；使用了display属性为分享菜单添加了一些弹出和隐藏效果。其中，+选择器表示选择与其前面的元素相邻的后面的同级元素，这里用于表示button元素后面的ul容器。

五、示例说明

下面我们提供两个实例说明：

示例1

该示例演示了如何在下拉菜单中添加多个选项，并将选中的选项显示在页面上。

<div class="dropdown-wrapper">
  <div class="dropdown">
    <select onchange="document.getElementById('selected').innerHTML=this.value;">
      <option value="" disabled selected hidden>选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <<option value="guangzhou">广州</option>
    </select>
  </div>
  <div>
    您选择的城市是：<span id="selected"></span>
  </div>
</div>

在这里，我们使用了onchange事件对select元素进行监听，当用户选择一个新的选项时，会触发该事件并将选中的选项的值赋值给span元素的innerHTML属性，从而实现了动态显示选中的选项。

示例2

该示例演示了如何在分享菜单中添加更多的分享选项，并将选中的选项链接到相应的社交媒体上。

<div class="dropdown-wrapper">
  <div class="share-button">
    <button>分享</button>
    <ul class="share-menu">
      <li><a href="http://www.baidu.com/baidu?wd=%E5%88%86%E4%BA%AB%E5%BE%AE%E4%BF%A1">分享到微信</a></li>
      <li><a href="http://www.baidu.com/baidu?wd=%E5%88%86%E4%BA%AB%E5%BE%AE%E5%8D%9A">分享到微博</a></li>
      <li><a href="http://www.baidu.com/baidu?wd=%E5%88%86%E4%BA%ABQQ%E7%A9%BA%E9%97%B4">分享到QQ空间</a></li>
      <li><a href="http://www.baidu.com/baidu?wd=%E5%88%86%E4%BA%AB%E7%A5%9E%E7%BB%8F%E5%BE%AE%E4%BF%A1">分享到神经微信</a></li>
      <li><a href="http://www.baidu.com/baidu?wd=%E5%88%86%E4%BA%AB%E5%8D%9A%E5%AE%A2%E5%9B%AD">分享到博客园</a></li>
    </ul>
  </div>
</div>

在这里，我们向分享菜单中添加了更多的分享选项，并为每个选项添加了相应的href属性，从而实现了点击分享按钮后能够将当前页面分享至选定的社交媒体。由于这里的选项仅仅只是添加了href属性，所以并不需要对JavaScript和CSS进行太多的修改。