divの表示/非表示のドロップダウンメニュー

Question

https://www.nakedcph.com/のようなドロップダウンメニューを作成しようとしています。私の現在の考え方は、リンクが現在のメニューの下に配置されたホバー上の別のdivを表示するメニューを作ることですし、ドロップダウン

<div id="menu"> 
 
\t <ul> 
 
\t <li id="newarrivals-trigger"><a href="url">New Arrivals</a></li> 
 
\t <li><a href="url">Brands</a></li> 
 
\t <li><a href="url">Accessories</a></li> 
 
\t <li><a href="url">Journal</a></li> 
 
\t </ul> 
 
</div> 
 
\t

＃1 newarrivals・トリガ・ディスプレイこの以下のように動作します

<div id="dropdown"> 
 
<ul> 
 
<li><a href="#">Adidas</a></li> 
 
<li><a href="#">Nike</a></li> 
 
<li><a href="#">New Balance</a></li> 
 
<li><a href="#">Puma</a></li> 
 
</ul> 
 
<ul> 
 
<li><a href="#">Vans</a></li> 
 
<li><a href="#">Y3</a></li> 
 
<li><a href="#">Reebook</a></li> 
 
</ul> 
 
</div>

usinここグラム

<script> 
 
$(document).ready(function(){ 
 
$("#newarrivals-trigger").hover(function(){ 
 
$("#dropdown").show(); 
 
}, function(){ 
 
$("#dropdown").hide(); 
 
}); 
 
}); 
 
</script>

私の問題は、私は、ID = "newarrivals-トリガー" リンクから私のカーソルを削除すると、ドロップダウンのdivが瞬時に消えるということです。

この種のドロップダウン（Nakedchp）の構築方法は？

私は唯一のリンクは次のように、その下にリンクの行を表示するものを見つけるように見えることができます。

すべてのアイデア、または使用することができ、既存のメニューの知識？ありがとうございました！

Answer 1

スクリプトなしでこれを行うことができます。 CSSを使用すると、マウスを重ねると特定の要素を操作できます。私はあなたにもしたいかもしれませんあなたがトリガするリンクにカーソルを合わせると、あなたは

link:hover .menuDiv{ 
    display:block; 
} 

でメニューをアクティブにすることができ、その後

.menuDiv{ 
    display:none; 
} 

に別個の要素として、メニューを作成しようとするだろう追加

.menuDiv:hover{ 
    display:block; 
} 

マウスがリンクを離れるときにメニューが消えないようにするためです。

また、あなたのコードを使用して、これを試してみる：

$("#newarrivals-trigger").on("mouseenter", function(){ 

    $("#dropdown").show(); 

}); 

$("#dropdown").on("mouseout", function(){ 

    $("#dropdown").hide(); 

}); 

これはあなたの問題を解決するのに役立つはずです別途マウスホバーとマウス出口イベントを処理します。

希望に役立ちます！

Answer 2

jqueryを使用したい場合は、以下のコードを使用できます。それは、あなたのメニューのちょうど1つの部分のスニペットを示しています。

$("#BrandsAll").hover(function() { 
 
    $("#BrandDropdown").toggleClass("show","hide"); 
 
});

#BrandDropdown{display:none;} 
 
#BrandDropdown.show{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <ul id="newarrivalsTrigger"> 
 
    <li>New Arrivals</li> 
 
    <li id=BrandsAll>Brands 
 
    <ul id="BrandDropdown"> 
 
    <li><a href="#">Adidas</a></li> 
 
    <li><a href="#">Nike</a></li> 
 
    <li><a href="#">New Balance</a></li> 
 
    <li><a href="#">Puma</a></li> 
 
    </ul> 
 
    </li> 
 
    <li>Accessories</li> 
 
    <li>Journal</li> 
 
    </ul> 
 
</div>

Answer 3

私はおそらく、リストのタイトルの<li>内のドロップダウンリストを置きます。

<div id="menu"> 
    <ul> 
    <li id="newarrivals-trigger"><a href="url">New Arrivals</a> 
     <div id="dropdown" class="hidden"> 
     <ul> 
      <li><a href="#">Adidas</a></li> 
      <li><a href="#">Nike</a></li> 
      <li><a href="#">New Balance</a></li> 
      <li><a href="#">Puma</a></li> 
     </ul> 
     ... 
     </div> 
    </li> 
    <li><a href="url">Brands</a></li> 
    <li><a href="url">Accessories</a></li> 
    <li><a href="url">Journal</a></li> 
    </ul> 
