Multilayer Sidebar Dropdown - Is it possible in Webflow?

Design help General
1

Hi,

I’m in the process of trying to create a side navbar that I can use as a symbol on all pages of my website. The website is for a clothing store selling a large variety of different products and I would like to recreate something similar to this example using webflow (in the top left corner users can navigate different categories)

I have created a test however I have encountered two problems which I hope should be fixable with a workaround however after messing around myself for a few hours I decided to ask here to see if anyone had any good ideas.

Here is my test example so far:

https://thrifty-store.webflow.io/styles

Please note that as it is a test, only the Shop>Mens>Tops>Shirts will work as intended for now.

It works somewhat, however I have two problems with it that I would like to fix.

Problem 1: When I collapse the parent option, other options inside that parent remain open.

For example, if I click Shop>Mens>Tops and then decide I want to collapse the menu by pressing Shop again, the menus will collapse, which is great. However if I press Shop a second time, it will open all the categories within Mens>Tops as they were not closed manually previously. If possible I would like it so that when pressing the parent element, all children within the element are also collapsed and returned to their former state.

Problem 2: When I select a category and the correct page is loaded, the menu reverts back to it’s original state.
Ideally I would like the page to remember the state of what options are currently showing/hiding when transitioning from one page to the next, although I am not sure if this is possible within webflow.

It may be worth mentioning for clarification I will be using this as a symbol on all of my ecommerce pages within my website too, so it would need to function as a symbol on my product and category template pages too.

Here is my read only, although I am in the process of experimenting so the contents of the project may change. The bar I am trying to create is on the Styles page.

https://preview.webflow.com/preview/thrifty-store?utm_medium=preview_link&utm_source=dashboard&utm_content=thrifty-store&preview=047bb88d15c3d441c51c7a9204f14f27&mode=preview

UPDATE: Since posting this I noticed that @PixelGeek has posted a very helpful tutorial on how to do something similar, however I am still struggling due to the complexity of what I am trying to do. In his video he achieves this by using the following custom CSS and JQuery codes:

CSS:
.Category-Div {display:none;}

JQuery:
$(‘.Sidebar-Text.w–Current’).parent().show();

However, due to my website being an ecommerce site I am having problems. Because I want the links to go to my category pages, I am having to set the links up as an external URL rather than a page link within my webflow project. Webflow only lets me set up page links to regular webflow pages and not specific ecommerce pages, as this is what the point of a CMS collections list is for. I seem to be unable to use the ‘Current’ class as I am having to set my links up using external URL’s the link back to my website, rather than using the standard webflow page links.

Unfortunately the ecommerce CMS collections list will not allow me to create subcategories or organise them how I would like, which would mean this option would have to have one huge long list of all my different categories which would look very messy and be inconvenient for customers.

Apologies for the long post but as it is quite a complex thing I am trying to do I wanted to be as clear as possible for everyone to see the problem. If anyone needs me to explain anything again (as I am sure my explanation wasn’t great) then please just ask and I will try to clear it up.

Thank you to anyone who was taken the time to read, if anyone is able to offer advice then it would be greatly appreciated!

1 Like
2

Still struggling with this, is anyone able to shed any light on the situation? I’m sure it must be possible to do with a small amount of custom code.

3

I wasn’t exactly clear on the question here.
Are you asking for how to bind your links to the category page or how to maintain state in the dropdown once you make the jump to the category page?

4

Hi @craiggrella

Thanks for your reply!

I’m trying to have it so that when I go to the desired category page, the links are maintained as they were on the previous page yes.

Alongside this, if possible I am also having it set up so that if the category is collapsed by the user clicking on it, all children categories are also collapsed automatically.

However, due to my website being an ecommerce site I am having problems. Because I want the links to go to my category pages, I am having to set the links up as an external URL rather than a page link within my webflow project. Webflow only lets me set up page links to regular webflow pages and not specific ecommerce pages, as this is what the point of a CMS collections list is for. I seem to be unable to use the ‘Current’ class as I am having to set my links up using external URL’s the link back to my website, rather than using the standard webflow page links.

Unfortunately the ecommerce CMS collections list will not allow me to create subcategories or organise them how I would like, which would mean this option would have to have one huge long list of all my different categories which would look very messy and be inconvenient for customers.

I’m pretty sure it might be possible with custom code but I don’t know anything about that unfortunately.

Any ideas on how I can get this to work would be greatly appreciated!

5

Excuse me if this is too basic. I wasn’t sure if this is what you were after:

you can bind your links to a category page.
See this quick demo site: https://openlebo.webflow.io/

I started with a section.
Then added a collection list and bound that to the ecommerce categories collection.

image
image1498×1126 67.8 KB

That creates a blank structure for collection list wrapper, collection list, and collection item:

image
image496×546 18.3 KB

Inside the collection item I add a link element:

image
image568×658 25 KB

I choose the second icon in for collection page.
Then choose current category because we want the link to be bound to the collection page that represents the current category represented by that link.
Choose get text from then select categories. I chose name to show the category name.

The resultant is a list of categories that link to the category pages.
I only have a few sample product categories but you can see it works.

image
image1910×1374 106 KB

6

Hi @craiggrella,

Thank you for your response, but unfortunately this is not what I am looking for. If I was setting up a website with a few categories then this would work fine, however I am planning on having a very large amount of categories (approximately 100).

