css3實現緩慢下拉手風琴導航選單效果
分享一段程式碼例項,它實現了利用css3實現了手風琴導航選單效果。
點選主導航可以展開當前選單,其他選單收縮。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .accordionMenu { background: #fff; color: #424242; font: 12px Arial,Verdana,sans-serif; margin: 0 auto; padding: 10px; width: 500px; } .accordionMenu h2 { margin: 5px 0; padding: 0; position: relative; } .accordionMenu h2:before { /*向下三角效果*/ border: 5px solid #fff; border-color: #fff transparent transparent; content: ""; height: 0; position: absolute; right: 10px; top: 15px; width: 0; } .accordionMenu h2 a { /*製作手風琴效果*/ background: #8f8f8f; background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f)); background: linear-gradient(top,#cecece,#8f8f8f); border-radius: 5px; color: #424242; display: block; font-size: 13px; font-weight: normal; margin: 0; padding: 10px 10px; text-shadow: 2px 2px 2px #aeaeae; text-decoration: none; } .accordionMenu :target h2 a, .accordionMenu h2 a:focus, .accordionMenu h2 a:hover, .accordionMenu h2 a:active { background: #2288dd; background: linear-gradient(top,#6bb2ff,#2288dd); color: #fff; } .accordionMenu p { margin: 0; height: 0; overflow: hidden; padding: 0 10px; transition: height 0.5s ease-in; } /*這部分是顯示內容的關鍵程式碼*/ .accordionMenu :target p { height: 100px; overflow: auto; } .accordionMenu :target h2:before { /*展開欄目時三角效果*/ border-color: transparent transparent transparent #fff; } </style> </head> <body> <div class="accordionMenu"> <div class="menuSection" id="brand"> <h2> <a href="#brand">css教程</a> <p>螞蟻部落一</p> </h2> </div> <div class="menuSection" id="promotion"> <h2> <a href="#promotion">div教程</a> <p>螞蟻部落二</p> </h2> </div> <div class="menuSection" id="event"> <h2> <a href="#event">js教程</a> <p>螞蟻部落三</p> </h2> </div> </div> </body> </html>
上面的程式碼實現了我們要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼.accordionMenu { color: #424242; font: 12px Arial,Verdana,sans-serif; margin: 0 auto; padding: 10px; width: 500px; }
上面的程式碼設定導航選單容器元素的樣式。
設定字型顏色為#424242,字型大小為12px,水平居中和尺寸等。
[CSS] 純文字檢視 複製程式碼.accordionMenu h2 { margin: 5px 0; padding: 0; position: relative; }
設定h2的外邊距和內邊距,並設定其為相對定位,它裡面的定位為元素參考元素就是它。
[CSS] 純文字檢視 複製程式碼.accordionMenu h2:before { /*向下三角效果*/ border: 5px solid #fff; border-color: #fff transparent transparent; content: ""; height: 0; position: absolute; right: 10px; top: 15px; width: 0; }
使用:before偽元素選擇器建立三角形箭頭。
具體可以參閱css使用:after或者:before實現三角形箭頭效果一章節。
[CSS] 純文字檢視 複製程式碼.accordionMenu h2 a { /*製作手風琴效果*/ background: #8f8f8f; background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f)); background: linear-gradient(top,#cecece,#8f8f8f); border-radius: 5px; color: #424242; display: block; font-size: 13px; font-weight: normal; margin: 0; padding: 10px 10px; text-shadow: 2px 2px 2px #aeaeae; text-decoration: none; }
製作圓角形狀的主導航選單。
[CSS] 純文字檢視 複製程式碼.accordionMenu :target h2 a, .accordionMenu h2 a:focus, .accordionMenu h2 a:hover, .accordionMenu h2 a:active { background: #2288dd; background: linear-gradient(top,#6bb2ff,#2288dd); color: #fff; }
設定連結a元素獲取焦點,滑鼠懸浮或者啟用時候的樣式。
[CSS] 純文字檢視 複製程式碼.accordionMenu p { margin: 0; height: 0; overflow: hidden; padding: 0 10px; transition: height 0.5s ease-in; }
設定導航選單的下拉的內容元素樣式,預設狀態下,它的高度為0。
[CSS] 純文字檢視 複製程式碼.accordionMenu :target p { height: 100px; overflow: auto; }
當滑鼠點選時候,內容元素高度為100px,也就是展開。
[CSS] 純文字檢視 複製程式碼.accordionMenu :target h2:before { /*展開欄目時三角效果*/ border-color: transparent transparent transparent #fff; }
設定展開時候的三角形箭頭。
二.相關閱讀:
(1).::before可以參閱CSS 偽物件選擇符before/E::before一章節。
(2).linear-gradient可以參閱css3 linear-gradient線性漸變一章節。
(3).text-shadow可以參閱CSS3 text-shadow一章節。
(4).:target可以參閱css :target用法一章節。
(5).:focus可以參閱css :focus選擇器用法介紹一章節。
(6).transition可以參閱css transition一章節。
相關文章
- 滑鼠懸浮緩慢下拉導航選單
- CSS3橫向導航選單效果CSSS3
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- jQuery手風琴風格收縮展開導航選單jQuery
- jQuery 緩衝效果二級導航下拉選單jQuery
- CSS多級導航選單效果CSS
- JavaScript slide下拉導航選單效果JavaScriptIDE
- CSS3麵包屑導航選單CSSS3
- CSS3垂直摺疊導航選單CSSS3
- jQuery和css3垂直手風琴摺疊選單外掛jQueryCSSS3
- 小例項: 用vue實現手風琴效果Vue
- jQuery 淡入淡出效果下拉導航選單jQuery
- JavaScript橫向二級導航選單效果JavaScript
- element-ui table表格元件實現手風琴效果UI元件
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- PbootCMS導航選單-導航選單的使用教程boot
- 垂直摺疊導航選單實現詳解
- CSS3立體導航選單程式碼例項CSSS3
- css3滑鼠懸浮展開收縮導航選單CSSS3
- 中英文切換導航選單實現詳解
- CSS垂直導航選單CSS
- vue2.0實現底部導航切換效果Vue
- 【前端】javascript實現導航欄筋斗雲效果特效前端JavaScript特效
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- jQuery和css3全屏彈出式導航選單特效外掛jQueryCSSS3特效
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor
- BootstrapBlazor實戰 Menu 導航選單使用(1)bootBlazor
- JavaScript二級導航選單JavaScript
- CSS 動態導航選單CSS
- 導航選單(動畫)--- jQuery動畫jQuery
- JavaScript 三級導航選單JavaScript
- PNAS驚人發現:人類智商在緩慢下跌
- 手風琴方式圖片展示效果詳解
- JavaScript 動畫效果緩慢二級下拉選單JavaScript動畫
- TornadoFx實現側邊欄選單效果
- 點選導航欄切換背景色效果
- css3實現側邊滑動選單CSSS3
- js和CSS3媒體查詢製作簡單的響應式導航選單JSCSSS3
- CSS導航欄及下拉選單CSS