ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS_html/css_WEB-ITnose で実装された第 2 レベルのドロップダウン ナビゲーション メニューのコード例
純粋な CSS_html/css_WEB-ITnose で実装された第 2 レベルのドロップダウン ナビゲーション メニューのコード例
- WBOYオリジナル
- 2016-06-24 11:30:212346ブラウズ
純粋な CSS で実装されたセカンダリ ドロップダウン ナビゲーション メニューのコード例:
セカンダリ ドロップダウン メニューは多くの Web サイトで使用されており、分類されたナビゲーションを効果的に整理できるだけでなく、Web サイトのスペースを大幅に節約できます。また、動的効果を実現するために、ほとんどの二次ナビゲーション メニューは JavaScript と組み合わせて実装されます。この章では、純粋な CSS を使用して実装されたドロップダウン メニューを紹介します。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.navigator{ width:80%; margin:0;}.navigator ul{ padding:0; margin:0; list-style-type:none;}.navigator li{ float:left; position:relative;}.navigator ul li a, .navigator ul li a:visited { display:block; text-align:center; text-decoration:none; width:184px; height:50px; color:black; border:1px solid #fff; border-width:1px 1px 0 0; background:#CCCCCC; line-height:50px; font-size:17px;}.navigator ul li:hover a{ color:#fff; background:#CCCCFF;}.navigator ul li ul{ display:none;}.navigator ul li:hover ul{ display:block; position:absolute; top:51px; left:0; width:185px;}.navigator ul li:hover ul li a{ display:block; background:#CCFFFF; color:#000;}.navigator ul li:hover ul li a:hover { background:#dfc184; color:#000;}</style></head><body><div class="navigator"> <ul> <li> <a >蚂蚁部落</a> <ul> <li><a href="#">div css教程</a></li> <li><a href="#">javascript教程</a></li> <li><a href="#">jQuery教程</a></li> <li><a href="#">html教程</a></li> <li><a href="#">json教程</a></li> <li><a href="#">ajax教程</a></li> </ul> </li> <li> <a href="#">后台教程</a> <ul> <li><a href="#">asp教程</a></li> <li><a href="#">asp.net教程</a></li> <li><a href="#">php教程</a></li> <li><a href="#">jsp教程</a></li> </ul> </li> <li> <a href="#">交流专区</a> <ul> <li><a href="#">seo交流</a></li> <li><a href="#">网站运营</a></li> <li><a href="#">百度优化</a></li> <li><a href="#">谈天说地</a></li> <li><a href="#">网站排名</a></li> </ul> </li> </ul></div></body></html>
上記のコードは、ドロップダウン ナビゲーション メニューの効果を実現するために純粋な CSS を使用して要件を満たしていますが、IE ブラウザーの以前のバージョンでは互換性の問題があります。心配する必要はありません。間もなく、IE6 のユーザーはますます少なくなるでしょう。その実装原理を簡単に紹介します。
実装原則:
1. メインナビゲーションの水平配置:
メインナビゲーションの水平配置効果は非常に簡単で、最も外側の li 要素にフローティングを追加するだけです。
2. コア構造:
<li> <a >蚂蚁部落</a> <ul> <li><a href="#">div css教程</a></li> <li><a href="#">javascript教程</a></li> <li><a href="#">jQuery教程</a></li> <li><a href="#">html教程</a></li> <li><a href="#">json教程</a></li> <li><a href="#">ajax教程</a></li> </ul></li>
デフォルトの状態では、内側の ul 要素は非表示になります。つまり、デフォルトでメイン ナビゲーションのみが表示され、マウスがメイン ナビゲーション上にあると、 Layer UL 要素が表示され、絶対位置に設定されます。同時に、左と上の属性値を調整して、ドロップダウン メニューの効果を実現します。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=12909
詳細については、以下を参照してください: http://www.softwhy.com/divcss/