CSS垂直ツリードロップダウンメニュー

2006-05-24 15:54
作者:Linyupark翻訳
出典:www.netvtm.com
責任編集:竜の子牛

ステップ1:メニューの作成

まずメニューアーキテクチャを構築することは非常に重要であり、最良の方法はulを用いて各メニューコンテンツの従主関係を確立することである.複雑ですか?実は書いておけばOKです.

以下は、

• Home
• About
  • History
  Team
  • Offices
• Services        
            
  • Web Design
            
  • Internet              Marketing
            
  • Hosting
            
  • Domain Names
            
  • Broadband
          
        
    
• Contact Us        
            
  • United Kingdom
            
  • France
            
  • USA
            
  • Australia
          
        
    

ステップ2:視覚的な修飾

上に書いてあるコードはブラウザの下ではとても見苦しいと言えます...だから私达は先に彼らに少し様式をプラスして、外観の问题のためあなたが兴味がなくて引き続きすることに及ばないで、ほほほ
まず、煩わしい点を取り除き、このメニューの幅を定義します.

以下は、ul{margin:0;padding:0;list-style:none;width:150 px;border-bottom:1 px solid#ccc; }
次に、中の内容の部分を定義します.幸いなことに、リストのデフォルトの配置は垂直です.これは私たちの要求と一致しています.位置決め方法は、サブメニューが相対的な位置で絶対的に位置決めされるため、相対的な位置決め(relative)に設定する必要があります.

以下は参照フラグメントです:ulli{position:relative; }
ここで定義するのはサブメニューのコンテンツ部分であり、leftとtopのプロパティを使用してメインメニューのコンテンツの右側に表示することができます.displayプロパティの値はnoneなので、デフォルトでは非表示です.

以下は、li ul{position:absolute;left:149 px;top:0;display:none; }
最後に中のa要素を修飾しなければなりません.

以下は、ul li a{display:block;text-decoration:none;color:#777;background:#fff;padding:5 px;border:1 px solid#ccc;border-bottom:0; }
ただしIEの表示BUGのため、以下の言葉を加えて修復しなければなりません.

以下は引用フラグメント:/*Fix IE.Hide from IE Mac*/*html ulli{float:left; } * html ul li a { height: 1%; }/* End */

第三部:作動させる

メインメニューに移動するときに、サブメニューの内容を表示する必要があります.

以下は参照フラグメントです:li:hover ul{display:block; }
はい、あなたはコードをテストすることができて、1%の人は興奮して叫ぶかもしれませんが、ほほほ残念なことに、今のコードはまだIEの上で私たちの望む結果を作ることができません.IEを同じ効果で動作させるには、JSコードを使用しなければなりません.非常に煩わしくありません.

以下は参照クリップです:startList=function(){if(document.all&& document.getElementByyId){navRoot=document.getElementById("nav");for(i=0;iでは、他のコードを追加すると、この機能が実現します.

以下は参照フラグメントです:li:hover ul,li.over ul {   display: block; }

        ,