###ul>li>ul>liで、li間を行ったり来たりするとチラついてしまうのを直したいです
親メニューにホバーして出てきた子メニューを選ぶときに、liの境目でチラつくようです。
liの中で入れ子にしてるから、何かの影響を受けてしまっているのかなとは思いますが、
htmlの構成的に、そのようにコーディングしたいです。
バブリングってやつか?と思いましたが、これは親要素に影響するんですよね?
このチラつきの対処法、もしくは、ヒントを頂けましたら幸いです。
私のスキルとしましては、下記のとおりです。
今までコピペだったjqueryのコードを今回初めて自分で書きました。
細かいことは勉強していないです。
とりあえず実現したい動きを検索して作りました。
何か不足がありましたらすみません。
どうぞよろしくお願いします。
###html
<header> <img src="img/logo.png" width="200" height="80" alt="logo" class="logo"> <nav class="header-nav"> <ul> <li>nav01 <ul class="nav-child"> <li><a href="">sub-nav01</a></li> <li><a href="">sub-nav02</a></li> </ul> </li> <li>nav02 <ul class="nav-child"> <li><a href="">sub-nav03</a></li> <li><a href="">sub-nav04</a></li> </ul> </li> <li><a href="">nav03</a></li> <li><a href="">nav04</a></li> <li><a href="">nav05</a></li> </ul> </nav> </header> <div class="contents"> <h1>サイトコンテンツ</h1> </div>
###jquery
$(function(){ var nav_li = $('.header-nav ul li'); var nav_child = $('.nav-child'); $(nav_li).hover(function(e) { $('.contents').css('margin-top', '50px'); $(nav_li).children('ul').addClass('shows'); $(this).children('ul').show(); $(this).children('ul').removeClass('shows'); if($(nav_child).hasClass('shows')) { $('.nav-child.shows').css('display','none'); } }); $('.contents').hover(function() { $(nav_child).css('display','none'); $('.contents').css('margin-top', '0'); }); });
###css
.contents { height:500px; } body { margin:0; background-color: #ccc; } ul { margin: 0; padding: 0; } li { list-style: none; } header { position: relative; padding: 25px 30px; background-color: #333; } header:after, .header-nav ul:after { content: ""; display: block; clear: both; } .logo { float: left; } .header-nav { float: right; width: 450px; color: #fff; } .header-nav li { float: left; padding: 15px 20px; } .header-nav li a { color: #fff; } .header-nav li ul { display: none; position: absolute; top: 130px; left: 0; width: 100%; background-color: #efefef; } .header-nav li ul:after { content: ""; display: block; clear: both; } .header-nav li ul a { padding: 15px 20px; color: #333; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/06 05:42