0

wp-nav-menu を正しく動作させるのに問題があります。メニュー デザインに css の三角形があるため、メニューが下に配置されているため、メニューに到達する前にメニューが消えてしまいます。これを修正するために jQuery を追加しましたが、メニューを開いてからマウスをその上に移動すると、メニューが開いたままになります。Web サイトは次の場所にあります: https://www.appshc.com/これが私の Jquery コードです。

       $(function() {

        //menu bug fix

        $("li.menu-item").mouseover(function() {

            var submenu = $('.sub-menu');
            $(this).children('ul').show();

        });

        $("li.menu-item ul").mouseleave(function() {

            $("li.menu-item ul").delay(200).hide();          

        }); 
   });

これはワードプレスで生成された HTML です。ひどい書式設定については申し訳ありません 

 <div class="menu-mainmenu-container">
   <ul id="menu-mainmenu" class="top-nav"><
   li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-page        menu-item-460"><a href="https://www.appshc.com/treatment-center-apps/">HEALTHCARE APPS</a></li>
    <li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459"><a href="https://www.appshc.com/business-apps/">BUSINESS APPS</a></li>
    <li id="menu-item-464" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-464"><a href="#">MORE APPS</a>
    <ul class="sub-menu">
        <li id="menu-item-458" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458"><a href="https://www.appshc.com/music-apps/">MUSIC APPS</a></li>
        <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="https://www.appshc.com/church-apps/">CHURCH APPS</a></li>
    </ul>
    </li>
    <li id="menu-item-461" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461"><a href="https://www.appshc.com/mobile-app-blog/">BLOG</a></li>
    <li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462"><a href="https://www.appshc.com/contact/">CONTACT US</a></li>
    <li id="menu-item-463" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-463"><a href="#">GET STARTED</a></li>
    </ul></div>

私にはいくつかのアイデアがありました：

1）ほとんど何も知らないjQuery HoverIntentプラグインを使用してみてください。ただし、良いチュートリアルが不足しています。

2) Jquery コードを削除し、jQuery を使用してサブメニューの周りにラッパー div を追加し、サブメニューを押し下げるマージンを追加してさらに上に配置し、スペースが表示されないようにしますが、親メニュー項目とサブメニューの間に隙間はありません。 .

これにはどのルートをとるべきですか?これに対するより良い解決策はありますか?

4

0 に答える 0