css3滑鼠懸浮展開收縮導航選單
分享一段程式碼例項,它用純css3實現了手風琴式導航選單效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } .items { width: 500px; margin: 50px auto; } .item h4 { height: 40px; line-height: 40px; padding-left: 35px; background-color: chocolate; border-bottom: 2px solid #00021c; } .item p { background-color: khaki; height: 0px; transition: height 1s; } .item:hover p { height: 150px; } </style> </head> <body> <div class="items"> <div class="item"> <H4>螞蟻部落一</H4> <p></p> </div> <div class="item"> <H4>螞蟻部落二</H4> <p></p> </div> <div class="item"> <H4>螞蟻部落三</H4> <p></p> </div> <div class="item"> <H4>螞蟻部落四</H4> <p></p> </div> </div> </body> </html>
實現的原理非常簡單,預設狀態下,p元素的高度是0,;當滑鼠懸浮的時候,然後給p元素設定一個高度,並且採用動畫效果。
相關閱讀:
(1).:hover可以參閱CSS E:hover一章節。
(2).transition可以參閱CSS3 transition一章節。
相關文章
- css3滑鼠懸浮背景滑動導航選單CSSS3
- 滑鼠懸浮可以上下伸縮的導航選單
- 滑鼠懸浮背景變色導航選單
- CSS3 滑鼠懸浮立體翻滾的導航選單CSSS3
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- 滑鼠懸浮底部有橫條伸展的導航選單
- 滑鼠懸浮導航選單底部出現動畫橫線動畫
- 滑鼠懸浮緩慢下拉導航選單
- 滑鼠懸浮中英文切換橫向導航選單
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- css滑鼠懸浮二級下拉導航選單CSS
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- jQuery手風琴風格收縮展開導航選單jQuery
- CSS3 滑鼠懸浮div旋轉縮放CSSS3
- CSS3 滑鼠懸浮元素放大和縮小效果CSSS3
- css滑鼠懸浮下拉選單效果CSS
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- 滑鼠懸浮三形選單變叉號
- CSS3滑鼠懸浮元素放大效果CSSS3
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3滑鼠懸浮圖示旋轉CSSS3
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- CSS3滑鼠懸浮div水平運動CSSS3
- css3滑鼠懸浮小球彈性效果CSSS3
- 滑鼠懸浮圖片實現縮放效果
- CSS3滑鼠懸浮和移開div淡入淡出效果CSSS3
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- css3實現的可伸縮圓角導航選單CSSS3
- elementui NavMenu導航選單預設展開UI
- BLOCK、BFC、邊距合併,滑鼠懸浮選單出現BloC
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- 外掛-懸浮選單
- CSS3標懸浮圓形縮放效果CSSS3