純粋な CSS_html/css_WEB-ITnose で実装された第 2 レベルのドロップダウンナビゲーションメニューのコード例-htmlチュートリアル-php.cn

純粋な CSS_html/css_WEB-ITnose で実装された第 2 レベルのドロップダウンナビゲーションメニューのコード例

WBOY

リリース： 2016-06-24 11:30:21

オリジナル

2364 人が閲覧しました

純粋な 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/