Visibility: hidden would do it.

It seems to me that in principle a Vanilla drop menu can be created simply by having the following -

(a) a menu flex container: row, wrap, justify center;
(b) the drop-down containers for the list of buttons with the overflow hidden,
but on hover having: overflow visible, position relative, z-index 1;
(c) buttons in the (b) containers, with the top buttons having different colours etc. from the remaining ones.

I have put a sample RSD file here, ignoring everything except the principles above.

Frank

I think there is one more thing you need; a Close button on the main buttons that becomes visible when they are open. This is because of the mobile phones, where you can't hover. You need to tap instead. I tried just now (iPhone6), and if I have one of the dropdowns displayed, I can only close it by reloading the page. If you have one of the first dropdowns open and want to see the dropdowns of a button below it, you need to reload the page to be able to see it.
Of course, if there are working links on the dropdown buttons, this might perhaps sort itself...

Thanks Inger.

You're quite right. I was just experimenting for a page that has only two drop-downs with a fair number of links in each, and stumbled on the idea of 'overfow hidden' for drop-downs, which I thought might be of interest to others. If time permits I may take a look to see whether the mentioned matter can be solved without adding javascript: I'm not concerned to improve what has already been done with javascript.

Regards.
Frank

I don't have a narrow screen mobile device. I wonder whether making the final button in each drop-down go to the page itself would solve the problem; a close button on the main buttons would, I think, cause problems on screens that do accept hover. Again I've not bothered with styling in this updated RSD file, but am just checking that the principle can work.

Frank

I played a bit with your file (the one you posted yesterday), and I was right in that the tapping problem on mobile phones would solve itself if the buttons have a working link. Look at www.horgenhonning.net/test and click on the first sub-button under the first main button. Haven't done anything to the other ones

Thanks Inger. Yes, that does indeed work. It does depend on a person choosing one of the drop-down items, rather than deciding they want to move to another of the main buttons on the same page.

The ^ button in my latest post's RSD file uses your idea of a link, but links back to the same page, hopefully catering even for the exceptional situaton in the paragraph above. Hopefully it works on narrow screen devices.

Frank

I've just taken a look at your 2nd file (This morning I didn't have time). That ^ button was a good idea. Of course, when the menu is being used on another page than the index, and if someone is using a phone to look around there, the link ^ has to be ammended accordingly.

I seem to be thinking in 'components' all the time, having created a couple of them lately, so I could think of a component consisting of just one main button with a couple of subs, and then, if it's being used, just add it to the page(s), build it out with as many subs as needed, edit the link on the bottom one, duplicate it as many times as needed, and that should be it. But I wouldn't include such a button in my sharing folder, then this is your work, not mine.

Hi Inger.

I stumbled on the notion of the 'overfow hidden' for Vanilla drop-downs with a view to removing reliance on the Foundation framework for some of my pages. I thought it might be of use to others because, for example, menus are a very good place for using Symbols, and Symbols can't be used (I think) for placing javascript and custom.css links to pages - every page has to be updated separately for them. The Vanilla drop-downs via 'overflow hidden' seem to overcome at least that problem.

The concept of my menu is extremely simple, and I have no wish to publish components or to develop the matter myself. If you should wish to use the concept in your sharing folder, whether much as I showed it, or completely rehashed, please don't hesitate to do so - and please don't acknowledge my trivial work on this, as it is as much your work (for narrow screens) as mine.

Thanks for all your help on this.

Regards,
Frank

Hi Frank,
Well, I have started building a menu based on your ideas and building principles, but I'm going the other way, desktop down. I don't know how many people are using Vanilla, but those that I know of, are building desktop down.

I've been playing a bit with media queries to hide the close-buttons for laptops and desktops, where they are not necessary, but the newer mobile devices have such high resolution now, that it is difficult to know where to add a breakpoint for that. I know there is a media query parameter 'handheld', but I can't make it work. Clearly, that would have to be added in the head section in the Page manager. Maybe my syntax isn't correct. Anybody who knows?

I'll post a wee test file in a bit...