###質問
右にfloatさせているメニューバーの中の一つの項目において、hover時にその項目の下にアコーディオンを表示させたいのですが、アクティブ状態にするとそれらが高さを持ってしまいメニューバーのデザインも崩れてしまいます。どのようにすればメニューバーの配置を崩さず、特定の項目の下にアコーディオンメニューを表示させれるでしょうか?jQueryのhasClassでactiveクラスを追加/削除して動かしています。
HTML
1<div class="header-menu"> 2 <div class="logo"> 3 <h1><a href="#">LOGO</a></h1> 4 </div> 5 <div class="menu"> 6 <ul> 7 <li><a href="#">メニュー1</a></li> 8 <li><a id="accordion" href="#">メニュー2</a></li> 9 <ul class="category"> 10 <li><a href="#">アコーディオン1</a></li> 11 <li><a href="#">アコーディオン2</a></li> 12 </ul> 13 <li><a href="#">メニュー3</a></li> 14 <li><a href="#">メニュー4</a></li> 15 </ul> 16 </div> 17</div>
CSS
1.active{ 2 display: block; 3} 4 5.logo{ 6 float: left; 7} 8 9.menu{ 10 float: right; 11} 12 13.menu ul li{ 14 display: inline-block; 15 text-align: right; 16 padding: 28px 10px 0 100px; 17} 18 19.category{ 20 display: none; 21}
JavaScript
1$(function(){ 2 3 $('#accordion').hover(function(){ 4 5 if($(this).hasClass('active')){ 6 $(this).removeClass('active'); 7 $('.category').slideUp(); 8 }else{ 9 $(this).addClass('active'); 10 $('.category').slideDown(); 11 } 12 13 }); 14 15});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。