0

私は自分のサイトの垂直ナビゲーション バーを作成しています... 残念ながら、私が望むものを達成していないので、解決策が得られることを願っています.

垂直メニューにはカテゴリのリストがあります...次のjqueryを使用して各カテゴリにサブカテゴリが追加されます。コードは次のとおりです。

<div id="nav_menu">
<div id="menu_box">
<ul id="menu_ul">
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
etc....
</ul>
</div>

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

ここで、各カテゴリのサブメニューは次のとおりです...

<li id="1" href="#">category1
  <ul>
  <li><a href="#">subcate1</a></li>
  <li><a href="#">subcate2</a></li> 
  <li><a href="#">subcate3</a></li>
   .
   .
   .
  etc    
  </ul>
</li>

jqueryコードは...このように//ドキュメントの準備ができたときのナビゲーションメニュー

        $(".category").live('mouseover',function(event){
        $("#menu_slider").show();
        var D=$(this).html();
        var id=$(this).attr('id');

        var V=$("#hide"+id).html();
        $("#submenu_ul").html(V);
        $("#menu_slider h3").html(D);   
});
    //Document Click
    $(document).mouseup(function()
    {
     //$("#menu_slider").hide();

    });

    //Mouse click on sub menu
    $("#menu_slider").mouseup(function()
    {
    return false
    });

    //Mouse click on my account link
    $("#menu_box").mouseup(function()
    {
    return false
    });

レイアウトを変更すると、ここでうまく機能しています...私のレイアウト要件に従ってこのように

<div class="container nav_menu">
<div class="sidebar menu_box">
<ul class="menu_ul">
</ul>
</div>
</div> 

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

jquery の機能が動作しない html コンテンツを menu_slider submenu_ul に追加していない...jquery でクラス セレクターに変更した... 1 つの問題

2つ目は..メニューをこのようにしたいです。画像を見て、これを実現する方法を提案してください。このようなメニューはどこのショッピングサイトでも見られるので、うまくいくように努力しています...添付の画像を見つけてください！

添付ファイルをご覧ください。画像1はホームページにあり、デフォルトですべてのカテゴリを表示する必要がありますが、他のページでは閉じる必要があり、写真に示すようにホバー効果で動作するはずです.

image2 これまでに達成したこと。

ナビゲーション メニューの使用方法

今まで作ったもの

4

0 に答える 0