RSD TUTORIALS

Step by Step - foundation

Dropdown Menu

A horizontal UL dropdown bar menu for medium and above.
A hidden accordion style menu that opens from an icon for mobile.
RSD foundation 6.4.1


Colors

Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

The set up on a new foundation project

Open a new foundation RSD project
For this UL bar menu we'll use the default 1200px wide column
You can always add a header above it later or make it full width
Go to Layout and add a second column to the existing and make it 12 spans

Adding the icon for the accordion menu

Select the top column give it a class of icon-column
In DIMENSIONS set the left and right padding to 0
So the accordion menu will show below that icon column on small screens
also give it a height of 50px
ADD the ATTRIBUTE Data Responsive Toggle
ADD the attribute Value menu-ul
(menu-ul is the ID we will use as a target, the icon is the trigger)
Go to content and place a Font Icon Link to that icon-column, I used menu5
Give it the custom class menu-link
(don't use menu-icon that's a foundation default class)
For it's link use #no-link that will stop it jumping to the top
ADD the ATTRIBUTE Data Toggle and
ADD the attribute Value menu-ul
Go to POSITION and select fixed
For the top value use 0px and the right value 10px
So it's always above anything on the page change the Z-index
from auto to no unit and use 1020
(1020 is above other foundation things like the image slider)

Adding the UL and making it a foundation menu

Select the second column and give it the custom class of menu-column
In DIMENSIONS set the left and right padding to 0
Go to background and for now use #cccccc you can change that later
Go to content and add a List Container and we need to add classes in this order
From the drop down ADD dropdown vertical medium-horizontal and menu
Then finally so we can style it ADD a custom class menu-container
Give the container the ID of menu-ul
Add the number of elements you want for your menu, we'll use 5
Go to content select the top List Item Container and drag a text link
Double click on the text link and give it the custom class of menu-link
Do that for the other 4 List Item Containers using the menu-link class

Making the UL an accordion on small screens

Select the menu-containers List Container
If you drag it past the first breakpoint it'll now go horizontal
Set it back below the first breakpoint again
From the drop down ADD the ATTRIBUTE Data Responsive Menu
For it's attribute Value ADD accordion and medium-dropdown (copy/paste)

Adding the drop down sub menus

So now we have a UL an unordered list with 5 LI which are list items
Select one of the linked text List Item Containers
You can do that from the drop down on the screen by clicking on the linked text
With the List Item Container selected go to Content and select List Container
That adds another UL that holds the sub menu list items
Use the amount of elements you need, we'll stay with the default 3 for this
Go to Content and select the top List Item Container and put a Text Link in it
Since we also want those styled the same use the class menu-link like we did on the main LI
Do that for the other 2 Lst Items and so we don't get lost rename them sub1a sub1b and sub1c
You do that by selecting the text link then right clicking and using edit text
Select that List Container again
You can do that on screen by selecting sub1a and from the drop down use the top List Container
it'll have the class menu-container we added

A box will go around those 3 subs then ADD the classes from your class list
by clicking on the class box and use vertical and menu that we used before
Now let's do that again for one more Sub Menu
So select another Linked Text from the on screen drop use List Item Container
Go to content and add another List Container and do the same for that one with the class menu-link for the text links
This time name them sub2a sub2b and sub2c and then use the same classes vertical and menu on the List Container
Make sure the box is around those 3 subs
NOTE: When you make a sub menu that top main link needs a #no-link
If you link that to a page the accordion can't be clicked to open it
I haven't found a repair to make those open on hover for foundation other than a sub menu toggle that only works on the arrow
In my opinion no one would figure that out and end up on a different page first

Preview ON

If you preview in your browser and drag it over to a small screen
you'll see the icon menu icon toggle the accordion

CUSTOMIZING THE MENU

The fixed accordion and space around options are also in the ZIP file

Preparing to make the accordion Menu fixed

Since we want that accordion menu on small screens to open where the
user scrolled down to we'll give it a fixed position
So to see that for this example we'll add a couple of content columns
Go to Layout and add a row
Select the column and give it a class of column800
In DIMENSIONS make the min-height 800px
From Content drag in a header3 and a long paragraph
Select that column and duplicate it
Now we have some content to see the scroll, you can always delete them later
If you previw ON you'll see the accordion opens at the top for small screens

Making the accordion menu fixed

Select the menu-column and make sure the slider is below the first breakpoint
Go to POSITION and select fixed
Since we want that opening below the icon for the top value use 50px
Leave the rest on auto and make the Z-index no unit 1019
Select one of the menus text links with the class menu-link in the regular state
Go to background and for now use #cccccc
Make the text color #000000
While your in there you'll see the padding, that is where you change the size
of those if you want to later
Change the state to hover and make the background #333333 for now
and the text color #ffffff
We are going to use those colors to fix something later
remember to set it back to the regular state
Preview ON you'll see the horizontal is fixed too but that's next
On small screens you'll see the menu pop in over the content on scroll
NOTE: On small screens the default # (hashtag link) will make the click to open
top accordion link jump to the top so you need to put in #no-link
and if you use a page link it'll go to a page rather than opening

