Streaming live at 10am (PST)

Creating an Accordion Menu


#1

Hi all!
New to webflow and this board... but I was wondering how to recreate a kind of dynamic drop down list from this website: http://www.arch.columbia.edu/programs
...the nav bar on the left, where clicking on a piece of text drops or folds down another set of options. I want to do this in my own site within a section!

any help would be greatly appreciated!

Aiden


#2

This is called an accordion menu. You can achieve that, I made an example here:

http://sab.webflow.io/vertical-2-levels-accordion-menu

You can edit and/or duplicate this entire site to analyze how the menu is done.


#3

exactly what I was looking for, thanks! Now to ask the obvious question, how do I copy into my own site? smile


#4

You don't. Seriously, you don't ツ I know it can be hard to process, but copying html+css from a site to another is not an obvious thing. What to do with class names conflicts? etc...

So you can look how it's made and redo it in your own project.


#5

Class names conflicts? the same as Flash used to do, ask the user if they want to override them on import


#6

There's a world of difference. Flash compiles, HTML is interpreted.

There's a limit to "if it works then it's ok". HTML/CSS code needs to be thought in advance to be sustainable, maintanable. It's "easy" to thing of a system that adds unique IDS to classes so there are no conflict. But first, you say goodbye to any optimization, and what happens when you copy a bunch of things that are a mix between original and pasted, to paste it again on another site, and then another site? Append the classes again, then again, then again? It may seem to be feasible but you would'nt want to be the developer responsible of this.


#7