DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS下拉|CSS菜單|CSS效果
CSS下拉|CSS菜單|CSS效果
編輯：CSS詳解     
這篇文章主要介紹了你值得擁有的多種CSS下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用 CSS 可以創建一個鼠標移入後顯示下拉菜單的效果。

1、下拉菜單的實現

當鼠標移入指定元素時，顯示下拉菜單。代碼如下：

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>
  2. <Html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>簡單的下拉菜單</title>
  6. <style>
  7. .dropdown{
  8. position:relative;
  9. display:inline-block;
  10. }
  12. .dropdown-content{
  13. min-width:200px;
  14. border:1px solid black;
  15. position:absolute;
  16. display:none;
  17. }
  19. .dropdown:hover .dropdown-content{
  20. display:block;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="dropdown">
  26. <span>鼠標你過來，我為你展示下拉菜單。</span>
  27. <div class="dropdown-content">
  28. <p>下拉菜單 1</p>
  29. <p>下拉菜單 2</p>
  30. </div>
  31. </div>
  32. </body>
  33. </Html>

實例解析：

　　Html 部分：

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

　　　　然後，使用 <div> 元素來創建一個容器，用於包含下拉菜單的內容，並自定義他需要出現的位置。

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

　　CSS 部分：

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

　　　　.dropdown-content 類中是實際的下拉菜單。默認是隱藏的，在鼠標移入指定元素後顯示。

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

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

　　　　:hover 選擇器用於在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單，將下拉菜單容器設置為 display:block;

2、創建下拉菜單

　　在上面例子的基礎上，創建一個下拉菜單，並允許用戶選取列表中的某一項目。

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>
  2. <Html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>下拉菜單實例</title>
  6. <style>
  7. /* 容器 <div> - 需要定位下拉內容 */
  8. .dropdown{
  9. position:relative;
  10. display:inline-block;
  11. }
  13. /* 下拉菜單內容，設置為隱藏 */
  14. .dropdown-content{
  15. min-width:150px;
  16. background-color:#F5F5F5;
  17. position:absolute;
  18. display:none;
  19. box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
  20. }
  22. /* 下拉按鈕樣式 */
  23. .dropbtn{
  24. color:white;
  25. font-size:16px;
  26. padding:15px;
  27. border:none;
  28. background-color:#00CD66;
  29. cursor:pointer;
  30. }
  32. /* 下拉菜單鏈接的樣式 */
  33. .dropdown-content a{
  34. color:black;
  35. text-decoration:none;
  36. padding:12px 15px;
  37. display:block;
  38. }
  40. /* 鼠標移入後顯示下拉菜單 */
  41. .dropdown:hover .dropdown-content{
  42. display:block;
  43. }
  45. /* 鼠標移入後修改鏈接的背景色 */
  46. .dropdown-content a:hover{
  47. background-color:#E8E8E8;
  48. }
  50. /* 下拉菜單顯示後修改下拉按鈕的背景色 */
  51. .dropdown:hover .dropbtn{
  52. background-color:#008B00;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div class="dropdown">
  58. <button type="button" class="dropbtn">下拉菜單按鈕</button>
  59. <div class="dropdown-content">
  60. <a href="#">下拉菜單項 1</a>
  61. <a href="#">下拉菜單項 2</a>
  62. <a href="#">下拉菜單項 3</a>
  63. </div>
  64. </div>
  65. </body>
  66. </Html>


　　在 Chrome 中當鼠標移入下拉菜單按鈕時顯示如下：

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

　　下拉菜單按鈕使用了 cursor 屬性，該屬性主要用於指定鼠標光標的類型，即鼠標指針放在一個元素邊界范圍內時所用的光標形狀。

　　下表列出了該屬性所有的值： 鼠標可移入對應的屬性值，查看光標的形狀。

3、下拉菜單的對齊方式

　　如果下拉菜單設置了 float:left 樣式，那麼還需要設置 left:0，即從 left:0 處開始從左向右顯示菜單內容，否則會超出浏覽器左邊窗口。

　　如果下拉菜單設置了 float:right 樣式，默認都是從左向右顯示，菜單內容則會超出浏覽器右邊窗口，所以還需要設置 right:0，讓下拉菜單內容從右向左。

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>
  2. <Html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>下拉菜單對齊</title>
  6. <style>
  7. /* 容器 <div> - 需要定位下拉內容 */
  8. .dropdown{
  9. position:relative;
  10. display:inline-block;
  11. }
  13. /* 下拉菜單內容，設置為隱藏 */
  14. .dropdown-content{
  15. min-width:150px;
  16. background-color:#F5F5F5;
  17. position:absolute;
  18. right:0;
  19. display:none;
  20. box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
  21. }
  23. /* 下拉按鈕樣式 */
  24. .dropbtn{
  25. color:white;
  26. font-size:16px;
  27. padding:15px;
  28. border:none;
  29. background-color:#00CD66;
  30. cursor:pointer;
  31. }
  33. /* 下拉菜單鏈接的樣式 */
  34. .dropdown-content a{
  35. color:black;
  36. text-decoration:none;
  37. padding:12px 15px;
  38. display:block;
  39. }
  41. /* 鼠標移入後顯示下拉菜單 */
  42. .dropdown:hover .dropdown-content{
  43. display:block;
  44. }
  46. /* 鼠標移入後修改鏈接的背景色 */
  47. .dropdown-content a:hover{
  48. background-color:#E8E8E8;
  49. }
  51. /* 下拉菜單顯示後修改下拉按鈕的背景色 */
  52. .dropdown:hover .dropbtn{
  53. background-color:#008B00;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="dropdown" style="float:left;">
  59. <button type="button" class="dropbtn">左</button>
  60. <div class="dropdown-content" style="left:0;">
  61. <a href="#">下拉菜單項 1</a>
  62. <a href="#">下拉菜單項 2</a>
  63. <a href="#">下拉菜單項 3</a>
  64. </div>
  65. </div>
  67. <div class="dropdown" style="float:right;">
  68. <button type="button" class="dropbtn">右</button>
  69. <div class="dropdown-content">
  70. <a href="#">下拉菜單項 1</a>
  71. <a href="#">下拉菜單項 2</a>
  72. <a href="#">下拉菜單項 3</a>
  73. </div>
  74. </div>
  75. </body>
  76. </Html>

　　在 Chrome 中當鼠標移入右下拉按鈕時顯示如下：

以上就是本文的全部內容，希望對大家的學習有所幫助。

CSS詳解
百發百中的廣告點擊代碼
<!-- 完整的Html代碼是: --> <Html><h
span設置text-indent不起作用的原因及解決方法
對span.t-i{text-indent:-999px;}後發現並沒有起作用，這是因為text-
用點擊來改變文字或者圖片的CSS屬性,挺有用
<!-- 把如下代碼加入<body>區域中 --><style>

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
Web開發與設計師速查手冊大全(2) css-sprite使用詳解 CSS實現有立體感的橫向按鈕式菜單效果代碼 CSS網頁設計：IE8和IE7共存 IE6雙倍margin間距兩大解決方案 再談動態添加樣式規則 網頁在IE6下正常在IE7下錯位的問題 HTML 5 正式標准恐將2022年才能正式發布 CSS-id選擇器 IE與Firefox下對CSS解析的區別(3)
熱門推薦
巧妙利用CSS自定義網頁下劃線樣式 沒有JS只用CSS制作的網頁下拉菜單 CSS 強制換行和禁止換行學習 22個必須知道的css技巧 Div CSS實例教程：頁面制作方法全程指導(2) 面向對象的css:團隊協作開發規范和按結構劃分模塊 學習WEB標准心得:網頁重構的思路 CSS制作的背景動態變化的網頁導航 Firefox下margin-top失效解決技巧
大家都在看
CSS對IE6、IE7、IE8支持詳細的易用的參考 使用JavaScriptCore實現OC和JS交互詳解 JavaScript入門教程(7):History歷史對象 JavaScript中5種調用函數的方法 CSS實例：創建有圖標的網站導航菜單 XMLlHTTP技術資料 JQ的siblings() 什麼是 AngularJS？AngularJS簡介
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved