ドロップダウンメニューの仕様についてご相談させてください。
現在、下記のような形でドロップダウンメニューを作成しています。
https://codepen.io/watermusic/pen/ErVJVW
▼解決したいの下記2点になります
- メインメニュークリックでドロップダウンを表示、その際メインメニュー背景はグレーに切替という形にしていますが、他のメニューをクリックで背景を白に戻したい(同じメニューをクリックする事では白に戻ります)
- メインメニューはhoverで背景がグレーに変わるようにしていますが、一度メニューをクリックしてドロップダウンを表示してしまうと、hoverが効かなくなってしまう
色々と試しているのですが、どうしても上手く動かず苦戦しており
解決策やヒントなどございましたらご教授いただけると幸いです。
宜しくお願いいたします。
html
1<div id="nav"> 2 <ul> 3 <li class="slidebtn"><a href="#">MENU 1</a> 4 <ul class="submenu fashion"> 5 <li><a href="#">SUB MENU-1</a></li> 6 <li><a href="#">SUB MENU-2</a></li> 7 <li><a href="#">SUB MENU-3</a></li> 8 </ul> 9 </li> 10 <li class="slidebtn"><a href="#">MENU 2</a> 11 <ul class="submenu beauty"> 12 <li><a href="#">SUB MENU-1</a></li> 13 <li><a href="#">SUB MENU-2</a></li> 14 <li><a href="#">SUB MENU-3</a></li> 15 </ul> 16 </li> 17 <li class="slidebtn"><a href="#">MENU 3</a> 18 <ul class="submenu goods"> 19 <li><a href="#">SUB MENU-1</a></li> 20 <li><a href="#">SUB MENU-2</a></li> 21 <li><a href="#">SUB MENU-3</a></li> 22 </ul> 23 </li> 24 </ul> 25</div>
css
1#nav{ 2 display: block; 3 width: 724px; 4 position: relative; 5} 6 7#nav ul{ 8 width: 724px; 9 margin: 0 auto; 10 list-style: none; 11} 12#nav ul li{ 13 float: left; 14 width: 240px; 15 font-size: 12px; 16 border-right: 1px solid #393635; 17 text-align: center; 18 letter-spacing: .15em; 19 text-indent: .15em; 20 position: relative; 21} 22#nav ul li a{ 23 display: block; 24 width: 100%; 25 height: 50px; 26 line-height: 50px; 27 background-color: #ffffff; 28} 29#nav ul li a:hover{ 30 background-color: #E6E6E6; 31} 32#nav ul li:first-child{ 33 border-left: 1px solid #393635; 34} 35#nav ul li.slidebtn ul.close{display:none;} 36#nav ul li ul.submenu{ 37 position:absolute; 38 top:51px; 39 left:-1px; 40 white-space:nowrap; 41 font-weight: normal; 42} 43#nav ul li ul.submenu.beauty li{ 44 width:241px; 45} 46#nav ul li ul.submenu li{ 47 line-height: 50px; 48 text-align:center; 49 clear:both; 50 border-bottom:1px solid #393635; 51 border-left:1px solid #393635; 52} 53#nav ul li ul.submenu li a{ 54 background-color: #FBE8E0; 55} 56#nav ul li ul.submenu.beauty li a{ 57 background-color: #DDF2FF; 58} 59#nav ul li ul.submenu.goods li a{ 60 background-color: #FFFCB9; 61} 62#nav ul li ul.submenu li a:hover{ 63 background-color: #FCEEE9; 64} 65#nav ul li ul.submenu.beauty li a:hover{ 66 background-color: #E7F5FE; 67} 68#nav ul li ul.submenu.goods li a:hover{ 69 background-color: #FFFDCE; 70}
javascript
1$(function(){ 2 $("#nav ul li.slidebtn a").addClass("close"); 3 $("#nav ul").addClass("close"); 4 5 $("#nav ul li.slidebtn > a").each(function(){ 6 var allsubmenu = $("#nav ul.submenu"); 7 var btn = $(this); 8 var submenu = $(this).next(); 9 10 btn.click(function(){ 11 if($(this).hasClass("open")){ 12 $(this).removeClass("open").addClass("close"); 13 $(submenu).slideUp("fast"); 14 $(this).css('background-color','#ffffff'); 15 }else{ 16 $(allsubmenu).slideUp("fast"); 17 $("#nav ul li.slidebtn a").removeClass("open").addClass("close"); 18 $(submenu).slideDown("fast"); 19 $(btn).removeClass("close").addClass("open"); 20 $(this).css('background-color','#E6E6E6'); 21 } 22 return false; 23 }); 24 }); 25 //ウィンドウ内の任意の場所クリックで、ドロップダウンを非表示&メニュー背景を白に戻す 26 $(document).click(function(event) { 27 if (!$(event.target).closest("#nav").length) { 28 $("#nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); 29 $("#nav ul li.slidebtn > a").css('background-color','#ffffff'); 30 } 31 }); 32});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/25 10:22
2019/01/25 10:56