Foundation 6 Drilldown

User 2176928 Photo


Registered User
21 posts

Hi, does anyone have any tips on styling drilldown menus in Foundation 6, from within Site Designer?

For example the first thing I am trying to change is the background and font colours on the "Back >" menu item, which uses this foundation css when I look it up in my browser's developer tools:

.drilldown a {
padding: 0.7rem 1rem;
background: #fefefe;
}


https://foundation.zurb.com/sites/docs/drilldown-menu.html

As the element doesn't appear in Site Designer itself, I suppose I'll just have to style it after export, but I figure worth seeing if anyone else has come across this!

Cheers :)
J
User 2176928 Photo


Registered User
21 posts

okay, basically I worked it out. Chuck the CSS in Site Designer's Design-For/Page Manager setting.

Then the "Back" link itself can be modified by adding a data-back-button attribute, to whichever div has the drilldown attribute already.

data-back-button="<li class="js-drilldown-back"><a tabindex="0">Top Menu</a></li>"


This and similar options listed at https://foundation.zurb.com/sites/docs/drilldown-menu.html#js-options
J
User 122279 Photo


Senior Advisor
14,450 posts

I was trying this at the same time as you were working on it, obviously, and here is my wee mockup
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.