How can I make all sub-menus open when a main menu item is clicked?

Store Design
1

Hello, I want when a customer to click on the main menu item, then all sub menus should be open altogether.

Let’s suppose, a customer wants to view kids collection he/she just click over Kids then both Boys and Girls need to be opened altogether and same for other main menus.

Let me explain again, I want main menu as clickable and the entire drop-down list of sub-menus should be opened as a collection.

My website www.cloudstore.pk

Reference site: https://www.btwonline.com/ (when click on footwear, both men and women collection will open).

Screenshot 2022-11-04 at 3.08.31 AM.png
Screenshot 2022-11-04 at 3.08.31 AM.png1435×659 183 KB

2

Hi @John_Starc
If you want to make like that, you need to create 3 collections
The first collection is Boys, contain products for boy
The second collection is Girls, contain products for girl
And the third collection is Kids, it contains products for both boy and girl

3

That is understood, but main Kids menu should be clickable then

4

@ExpertRookie

5

hi @John_Starc
Just checked your requirement again.
In this case to make the function like exactly your demo. We need to add some custom code to make that.
I think you need to hire an expert, who can help you make the function like you want.

6

Hello! It seems like you want to create a user-friendly navigation experience on your website by having all the sub-menus open simultaneously when a customer clicks on a main menu item. This can help provide a seamless browsing experience and make it easier for customers to navigate through your website.

To achieve this functionality, you’ll need to modify the code of your website’s menu. The exact steps may vary depending on the platform or content management system you are using for your website. Here’s a general guide on how you can approach this:

  1. Identify the HTML or CSS code responsible for creating the main menu and sub-menus. This can usually be found in the template or theme files of your website.

  2. Add JavaScript or jQuery code to handle the click event of the main menu items. When a main menu item is clicked, you’ll need to target the corresponding sub-menu and set its display property to “block” or “visible”.

  3. To ensure that all sub-menus open together, you can loop through each sub-menu item and set its display property to “block” or “visible” as well.

  4. Test the functionality to make sure that when a customer clicks on a main menu item, all the sub-menus open simultaneously.

Please note that implementing this functionality may require some knowledge of web development or the assistance of a developer if you’re not familiar with coding. Additionally, it’s important to consider the impact on user experience and ensure that the design and usability of your website are not compromised by having all sub-menus open at once.

I hope this guidance helps you achieve your desired functionality on your website. Good luck with implementing this feature, and may it enhance the browsing experience for your customers!

I also want to add this to my site but not using plugin because I can’t compromise on site speed.