你值得擁有的CSS下拉菜單效果

發(fā)布時(shí)間：2016-03-14 08:46:13 作者：彼岸時(shí)光

我要評(píng)論

這篇文章主要介紹了你值得擁有的多種CSS下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用 CSS 可以創(chuàng)建一個(gè)鼠標(biāo)移入后顯示下拉菜單的效果。

1、下拉菜單的實(shí)現(xiàn)

當(dāng)鼠標(biāo)移入指定元素時(shí)，顯示下拉菜單。代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單的下拉菜單</title>
<style>
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content{
min-width:200px;
border:1px solid black;
position:absolute;
display:none;
}
.dropdown:hover .dropdown-content{
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠標(biāo)你過來，我為你展示下拉菜單。</span>
<div class="dropdown-content">
<p>下拉菜單 1</p>
<p>下拉菜單 2</p>
</div>
</div>
</body>
</html>

實(shí)例解析：

　　HTML 部分：

　　　　可以使用任何 HTML 元素來打開下拉菜單，比如 <span>，或 <a>、<button> 等元素。

　　　　然后，使用 <div> 元素來創(chuàng)建一個(gè)容器，用于包含下拉菜單的內(nèi)容，并自定義他需要出現(xiàn)的位置。

　　　　最后，再使用 <div> 元素來包裹這些元素，并使用 CSS 來設(shè)置下拉內(nèi)容的樣式。

　　CSS 部分：

　　　　.dropdown 類使用 position:relative，這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕（使用 position:absolute）的右下角位置。

　　　　.dropdown-content 類中是實(shí)際的下拉菜單。默認(rèn)是隱藏的，在鼠標(biāo)移入指定元素后顯示。

　　　　注意：在上面的例子中，下拉菜單容器的寬度設(shè)置為最小 200px，根據(jù)實(shí)際情況可以自行定義。

　　　　如果希望下拉菜單與下拉按鈕的寬度一致，可將寬度設(shè)置為 100%，overflow:auto 屬性可以指定在小尺寸屏幕上滾動(dòng)。

　　　　:hover 選擇器用于在用戶將鼠標(biāo)移動(dòng)到下拉按鈕上時(shí)顯示下拉菜單，將下拉菜單容器設(shè)置為 display:block;

2、創(chuàng)建下拉菜單

　　在上面例子的基礎(chǔ)上，創(chuàng)建一個(gè)下拉菜單，并允許用戶選取列表中的某一項(xiàng)目。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜單實(shí)例</title>
<style>
/* 容器 <div> - 需要定位下拉內(nèi)容 */
.dropdown{
position:relative;
display:inline-block;
}
/* 下拉菜單內(nèi)容，設(shè)置為隱藏 */
.dropdown-content{
min-width:150px;
background-color:#F5F5F5;
position:absolute;
display:none;
box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}
/* 下拉按鈕樣式 */
.dropbtn{
color:white;
font-size:16px;
padding:15px;
border:none;
background-color:#00CD66;
cursor:pointer;
}
/* 下拉菜單鏈接的樣式 */
.dropdown-content a{
color:black;
text-decoration:none;
padding:12px 15px;
display:block;
}
/* 鼠標(biāo)移入后顯示下拉菜單 */
.dropdown:hover .dropdown-content{
display:block;
}
/* 鼠標(biāo)移入后修改鏈接的背景色 */
.dropdown-content a:hover{
background-color:#E8E8E8;
}
/* 下拉菜單顯示后修改下拉按鈕的背景色 */
.dropdown:hover .dropbtn{
background-color:#008B00;
}
</style>
</head>
<body>
<div class="dropdown">
<button type="button" class="dropbtn">下拉菜單按鈕</button>
<div class="dropdown-content">
<a href="#">下拉菜單項(xiàng) 1</a>
<a href="#">下拉菜單項(xiàng) 2</a>
<a href="#">下拉菜單項(xiàng) 3</a>
</div>
</div>
</body>
</html>

　　在 Chrome 中當(dāng)鼠標(biāo)移入下拉菜單按鈕時(shí)顯示如下：

　　在上面的例子中，下拉菜單的內(nèi)容設(shè)置了 box-shadow 屬性，這個(gè)屬性主要用于添加陰影，這樣下拉菜單看起來就像一個(gè)“卡片”一樣。該屬性指定下拉菜單在水平方向陰影為 0，垂直方向?yàn)?8 像素的陰影，模糊距離為 15 像素，陰影的尺寸為 0，并指定陰影的顏色為黑色，且透明度為 0.2。

　　下拉菜單按鈕使用了 cursor 屬性，該屬性主要用于指定鼠標(biāo)光標(biāo)的類型，即鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀。

　　下表列出了該屬性所有的值：鼠標(biāo)可移入對(duì)應(yīng)的屬性值，查看光標(biāo)的形狀。