ホームページ > 記事 > ウェブフロントエンド > 【CSS】3階層ナビゲーションを実現するピュアCSS（テンプレート）_html/css_WEB-ITnose
【CSS】3階層ナビゲーションを実現するピュアCSS（テンプレート）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:551628ブラウズ
私は以前、カスケード ナビゲーションの実装は CSS の hover 属性を使用して実装するだけで非常に簡単であるべきだと考えていたため、練習にはあまり注意を払いませんでした。しかし、最近のインタビューでこの質問をされたとき、一般的な概念を知っているだけで十分ではなく、実践的な能力が必要であることがたくさんあることに気づきました。
その後、カスケードメニューを実際に実装し、これを機会にみんなで学ぶためのテンプレート化しました。
以下は HTML 部分です:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>纯css级联导航</title></head><body> <div class="main"> <ul class="one-nav"> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> </ul> </li> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> </ul> </li> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li> <a href="javascript:;">二级导航></a> <ul class="three-nav"> <li><a href="javascipt:;">三级导航</a></li> <li><a href="javascipt:;">三级导航</a></li> <li><a href="javascipt:;">三级导航</a></li> </ul> </li> <li><a href="javascript:;">二级导航</a></li> </ul> </li> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> </ul> </li> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> </ul> </li> <li> <a href="javascript:;">一级导航</a> <ul class="two-nav"> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li><a href="javascript:;">二级导航</a></li> <li> <a href="javascript:;"><二级导航</a> <ul class="three-nav"> <li><a href="javascipt:;">三级导航</a></li> <li><a href="javascipt:;">三级导航</a></li> <li><a href="javascipt:;">三级导航</a></li> </ul> </li> </ul> </li> </ul> </div></body></html>
CSS 部分:
body,div,ul,li,a{margin: 0;padding: 0;text-decoration: none;} /* 一级导航 */ .one-nav li{list-style-type: none;float: left;width: 16.57%;text-align: center;background-color: #3391E6;border-right: 1px solid white;cursor: pointer;height: 30px;line-height: 30px;} .one-nav li:nth-last-child(1){border-right: none;} .one-nav li a{color: white;} .one-nav li:hover .two-nav{display: block;} .one-nav li:hover{background-color: #4260D7;} /* 二级导航 */ .two-nav {display: none;} .two-nav li{width: 100%;} .two-nav li:hover .three-nav{display: block;position: relative;} /* 三级导航 */ .three-nav{position: absolute;width:100%;left: 100%;bottom: 100%;} /* 最右边的三级导航显示在左边 */ .one-nav li:nth-last-child(1) .two-nav li .three-nav li{width: 100%;position:relative;right: 200%;} レンダリングは次のとおりです:
この例は比較的単純ですが、より単純になります。物事はもっと地に足の着いた実践が必要です そして人生とはこういうものだと経験し、励まし合いましょう。
作者: Zhizhi
サイン: 道は長くて長い、私は上下に探します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。