css樹形導航選單程式碼例項
分享一段程式碼例項,它利用css實現了樹形導航選單效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { background: #fefefe; } .tree { list-style: none; padding-left: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tree > .tree-node .tree { display: block; overflow-y: hidden; max-height: 300px; height: auto; -webkit-transition: max-height .5s ease-in; -moz-transition: max-height .5s ease-in; -o-transition: max-height .5s ease-in; transition: max-height .5s ease-in; } .tree-node { margin-top: -3px; } .tree input.node-check { display: none; } .tree > .tree-node > label { cursor: pointer; } .tree .node-content { display: inline-block; } .tree .node-content > .node-text { font-size: 12px; line-height: 14px; margin-left: -4px; } .tree .node-content > .node-text:hover { color: #00A000; } .node-icon { background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; vertical-align: middle; width: 16px; height: 16px; } .node-check:checked + .node-content > .tree { max-height: 0; } .node-check:checked + .node-content > .icon-folder { background-image: url(demo/CSS/img/folder.gif); } .node-check:checked + .node-content > .icon-expand { background-image: url(demo/CSS/img/elbow-end-plus-nl.gif); } .icon-expand { background-image: url(demo/CSS/img/elbow-end-minus-nl.gif); } .icon-minus { background-image: url(demo/CSS/img/elbow-minus.gif); } .icon-elbow { background-image: url(demo/CSS/img/elbow.gif); } .icon-elbow-line { background-image: url(demo/CSS/img/elbow-line.gif); } .icon-elbow-end { background-image: url(demo/CSS/img/elbow-end.gif); } .icon-file { background-image: url(demo/CSS/img/leaf.gif); } .icon-folder { background-image: url(demo/CSS/img/folder-open.gif); } </style> </head> <body> <ul class="tree"> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-expand"></i> <i class="node-icon icon-folder"></i> <span class="node-text">目錄1</span> <ul class="tree"> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">檔案1</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">檔案1</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-expand"></i> <i class="node-icon icon-folder"></i> <span class="node-text">目錄22</span> <ul class="tree"> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">softwhy.com</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">螞蟻部落</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">div教程</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow-line"></i> <i class="node-icon icon-elbow-end"></i> <i class="node-icon icon-file"></i> <span class="node-text">css教程</span> </div> </label> </li> </ul> </div> </label> </li> </ul> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">js教程</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon icon-expand"></i> <i class="node-icon icon-folder"></i> <span class="node-text">jquery教程</span> <ul class="tree"> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">json教程</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">css3教程</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon"></i> <i class="node-icon icon-elbow"></i> <i class="node-icon icon-file"></i> <span class="node-text">html教程</span> </div> </label> </li> <li class="tree-node"> <label> <input class="node-check" type="checkbox"> <div class="node-content"> <i class="node-icon"></i> <i class="node-icon icon-elbow-end"></i> <i class="node-icon icon-file"></i> <span class="node-text">ajax教程</span> </div> </label> </li> </ul> </div> </label> </li> </ul> </body> </html>
相關文章
- javascript樹形導航選單例項程式碼JavaScript單例
- 垂直樹形多級導航選單程式碼例項
- css簡單水平導航選單程式碼例項CSS
- CSS3 扇形導航選單程式碼例項CSSS3
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- 蜂巢式導航選單程式碼例項
- 響應式導航選單程式碼例項
- css水平下拉導航選單程式碼例項CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- 網頁頂部導航選單程式碼例項網頁
- css三級下拉導航選單程式碼例項CSS
- css3實現的立體導航選單效果程式碼例項CSSS3
- 垂直可伸縮的導航選單例項程式碼單例
- CSS 平行四邊形導航選單CSS
- 側欄能夠定位的導航選單程式碼例項
- jQuery css3環形導航選單jQueryCSSS3
- 可以固定的頂部的導航選單簡單例項程式碼單例
- js橫向滑動摺疊導航選單程式碼例項JS
- 解析json資料生成樹形導航選單JSON
- css二級下拉選單程式碼例項CSS
- CSS垂直導航選單CSS
- css 心形效果程式碼例項CSS
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- 點選平滑下拉展開摺疊樹形導航選單
- css3繪製柳樹葉形狀程式碼例項CSSS3
- css 兄弟選擇器簡單程式碼例項CSS
- CSS 動態導航選單CSS
- css六邊形效果程式碼例項CSS
- css繪製圓形程式碼例項CSS
- jq+css+html打造下拉導航選單例項CSSHTML單例
- CSS實現的側欄三級導航選單程式碼CSS
- 導航欄背景切換程式碼例項
- css3橢圓形程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS導航欄及下拉選單CSS