How can I create a dropdown and drawer main menu on my website?

[Air0202]

Hello, I would like to have a drop down main menu on my home page and then on the rest of my pages I would like to have a drawer main menu with clinked images. Can someone assist please? 

[AliReviews]

Hello @Air0202 ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to header.liquid file 

Identify the HTML structure of your header menu. It may look similar to this:

<ul class="main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Replace the above HTML structure with the following modified code for the home page:

<ul class="main-menu">
  <li class="dropdown">
    <a href="#">Home</a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown Item 1</a></li>
      <li><a href="#">Dropdown Item 2</a></li>
      <li><a href="#">Dropdown Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Add the following JavaScript/jQuery code before the closing </body> tag in your theme.liquid file:

{{ 'jquery.min.js' | asset_url | script_tag }}

<script>
  $(document).ready(function() {
    $('.main-menu .dropdown').hover(function() {
      $(this).toggleClass('active');
      $(this).find('.dropdown-menu').slideToggle();
    });
  });
</script>

Save and preview

Hope this can help.

Ali Reviews team.
 

[Air0202]

This is what I’m after - please let me know if you can help. Home page: Sunglasses, Glasses; Other pages: Shop, Read.