現在好多網站中呢，都有這樣一個功能 就是在頁面的右上角或者是某個角落可以切換網頁的背景音色 或者是背景圖片等等，其實這個操作真的就是特別的簡單，那么今兒道哥就給大家分享這個特別小的只是點。用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標簽樣式是很難看的?；舅械膱F隊都會選擇使用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編寫一個帶動畫的下拉列表效果，你學會了嗎？