ハンバーガーメニューをクリックすると、ドロップダウンメニューが表示し、下層メニューのあるメニューをマウスオーバーすると下層メニューを表示する仕様です。
上層メニューと下層メニューとの間に10pxほどの余白を入れなければいけないのですが、そうすると、下層メニューへマウスを移動する際に下層メニューが消えてしまいます。
余白があっても表示させておくにはどうしたらよいでしょうか?
CSS、jQueryどちらを使っても大丈夫ですのでよろしくお願いいたします。
HTML
1<a class="menu-btn" href="#"> 2 <div class="burgar"> 3 <span></span> 4 <span></span> 5 <span></span> 6 </div> 7 <p>MENU</p> 8 <ul class="menu-second-level"> 9 <li>AAAAA 10 <ul class="menu-third-level"> 11 <li>BBBBB 12 <ul class="menu-forth-level"> 13 <li>CCCCC</li> 14 <li>CCCCC</li> 15 <li>CCCCC</li> 16 <li>CCCCC</li> 17 </ul> 18 </li> 19 </ul> 20 </li> 21 </ul> 22</a>
SCSS
1.menu-area { 2 @include clearfix; 3 .menu-btn { 4 display: block; 5 color:#fff; 6 text-align: center; 7 text-decoration: none; 8 background-color: #0caac6; 9 width:78px; 10 height:78px; 11 padding:16px 0 0; 12 @include border-radius(50%); 13 position: relative; 14 z-index: 10; 15 .burgar{ 16 width:33px; 17 height: 26px; 18 position: relative; 19 margin:0 auto; 20 span { 21 position: absolute; 22 left:0; 23 right:0; 24 height: 4px; 25 background-color: #fff; 26 &:nth-child(1) { 27 top:0; 28 } 29 &:nth-child(2) { 30 top:50%; 31 margin-top:-2px; 32 } 33 &:nth-child(3) { 34 bottom:0; 35 } 36 } 37 } 38 p { 39 font-size:12px; 40 padding-top:10px; 41 } 42 position:relative; 43 44 ul { 45 width:165px; 46 background-color:#eee; 47 margin-right:10px; 48 @include border-radius(5px); 49 li { 50 text-align: left; 51 color:#000; 52 font-size:14px; 53 padding:10px; 54 } 55 } 56 .menu-second-level { 57 position: absolute; 58 top:100px; 59 left:25px; 60 display:none; 61 li { 62 position: relative; 63 .menu-third-level { 64 position: absolute; 65 left:105%; 66 top:0; 67 display:none; 68 li { 69 .menu-forth-level { 70 position: absolute; 71 left:105%; 72 top:0; 73 display:none; 74 } 75 } 76 } 77 } 78 } 79 }
jQuery
1$(document).ready(function() { 2 var menuBtn = $('.menu-btn'); 3 menuBtn.on('click',function(e){ 4 $(".menu-second-level").show(); 5 return false; 6 }); 7 8 $('.menu-second-level > li').on({ 9 'mouseenter':function(){ 10 $(".menu-third-level", this).show(); 11 }, 12 'mouseleave':function(){ 13 $(".menu-third-level", this).hide(); 14 } 15 }); 16 17});
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/25 17:53