2017-12-14 4 views
2

ulliのネストされたナビゲーションを作成したいと思います。サブアイテムを持つこともできます。CSSをネストした次の行の子を持つナビゲーション

親アイテムliativeクラスがある場合、サブアイテムは次の行に表示されます(このクラスはjavascriptでonclickに設定されています)。

サブリストにposition: absolutがある場合に限り、私はその管理を行いました。 残念ながら、それは次のコンテンツと重複します。

これは、それがどのように見えるかです:

navigation

私は本当にposition: absolutを使用せずにこれを実行したいのですが、方法を考えることはできません。

誰でも手伝ってもらえますか?

私はコードに従っています。

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    position: relative 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    border: 1px solid deeppink; 
 
    margin: 5px 5px 0 5px; 
 
} 
 

 
ul ul { 
 
    position: absolute; 
 
    display: none; 
 
    left: 0; 
 
} 
 

 
ul ul li { 
 
    border: 0; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
ul li.isActive { 
 
    background-color: yellow; 
 
} 
 

 
ul li.isActive ul { 
 
    display: block; 
 
} 
 

 
span { 
 
    padding: 5px; 
 
}
<ul> 
 
    <li> 
 
    <span>top1</span> 
 
    </li> 
 
    <li class="isActive"> 
 
    <span>top2</span> 
 
    <ul> 
 
     <li> 
 
     <span>sub1</span> 
 
     </li> 
 
     <li> 
 
     <span>sub2</span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <span>top3</span> 
 
    <ul> 
 
     <li> 
 
     <span>other sub1</span> 
 
     </li> 
 
     <li> 
 
     <span>other sub2</span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<span> 
 
     Some text. 
 
     </span>

+3

を - 代替ではなく、サブメニューを絶対的に配置すると、表示されたときに残りのサイトコンテンツが押し下げられます。それは通常、乱雑に見えます。特にアイテムの数のために異なる高さのサブメニューがある場合。通常、あなたが今持っているものは、人々が望むものです... – CBroe

+0

はい、私はそれが欲しいです。しかし、私はそれを達成する方法を知らない。私が完璧を取り除くと、それは完全に間違っているように見えます... – KittyKat

+0

同じように見えるようにすることは、絶対的な位置付けがなければ簡単になることはありません。しかし、JSはとにかく演奏されているので、効果を達成するために、メインウルに対応する余白を追加することもできます。あなたのサブメニューが1つの「行」しかカバーしないことが確かな場合は、静的な値を使用することができます(フォントサイズに関連するものが好ましい)。そうでなければ、最初に示された特定のサブメニューの高さを照会し、動的に... – CBroe

答えて

0

は、最もダイナミックな方法か、非常に拡張性がありますが、フォーカス擬似を使用することができ、あなたがアクティブのためにJavaScriptを使用する必要はありません、あなたがいずれかを使用する必要はありません私はあなたのコメントから見ています。 JSFiddleここでアクションhttps://jsfiddle.net/Le64we9s/1/

スタイルでそれを見るために:

.clear{ 
    clear:both; 
} 

.content{ 
    margin-top:10px; 
} 

.main-link, .sub-link{ 
    color:#fff; 
    text-decoration:none; 
    padding:5px; 
    display:inline-block; 
    background:#2489f1; 
} 

.sub-link{ 
    background:#1d6dbf; 
    display:none; 
    margin-top:10px; 
} 

.main-link:focus{ 
    background:#65b1ff; 
} 

.main-link-1:focus ~ .sub-link-1, .main-link-2:focus ~ .sub-link-2, .main-link-3:focus ~ .sub-link-3, .main-link-4:focus ~ .sub-link-4{ 
    display:inline-block; 
} 

あなたは.main-link-(number here):focus ~ .sub-link-(same number here)あなたが新しいメインメニュータブとサブメニューを追加するたびに追加する必要があります。

HTML:

<div> 
    <a href="#" class="main-link main-link-1">Main 1</a> 
    <a href="#" class="main-link main-link-2">Main 2</a> 
    <a href="#" class="main-link main-link-3">Main 3</a> 
    <a href="#" class="main-link main-link-4">Main 4</a> 

    <div class="clear"></div> 

    <a href="#" class="sub-link sub-link-1">Sub Menu 1</a> 
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a> 
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a> 
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a> 

    <a href="#" class="sub-link sub-link-2">Sub Menu 2</a> 
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a> 
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a> 
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a> 

    <a href="#" class="sub-link sub-link-3">Sub Menu 3</a> 
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a> 
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a> 
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a> 

    <a href="#" class="sub-link sub-link-4">Sub Menu 4</a> 
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a> 
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a> 
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a> 
</div> 

<div class="content"> 
    content here 
</div> 

あなたが動作するようにフォーカス擬似のタグを使用する必要があります。

0

チェックこれとaccordingly.Iが位置を使用していない、それを変更:_ "残念ながら、それは次の内容と重なる。" _絶対

ul > li{ 
 
    float:left; 
 
    margin-left:20px; 
 
\t list-style:none; 
 
} 
 
    
 
ul > li > span{ 
 
\t border:1px solid red; 
 
\t display:block; 
 
\t width:50px; 
 
} 
 
.sub{ margin-left:-132px;margin-top:5px; } 
 
    
 
.sub > li{ 
 
    float:left; 
 
\t margin-left:20px; 
 
\t border:1px solid red; 
 
\t visibility:hidden; 
 
} 
 
    
 
ul > li:hover .sub > li{ 
 
    visibility:visible; 
 
} 
 
    
 
#txt{ 
 
    margin-left:60px; 
 
    clear:both; 
 
}
<div class="menu"> 
 
    <ul> 
 
    <li><span>top 1</span></li> 
 
\t <li><span>top 2</span> 
 
\t <ul class="sub"> 
 
\t  <li>Sub 2.1</li> 
 
\t \t <li>Sub 2.2</li> 
 
\t </ul> 
 
\t </li> 
 
\t <li><span>top 3</span></li> 
 
    </ul> 
 
</div> 
 

 
<div id="txt"> 
 
<p>Some text.</p> 
 
</div>

関連する問題