</div> 

そして#dropdownがdisplay: noneを設定し、クラスから始めるDIV持っています。

.hidden { 
    display: none; 
} 

その後ホバートリガは削除している/の代わりに表示/非表示を使用してのクラスを追加します。そうすれば、マウスがリストタイトルまたはドロップダウンリストの上に留まる限り、それはトップレベルのliの上にまだホバリングしています。

<script> 
    $(document).ready(function(){ 
    $("#newarrivals-trigger").hover(function(){ 
     $("#dropdown").removeClass("hidden"); 
    }, function(){ 
     $("#dropdown").addClass("hidden"); 
    }); 
    }); 
</script> 

あなたはドロップダウンが正しく配置されるように取得するためにCSSをもう少しやる必要があるだろうが、私はあなたがすでにどこかにいることを前提にしています。その後、ディスプレイを使用して、それを表示し、あなたのドロップダウンのデフォルトの使用表示なしことで

Answer 4

：ブロックメニューは

$('li').on('mouseover', function() { 
 
    $('ul li div.hover').removeClass('active'); 
 
    var submenu = $(this).children()[1]; 
 
    $(submenu).addClass('active'); 
 
}); 
 
$('ul li div.hover').on('mouseout', function() { 
 
    $(this).removeClass('active'); 
 
});

li{ 
 
display: inline-block; 
 
} 
 
.hover { 
 
    position: absolute; 
 
    top: 35px; 
 
    display: none; 
 
} 
 
.hover.active{ 
 
display: block; 
 
} 
 
.hover1:hover > .hover { 
 
    display: block; 
 
} 
 
.hover2:hover > .hover { 
 
    display: block; 
 
} 
 
.hover3:hover > .hover { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="hover1"> 
 
    <a href="">Link</a> 
 
    <div class="hover">dropdown menu1</div> 
 
</li> 
 
<li class="hover2"><a href="">Link</a> 
 
    <div class="hover">dropdown menu2</div> 
 
</li> 
 
<li class="hover3"> 
 
    <a href="">Link</a> 
 
    <div class="hover">dropdown menu3</div> 
 
</li> 
 
</ul>

Answer 5

を推移しているとき、私は、彼らがされていない場合でも、私のドロップダウンが開いたままのが好き私はちょっと頭がおかしいと思う何かをしました。

私は、ボタンとフォーカスセレクタを使用して、メニューが上に乗っていなくても開いたままにします。もちろんそれを行う他の方法はありますが、私のjsfiddleで非常に洗練された純粋なCSSの例を確認してください。

私が考えている最も重要なビットは、フル（またはほぼ全幅）であると思います。これを行うには、ドロップダウンの内容がnavbarの内側にあり、navbarの位置が "relative"のように設定されていることを確認してください。次に、ドロップダウンには絶対的な位置、つまり100％（またはそれ以上）の上位、0（またはそれ以上）の位置が必要です。

次に、drowndownまたはnavbarの間に位置が設定されていないことを確認してください。十分な幅のドロップダウンが得られるはずです。

.root, body, html{ 
 
    margin : 0px; 
 
    padding : 0px; 
 
    width : 100%; 
 
    height : 100%; 
 
    background-color : blue; 
 
    
 
    display : flex; 
 
    flex-direction : column; 
 
} 
 

 
.navbar{ 
 
    position : relative; 
 
    height : 60px; 
 
    width : 100%; 
 
    background-color : white; 
 
    
 
    display : flex; 
 
    flex-direction : row; 
 
    justify-content : center; 
 

 
} 
 

 
.dropdown{ 
 
    position : absolute; 
 
    
 
    top : 105%; 
 
    left : 0px; 
 
    
 
    display : none; 
 
    height : 200px; 
 
    background-color : white; 
 
    width : 100%; 
 
} 
 

 
.link:focus .dropdown{ 
 
    display : flex; 
 
}

<div class="root"> 
 
    <div class="navbar"> 
 
    <button class="link"> 
 
     <div class="text">Dropdown 1</div> 
 
     <div class="dropdown"> 
 
     Content 1 
 
     </div> 
 
    </button><button class="link"> 
 
     <div class="text">Dropdown 2</div> 
 
     <div class="dropdown"> 
 
     Content 2 
 
     </div> 
 
    </button><button class="link"> 
 
     <div class="text">Dropdown 3</div> 
 
     <div class="dropdown"> 
 
     Content 3 
 
     </div> 
 
    </button> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum and other such words 
 
    </div> 
 
</div>