现在好多网站中呢，都有这样一个功能 就是在页面的右上角或者是某个角落可以切换网页的背景音色 或者是背景图片等等，其实这个操作真的就是特别的简单，那么今儿道哥就给大家分享这个特别小的只是点。用js来实现选择下拉列表中的颜色来切换网页的背景颜色。

天教大家学习如何制作网页的下拉菜单~

CSS 下拉菜单

首先，我们要使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1.下拉菜单样式

（样式一）

（样式二）

2.基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

（效果图）

相关代码如下

<style>

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

<div class="dropdown">

<span>Mouse over me</span>

<div class="dropdown-content">

<p>Hello World!</p>

</div>

</div>

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。

注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

3.下拉菜单

首先需要创建下拉菜单，并允许用户选取列表中的某一项。这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

（效果图）

相关代码如下

<style>

/* 下拉按钮样式 */

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

/* 容器 <div> - 需要定位下拉内容 */

.dropdown {

position: relative;

display: inline-block;

}

/* 下拉内容 (默认隐藏) */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

/* 下拉菜单的链接 */

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

/* 鼠标移上去后修改下拉菜单链接颜色 */

.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */

.dropdown:hover .dropdown-content {

display: block;

}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>

<div class="dropdown">

<button class="dropbtn">下拉菜单</button>

<div class="dropdown-content">

<a href="#">百度 1</a>

<a href="#">百度 2</a>

<a href="#">百度 3</a>

</div>

</div>

小伙伴们有没有学会呢？没有学会记的私信小编"web"

言

下拉列表select在表单中应该算是使用频率比较高的一个元素，而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件，今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。

CSS3

感兴趣的可以自行去github上学习源码，github地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html

页面效果

首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。

效果图

页面组成

这里我们简单分析下页面的构成，实际上非常的简单，主要包含以下三个元素。

1. 表示外层容器的div元素

2. 上面是一个span元素

3. 下面是一个ul元素，每个li表示一个列表项
   

在整个下拉列表中，主要有两个动画。

1. 下拉菜单旁边的小三角图标，在鼠标悬浮和离开时动态变换

2. 下方的列表，在鼠标悬浮和离开上面的span元素时，列表会有动画显示和消失的效果。

代码构成

下面我们来看看整个页面的代码构成。

• HTML

首先是页面的HTML代码，正如上一部分所讲，页面主要为一个外层容器div，内部是一个span和ul元素，每个列表项li内包含一个a元素，所有HTML部分代码如下所示。

HTML代码

• CSS

CSS部分的代码才是整个实现效果的核心，我们具体来分析。

首先是页面的全局基本配置样式。

全局配置

然后是外层容器的样式。

外层容器样式

然后是span元素的样式，旁边的上三角形通过伪元素::after来实现，在::after伪元素中通过border-color属性来控制三角形的朝向，然后通过transition属性设置变换样式。

span元素以及上三角形

当鼠标停留在span元素上时，span元素背景色会改变，上三角会变成下三角。

鼠标停留后span的样式

紧接着是下面的ul以及li元素的样式，都是一些很普通的属性。

ul与li样式

然后是li下的a元素的样式。

li下a元素样式

然后是css中最核心的地方，ul的动画效果，通过translate3d属性改变ul所处的位置，再以transform属性添加动画效果。

ul初始状态

至此，所有代码讲解完毕，如果运行成功后，会得到文章开始时的下拉列表效果。

结束语

本篇文章主要给大家介绍了如何使用CSS编写一个带动画的下拉列表效果，你学会了吗？