Dawn theme - Drawer Menu with slide out sub menu

Store Design
,
1

Hi there,

I’m trying to recreate the double slide out menu in the video below with code in the Dawn theme. So far, I’ve only been successful in moving the drawer menu from the left side of the screen to the right.

Is there a simple way to create the white slide out sub menu seen below? Just to note, the white menu slides out on hover and will disappear if not hovering. The black original menu obviously appears on click of hamburger menu icon. Anyway, would very much appreciate any help! Thank you! :slightly_smiling_face:

1 Like
2

  1. Locate the code for the main menu in your Dawn theme. This is typically found in the theme’s Liquid files, such as header.liquid or navigation.liquid.

  2. Identify the HTML structure for the menu items you want to have a slide-out sub-menu. It’s usually represented by <ul> or <li> elements.

  3. Add CSS classes or IDs to the parent <li> element of the menu items that will trigger the slide-out sub-menu.

  4. Use CSS to style the sub-menu and define its initial state as hidden. You can achieve this using the display: none; property.

  5. Write CSS code to handle the hover event on the parent <li> element and display the sub-menu using display: block; or visibility: visible;.


  - Menu Item
    

        - Submenu Item 1

        - Submenu Item 2
    
  


.sub-menu {
  display: none;
}

.has-submenu:hover .sub-menu {
  display: block;
}
3

Amazing!

I am trying to recreate this look from zara home: https://www.zarahome.com/

Do you know how to open (slide from left effect) and close the side menu on hover? So the user has not to click on the burger to open it? Also I am trying to open submenus trying to make a kind of collapsible dropdown list.

Thanks for your help!!