Note: Build 2332 dropdown menu CSS...

User 2823310 Photo


Registered User
312 posts

In my dropdown menu tutorial, I'll update the tutorial but for a heads up.
As of build 2332 the accordion CSS repairs for the arrows are no longer needed
Adding the class dropdown is no longer needed on the container in RSD.
I would still add it anyway since that may come up in future foundation updates,
like they suggest here: http://foundation.zurb.com/sites/docs/d … -menu.html
and here: http://foundation.zurb.com/building-blo … p-bar.html
That class is missing on the coffeecup step by step.

In the HEAD add this style to repair the menu top links colors when the dropdown panel is active.
<style>
/* DROP COLOR REPAIR */
.dropdown.menu .is-active > a {
color: inherit;
background-color: inherit;
}
</style>
Inherit now works for getting the colors you are using in RSD so there is no longer a need to add the specific hex colors. The problem with it reverting to the default blue is still there though. That CSS will repair it.
User 2823310 Photo


Registered User
312 posts

Okay, well these are the repairs for build 2332 accordion to drop down menu.
I found inherit doesn't work when you do it from scratch so back to the old way to fix them.
I would still add the missing dropdown class from the coffeecup tutorial though
I'll update my step by step tutorial with this in a few days...

Also I wrote a jQuery fix for the active style since we use these with a RSD symbol
That way your visitors can use the menu to see which page they are on, it will automatically change the main menu link style for each page.

On each page paste this in the HEAD

<style>
/* DROP COLOR REPAIR */
.dropdown.menu .is-active > a {
color: #ccc;
background-color: #000;
width:auto;
}
.dropdown.menu .is-active > a:hover {
color: #fff;
background-color: #000;
}
/* DROP SUB PANEL CUSTOMIZING */
.is-dropdown-submenu {
border: 1px solid #f8b003;
min-width: 100%;
width:auto;
}
/* MENU ACTIVE LINK COLOR */
a.link-text.menu-link.active {
color: #f8b003;
}
</style>

CSS:
DROP COLOR REPAIR
Fixes the menu link colors and background colors from the default foundation blue. You just change those with the hex colors you are using
DROP SUB PANEL CUSTOMIZING
That is for styling the drop down menu panels you can add in the css you want to use. The width styles will make the dropddown panel match the main link width when possible but still expand it if needed
MENU ACTIVE LINK COLOR
That's the style of the main links color so your users can tell which page they are on from the menu. You can add a background or border etc. in that css to match what your menu style is

On each page paste this in the FOOTER for the active fix
This doesn't need to be changed it's written to do it dynamically for you.

<script>
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("a.link-text.menu-link").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
</script>
User 2823310 Photo


Registered User
312 posts

Well I don't know if anyone uses these but I finally got a chance to update the step by step tutorial for building the accordion to dropdown menu for build 2332 with all the repairs.

Just in time for a new release :lol: so hopefully it won't effect anything else. :rolleyes:

If you use the step by steps, remember to refresh / reload your browser to see the new updated tutorial & example pages (if you haven't set up yours for history).

The links in the signature below.
User 2823310 Photo


Registered User
312 posts

Well got good and bad for the new build 2349... still need the CSS fix for the dropdown, but it still works fine when I ran the test....

But good news is sticky (a fairly new css position code) has been added so we can implement it inside RSD.
Makes for an easy way to stick a menu for example for a standard 1200px site without the need to go full width like when using fixed position (in foundation). More on it here:
https://developer.mozilla.org/en-US/doc … S/position

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.