CSS下拉菜單

時間 2020-08-22

標籤 css 下拉菜單欄目 CSS 简体版

原文原文鏈接

例子：ide

鼠標移動到按鈕上打開下拉菜單。（在這裏我將下拉菜單的內容的連接設置爲百度首頁）spa

HTML 部分：3d

製做下拉菜單可使用任何的 HTML元素來打開下拉菜單，如：<span>, 或 <button> 元素。code

使用容器元素 (如： <div>) 來建立下拉菜單的內容，並放在任何你想放的位置上。blog

使用 <div> 元素來包裹這些元素，並使用 CSS 來設置下拉內容的樣式。圖片

CSS 部分：

.dropdown 類使用 position:relative, 這將設置下拉菜單的內容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。pdo

.dropdown-content 類中是實際的下拉菜單。默認是隱藏的，在鼠標移動到指定元素後會顯示。注：若是你想設置下拉內容與下拉按鈕的寬度一致，可設置 width 爲 100% 。get

使用 box-shadow 屬性讓下拉菜單看起來像一個"卡片"，更有立體感。it

:hover 選擇器用於在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。io

 1 <style>
 2 /* 下拉按鈕樣式 */
 3 .dropbtn {
 4     background-color: #4CAF50;
 5     color: white;
 6     padding: 16px;
 7     font-size: 16px;
 8     border: none;
 9     cursor: pointer;
10 }
11 
12 /* 容器 <div> - 定位下拉內容 */
13 .dropdown {
14     position: relative;
15     display: inline-block;
16 }
17 
18 /* 下拉內容 */
19 .dropdown-content {
20     display: none;       /*將下拉內容設置爲默認隱藏*/
21     position: absolute;
22     background-color: #f9f9f9;
23     min-width: 160px;
24     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
25 }
26 
27 /* 下拉菜單的連接 */
28 .dropdown-content a {
29     color: black;
30     padding: 12px 16px;
31     text-decoration: none;
32     display: block;
33 }
34 
35 /* 鼠標移上去後修改下拉菜單連接顏色 */
36 .dropdown-content a:hover {background-color: #f1f1f1}
37 
38 /* 在鼠標移上去後顯示下拉菜單 */
39 .dropdown:hover .dropdown-content {
40     display: block;
41 }
42 
43 /* 當下拉內容顯示後修改下拉按鈕的背景顏色 */
44 .dropdown:hover .dropbtn {
45     background-color: #3e8e41;
46 }
47 </style>
48 
49 <div class="dropdown">
50     <button class="dropbtn">下拉菜單</button>
51         <div class="dropdown-content">
52             <a href="http://www.baidu.com">菜單內容 1</a> 
53             <a href="http://www.baidu.com">菜單內容 2</a> 
54             <a href="http://www.baidu.com">菜單內容 3</a>
55         </div>
56 </div>

效果圖：

還能夠將下拉內容設置爲圖片，起到一個相似於圖片放大的效果。

 1 <style>
 2 .dropdown {
 3     position: relative;
 4     display: inline-block;
 5 }
 6 
 7 .dropdown-content {
 8     display: none;
 9     position: absolute;
10     background-color: #f9f9f9;
11     min-width: 160px;
12     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 }
14 
15 .dropdown:hover .dropdown-content {
16     display: block;
17 }
18 
19 .desc {
20     padding: 15px;
21     text-align: center;
22 }
23 </style>
24 </head>
25 <body>
26 
27 <h2>下拉圖片</h2>
28 <p>移動鼠標到圖片上顯示下拉內容。</p>
29 
30 <div class="dropdown">
31   <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1466689081,2386523910&fm=23&gp=0.jpg" alt="Trolltunga Norway" width="100" height="50">
32   <div class="dropdown-content">
33     <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1466689081,2386523910&fm=23&gp=0.jpg" alt="Trolltunga Norway" width="200" height="100">
34     <div class="desc">添加圖片描述</div>
35   </div>
36 </div>

View Code

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。