Working under the ACCORDION menu in lower break points in RSD

In RSD on the low breakpoint the accordion covers the top of the page
To get around that move the slider below the lowest breakpoint
On the page from the dropdown select Column it'll have the class menu-column
In Design go down to POSITION and change Display Block to None
That will make it disappear while you work on your page
Before you save go to the lowest breakpoint change the menu-column back to Display Block
RSD will remember those settings so you won't loose any of the menu design

The horizontal menu sticky or normal (static)

NORMAL (the menu scrolls with the page)
If you want it to stay in a normal static position
Move the slider past the first breakpoint for the horizontal menu
Select the menu-column go to POSITION and change the top value back to auto
and the position back to Static
Remember to put the slider back below the first breakpoint

STICKY (the menu sticks to the top when you scroll)
This effect is on the example page but not in the download
Move the slider past the first breakpoint for the horizontal menu
Select the row that holds the menu ADD the custom class sticky-row
go to POSITION and change it to Sticky and change the top value to 0px
To work under it you can change it to static then back to sticky when done
Remember to put the slider back below the first breakpoint

Aligning the Horizontal Menu there are a few options

LEFT
The default is a left aligned menu you don't need to anything for that
I would still change the float to none and use Flex Start in POSITION
CENTER
Move the slider past the first breakpoint for the horizontal menu
Select the List Container and grey out all classes but menu-container
In POSITION change Float left to none and Flex to Justify Center
RIGHT
Move the slider past the first breakpoint for the horizontal menu
Select the List Container and grey out all classes but menu-container
In POSITION change Float to none right and Flex to Justify Flex End
SPACING
There are two spacing options both make the menu look centered
Move the slider past the first breakpoint for the horizontal menu
Select the List Container and grey out all classes but menu-container
In POSITION change Float left to none and Flex to Justify Space Between or Space Around
Space Around is the one I used in the example and download

Making the Horizontal Menu so the List Items are full width

Instead of having the UL LI have spaces you can make those fill the space
Move the slider past the first breakpoint for the horizontal menu
Select the List Container and grey out all classes but menu-container
In POSITION change Float left to none and Flex to Justify Center
Select the first text link and from the drop down select List Item Container
Add the custom class full-width-li
Go down to FLEXBOX and change Flex Grow to 1
Now add the full-width-li class to each of your List Item containers
Select the text link with the menu-link class so we do all at once
In TYPOGRAPHY align one of those text elements to center

Some custom CSS for RSD drop downs

In the download if you look in Settings in the HEAD
You'll see this custom CSS
By the way when you paste in the HEAD click in keywords and go
to layout then back to settings to make sure it got pasted
then use preview ON to see the changes

<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 #000;
min-width: 100%;
width:auto;
}
/* MENU ACTIVE LINK COLOR */
a.link-text.menu-link.active {
color: #fff;
background-color: #000;
}
</style>

As of build 2.5-2332 and foundation 6.4.1
The DROP COLOR REPAIR fixes the top List Item color
when you have the drop down sub menus selected from the default blue
color is the menu-link text and arrow you change the hex value #ccc
To match the color you are using you can copy it from your palette
background-color is the color you used for your menu-link
The 2nd part is the same but for the hover effect when the cursor is on it

DROP SUB PANEL CUSTOMIZING is for things I like to control
The subs border size type and color
min-width is to make them match the top menu size
and width auto is so they match the longer text links
you can just delete those two if you want the default 200px width
you can add text-align:center; to change from the default left align
You can also delete that or the whole custom part if you like

MENU ACTIVE LINK COLOR is for the dynamic link color sccript
Most menus change the link color for the page you are on
That is so your visitors can tell from the menu if you have the same header
This CSS works with the script you add to the footer (below)
You can add any style you need to in that to match your menu

Dynamic or auto changing the menu link for the page

This is the script to change the menu style for the page you are on
It will find the pages link it's on and add the active style automatically
so you only need to do this once with no changes needed
It gets the style from the CSS above
Go to Settings in Footer on each page paste in this script
NOTE: In RSD there is a bug where you have to paste then click in
another section like keywords for it to save. What I do is paste
the click in another section then go to layout and back to settings
to check if it actually is done right.

<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>

If you are working with build 2.5-2309 or earlier

You will also need to add a CSS repair for the accordion arrow colors
Copy paste this inside the style tag at the top above the DROP COLOR REPAIR

/* CUSTOM ARROW COLOR for ACCORDION MENU */
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
border-color: #000 transparent transparent;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover:after {
border-color: #fff transparent transparent;
}

As as of build 2.5-2309 and foundation 6.4.1
the accordion arrow colors need a CSS fix from the default blue
#000 is the arrow color that matches your normal state and
#fff is the hover color, you can copy paste those from your palette