【jQuery】遅延実行（タイムラグ）について

締切済

質問者：mtsm3803
質問日時：2020/09/30 11:24
回答数：2件

#gnavi > ul > li にhoverして、
・ドロップダウンメニュー（subnavi）が表示されるまで
・hoverがはずれてドロップダウンメニュー（subnavi）が消えるまで
少しの間だけドロップダウンメニューの表示が維持されるようにしたいです。
参考：https://www.kureha.co.jp/

【HTML】
<nav id="gnavi">
<ul>
<li>
<a href="javascript:;">タイトル</a>
<div class="subnavi">小カテゴリ</div>
</li>
<li>
<a href="javascript:;">タイトル</a>
<div class="subnavi">小カテゴリ</div>
</li>
</ul>
</nav>

【jQuery】
$(function(){
$(".subnavi").hide();
$("#header_bg").hide(); //画面全体にかかるマスク
$("#gnavi > ul > li").hover(function(){
$(".subnavi:not(:animated)", this).slideDown(500);$("#header_bg").stop().fadeIn();},
function(){
$(".subnavi",this).slideUp(100);
$("#header_bg").stop().fadeOut();
});
$("#gnavi > ul > li").click(function(){
$(".subnavi:not(:animated)", this).slideToggle(500);$("#header_bg").stop().fadeToggle();},
function(){
$(".subnavi",this).slideToggle(500);
$("#header_bg").stop().fadeToggle();
});
$("#header_bg").click(function(){
$(".subnavi").slideUp(100);
$("#header_bg").stop().fadeOut();
});
});

【CSS】
#gnavi > ul {
display: flex;
justify-content: space-between;
}
#gnavi > ul > li > a {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
height: 65px;
padding: 0 1em;
font-size: 16px;
font-weight: bold;
line-height: 1.25em;
color: #000;
}
#gnavi > ul > li:hover > a,
#gnavi > ul > li > a:hover {
background: #000;
color: #fff;
}
#gnavi .subnavi {
display: none;
position: absolute;
top: 130px;
right: 0;
left: 0;
width: 100%;
margin: auto;
background: #fff;
}
#header_bg {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 40;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
}

ご教示の程、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2020/10/01 17:30

No1です

お礼を読みましたが、
＞ドロップダウンメニューが思った動きにならず…
最終的にどのようになさりたいのかわからないので、想像と推測でしかないのですが…

参考サイトとして挙げているもの（一番上のメニューだと思いますが）では、タイトルとカテゴリに当たる部分の隙間は無いものと推測しますが、表示レイアウト上で、「そこに敢えて空きを取りたい」ということでしょうか？
隙間をあけると、そこをマウスが通過する際にhoverのon/offが発生してしまうので、それなりに工夫が必要になると思われます。

以下、推測だらけなので当たるも八卦ですが、ご提示のCSSになるべく近い形で作成してみました。
・処理に直接には必関係のないCSSやクラス等は省いてあります。
・「#header_bg」やタイトルクリック時の処理は、ご提示の内容からでははっきりとしないので、あくまでもhover時の動作のみのサンプルにしてあります
・仕組みとしては、li要素を下方に延長することでカテゴリ表示と連続させ、mouseoutを発生させないようにするというものです。
・また、タイトル部分の表示変更については、CSSだけで行う方法ではなく、スクリプトからのクラス変更によって行われるように変えてあります。

以下のサンプルが、質問者様のなさりたいことに近いのかどうかはわかりませんが、ご参考までに。
（Chromeとfxで検証すみ）
※ タイトルとカテゴリの部分には要素の位置（範囲）がわかりやすくなるように仮の背景色を設定してありますが、CSSの下部２行を消せば背景色はなくなります。
※ また、この掲示板では、投稿文中のURLが自動変換されて省略されてしまうため、jQueryの読込み部分のCDNのURL以下は修正願います。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#navi { position:relative; }
#navi>ul {
list-style-type:none;
padding:0 15px;
display:flex;
justify-content:space-between;
}
#navi>ul>li { padding-bottom:50px; }
#navi>ul>li>a {
display:table-cell;
padding:0 1em;
height:65px;
overflow:hidden;
vertical-align: middle;
font-size:16px;
font-weight:bold;
color: #000;
}
#navi>ul>li>a.active {
background-color: #000;
color: #FFF;
}
#navi>ul>li>a+div {
display:none;
position:absolute;
top:115px; left:0;
width:100%;
}

#navi>ul>li>a { background-color:#F0F4F0; }
#navi>ul>li>a+div { background-color:#F0F0F8; height:150px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …

<script type="text/javascript">
$(()=>{
$('#navi>ul>li>a').on('mouseover', function(){
$(this).addClass('active').next('div').stop().slideDown(500);
});
$('#navi>ul>li').on('mouseleave', function(){
$('a', this).removeClass('active').next('div').stop().slideUp(100);
});
});
</script>
</head>

<body>
<nav id="navi">
<ul>
<li>
<a href="#">タイトル1</a>
<div>小カテゴリ1</div>
</li>
<li>
<a href="#">タイトル2</a>
<div>小カテゴリ2</div>
</li>
<li>
<a href="#">タイトル3</a>
<div>小カテゴリ3</div>
</li>
</ul>
</nav>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お返事が遅くなりすみません。
わざわざサンプルまで作っていただき、ありがとうございます…！
現状のままではやはり思ったような実装にはなりそうにありませんので、
再度見直してみようと思います。
丁寧に教えて頂き、本当にありがとうございます。

通報する

お礼日時：2020/10/05 18:03

No.1

回答者： fujillin
回答日時：2020/09/30 12:30

こんにちは

＞hoverがはずれてドロップダウンメニュー（subnavi）が消えるまで
＞少しの間だけドロップダウンメニューの表示が維持されるようにしたいです。
全体のＵＩがわからないので、上記質問に対する回答のみですが・・・

維持したい時間分だけdelay()で消すのを遅らせれば実現できると思います。
https://api.jquery.com/delay/

とは言え、いずれにしろ消えてしまうので、最終的にどのようなUIにしたいのかがさっぱりわかりません。
処理にも不要と思われる部分があったりするようなので、なんだか、一度全体を整理した方がよろしいのではないでしょうか？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

たしかに、delay()を追記することで遅延表示は可能でした。
ですが、素早くナビゲーション上を移動すると、画面全体にかかるマスクがちかちかしたりドロップダウンメニューが思った動きにならず…

jQueryの知識不足で思い通りの実装ができるかどうか不安ですが、一度、全体を見直してみようと思います。ありがとうございました。

通報する

お礼日時：2020/09/30 18:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！