Search code examples
javascriptjquerycsswoocommercenavigation-drawer

Open Mobile menu drawer with custom button click

I added a sticky bottom menu which will be visible only on mobile devices.

enter image description here

Here is the complete code of the widget :

    <head>
          
        <style>
            /* Add some styling for the sticky section */
          .sticky-section {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
            z-index: 99;
            display: flex;
            height: 70px;
            justify-content: space-around;
        box-shadow: 0 0 10px rgba(0,0,0,.11);
              }
          
          .sticky-section-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
            z-index: 999;
            display: flex;
            height: 70px;
            justify-content: space-around;
        box-shadow: 0 0 10px rgba(0,0,0,.11);
              }
        
            /* Hide the sticky section on desktop screens */
            @media only screen and (min-width: 768px) {
            .sticky-section {
            display: none;
            }
            }
            /* styling for the links */
            .sticky-section-bar-nav-grid a {
            color: #000;
            text-decoration: none;
            margin: 10px;
            font-size: 1.3rem;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            }
            /* add font awesome icons */
          .sticky-section .fa {
            font-size: 1.6rem;
            }

        .sticky-section-bar-nav-grid{
            align-items: center;
            border-right: 1px solid #eee;
            display: flex;
            flex: 1 0 auto;
            justify-content: center;
            padding: 0px 20px;
            position: relative;
        }
            
        </style>
    </head>
    <body>

      <div class="sticky-section">
                    <ul class="sticky-section-nav" style="background-color: #fff; border-color: #000">
                       <li class="sticky-section-bar-nav-grid">
                          <a class="sticky-section-icon-1" href="/home">
                            <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/home_1.png?v=1684754596" style="width: 20px;  ">
                                <span class="sticky-section-menu-title" style="display: block;color: #000;">Home</span>
                          </a>
                       </li>
                        <li class="sticky-section-bar-nav-grid">
                            <a class="sticky-section-icon-2" href="/collections/all">
                              <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/category.png?v=1684754597" style="width: 20px;  ">
                                 <span class="sticky-section-menu-title" style="display: block;color: #000;">Categories</span>
                            </a>
                        </li>
                        <li class="sticky-section-bar-nav-grid">
                             <a class="sticky-section-icon-3" href="/cart">
                               <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/shopping-cart.png?v=1684754596" style="width: 20px;  ">
                                  <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                             </a>
                        </li>
                        <li class="sticky-section-bar-nav-grid">
                               <a class="sticky-section-icon-4" href="/cart">
                                 <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/user.png?v=1684754597" style="width: 20px;  ">
                                    <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                               </a>
                        </li>
                    </ul>
      </div>
        
    </body>

I wanted to open the default mobile menu drawer(which opens when we click on the hamnburger icon), when clicked on the category icon.

Can anyone help? I'll really appreciate.

One dev added this script and it worked on one of my website, but its not working on the other website(Same theme, same code, same drawer classes)

<script>
  setTimeout(function () {
       $(document).on("click", ".ad-menu-icon-1", function (e) {
          e.preventDefault()
          $('.menu-drawer-container .header__icon--menu').click();
      });
   }, 1500);
</script>
Solution

  • Try the following jQuery code snippet, replacing #hamburger with the correct selector class or id for your "hamburger item" to be triggered to open the menu drawer:

    add_action('wp_footer', 'wp_footer_script_test_js', 10);
function wp_footer_script_test_js() {
    ?>
    <script>
    jQuery(function($){
        $('body').on("click", ".sticky-section-icon-2", function(e) {
            e.preventDefault();
            console.log("click"); // Just for testing (after remove it)

            $('button#mobile-toggle').click();
        });
    });
    </script>
    <?php
}

    It should work.