Hi Everyone
I don't want to intrude too much here but I have made a similar sort of menu, sort of like the example on codepen all within Site Designer, no HTML, no outside CSS or JS dependency, totally within SD, all elements can be styled according to wishes.

A link to the forum thread https://www.coffeecup.com/forums/website-design-and-development/menu-similar-to-drilldown-on-codepen// for a short demo if anyone following the progress of this thread wishes to have a bo-peep can hop along see what can be done within Site designer

Hello Again
I have done another one
This is really a drilldown, like the one on codepen,,, BUT this time using a readymade navigation component from the library, which means that ALL the styling (colours animations etc etc, are achieved within site designer, AND can be previewed (although it's better to preview in a browser I think)

The problem with the one that Preben found and was trying to use is that it was made a fair while ago, the foundation classes/JavaScript is out of date, and the new foundation JavaScript (CSS) was overriding the stuff on codepen.

I have to say though, that it does involve quite a bit of fiddling about, & really isn't for the faint-hearted.

I will put up a demo and a step by step video shortly, (maybe even a couple of episodes needed)

Here is a quick looksee at the component working

https://youtu.be/BAGno_NXJj4

ps the link to the previous(in the other thread) demo no longer works because this version is more in keeping with the issue

Wayan, your drilldown on Youtube looks fantastic and just like what I am looking for. I have the neutral Foundation web components from Coffeecup installed, but cannot see how I can use any readymade navigation component from the library to make a drilldown. I would love to know how you have made it within SD.

PS when you say about the codepen https://codepen.io/rafibomb/pen/jmROWa that "the foundation classes/JavaScript is out of date", does that mean that the documentation on https://get.foundation/sites/docs/drilldown-menu.html is also out of date?

I would imagine so I haven't looked

AHH well you see that's the trick being able to see things that others cannot, I will do a step by step tutorial to show how it's done later today, but it is intense and not for the faint of heart

Here is the first of the step by step tutorials

https://rsdtutorials.asia

Follow the link to "The Class Rooms Are Open"

Part 2 tomorrow

If preferred I can send the tutorial video (mp4) so you can watch it anytime as many times
as you need.

That's good, thank you, but my first challenge is that I don't have the "toggle then flex bar". I have attached a screenshot of my components. How do I get the "toggle then flex bar"?.

I have no idea if the neutral components are overriding the normal components that come as standard with site designer seems strange to me.