When using a collection list, I have to display either all or none of my categories at once, and not only that I would be very restricted on how I would be able to sort them. This would look extremely messy and be very confusing for the customer, so I’m afraid this is not an option.

This is the reason why I am setting up the category links up manually using link blocks and div blocks and then converting to a symbol that I can use throughout my site. This would allow the customer to sort through the multiple layers of subcategories easily without having to scroll through a huge long list to find what they are looking for.

I’ve got it working to some extent as I said, however I would like it to work smoother if possible, eliminating the issues that I referenced in my original post. Ideally something similar to the Eytys website I posted.

I would like to:

  1. Remember the state of the dropdown box when carried on to the next page

  2. When clicked on a parent category a second time to collapse, all children categories within are subsequently also collapsed

7

I’ve come to the conclusion that is (as far as I am aware of) impossible to do solely within the webflow site builder, however I am sure this should be possible with some custom code.

Unfortunately, coding is something that I know absolutely nothing about. Does anyone have any ideas in regards to custom code as to how I could possibly get this working?

Or could anyone point the in right direction as to someone who I could ask who may be able to help?

Anything at all would be appreciated. Thanks for reading.

8

Still stuck on this, shameless self bump.

9

Yeah, sorry i see what you’re saying now.

the eytys site is just setup as a vertical nav.
all those links are stock links to set product categories which each have their own slug. You can see the page reloads to the new address each time.
That’s probably going to be the easiest thing to do.

10

Hey @cccurtis, I don’t see this mentioned in the thread yet. You can nest dropdowns together, you can build on this and use multiple Collections (with filter) for each of the parent dropdown. I’m not sure with request No. 1 but No. 2 should be ok.

1 Like
11

Hi @dennyhartanto,

Thanks for your response! Apologies for the late reply, I’ve been taking a break from this project for a while. I’m not exactly sure what you mean, would you be able to explain a little more in detail?

Thanks!

12

Hi @cccurtis, I just thought you can use the dropdown module to build this. It will solve this problem a less custom code.

The structure will look something like this:
Screen Shot 2020-05-13 at 13.23.51

Just make sure you change the Dropdown List to position: relative

1 Like
13

@dennyhartanto Thank you so much for your help, I’ve managed to get it working and the children lists are collapsing when a parent list is subsequently collapsed, which is great.

However I now have another problem -

If the dropdowns are open, and I click anywhere else on the screen, the dropdowns are all collapsed automatically. I want them to remain open unless the user specifically clicks on the dropdown to collapse it if possible.

Apologies if it seems like I’m nitpicking and being really fussy, I really do appreciate the effort you are going through to help me :slight_smile:

14

I’ve decided to restore my original project to how it was in my original post, and then make a clone of the new method so people can see both methods that I have tried to do this:

Original method (Yellow background, on the Styles page):

https://preview.webflow.com/preview/thrifty-store?utm_medium=preview_link&utm_source=dashboard&utm_content=thrifty-store&preview=047bb88d15c3d441c51c7a9204f14f27&mode=preview

Method: Set up using text blocks, div blocks and link blocks nested within each other, and interactions to open and close the different categories and subcategories.

Issue: When a parent subcategory is closed, all subsequent open categories remain open within the parent (although they are hidden and invisible). When the user clicks to open the parent again, all the children are shown. As described in my original post, I want all children categories to be collapsed when a parent category is collapsed.

Second method, (White background, on the styles page):

https://preview.webflow.com/preview/thriftystore-test?utm_medium=preview_link&utm_source=designer&utm_content=thriftystore-test&preview=3ec864030b9e332ebf9c2c5405096663&pageId=5ebc1ecf94179d6211a59874&mode=preview

Method: Set up using dropdown lists nested within each other

Issue: Fixes the problem of children categories collapsing with parent categories, however creates two new problems. Due to the native behaviour of dropdowns, whenever the user clicks anywhere on the page outside of the dropdown parameters, all dropdowns are automatically collpased. I would like it so that the dropdowns are only collapsed if the user specifically clicks on that category to collapse it.

Hope this explains what I am trying to do a little clearer to any new people reading this thread that may be confused, and the progress I have made so far. I am still not sure if what I am trying to do is possible in webflow without custom code.

15

Hey @cccurtis, happy to help. Looks like you do need custom code to override the built-in Dropdown behaviour, if even possible (I’m optimistic, though).

16

Ah, damn, unfortunately I don’t know much about custom code but I’ll see what I can find. Thanks again for your help.

At this point I’m unsure whether it would be easier to pursue either my original method and see if I can find a way to get the children elements to close, or to use the dropdown method and see if there’s a way to get them to remain open when clicking elsewhere on the screen.

17

Just thought of this when reading your other thread. If you use back your old structure, you can potentially use:

$(".toggle").on("click", function() { //When user clicks any toggle to dropdown
    $(this).children('.toggle').click() //Use script to "click" any other toggles inside it.
});

I tried to find a code to prevent the dropdown to not close, no answer so far.

1 Like
18

Hi @dennyhartanto

Thanks again for your help. At this point I’ve given up and I’ve enlisted the help of someone on Fiverr to assist me with the custom code, so I’ll let you know how that goes :slight_smile:

19

Hi, I’m running into the same issue, were you ever able to solve it?