Foundation 6 Drilldown - Post ID 288800

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,453 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.