Step by Step - foundation

Side Off Canvas Menu

An off canvas side panel with an accordion menu from a fixed icon.
RSD foundation 6.4.1


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

Setting up the the Row for the menu

ADD or use the existing row
From Content ADD a Container Div into the column
In Design ADD the class off-canvas-wrapper to it
(that turns off the scrollbars)
In ID ADD offCanvas
In ATTRIBUTES ADD data-off-canvas
Give it a background color so it shows up in the inspector CSS
From Layout Add another column make it span 12
NOTE: You add this row as a component then use it as a symbol
for your site so all your links can be updated in one place

The close icon

ADD a Font Icon Link to the Container Div I used cross3
Give it the class of close-button 
ADD the Attribute data-close 
For it's Href use #no-link
(that stops the page from jumping to the top)
Go down to POSITION and change absolute to static
In TYPOGRAPHY align it right

The menu links

For now we'll just add 4 links one with a drop down accordion
Select the top Container Div and ADD a List Container from Content
In Design change the amount to 4
From Content drag a Text Link into the 4 List Item Containers
Right click to Edit the text links and make the first HOME
Second one DROP MAIN third PAGE 1 forth PAGE 2
Select the List Container from the page drop down and from Design
ADD the classes vertical menu and accordion-menu
In ATTRIBUTES ADD data-accordion-menu
Now Select DROP MAIN and from that drop down use List Item Container
Now go to Content and ADD a List Container from Content for that
In those 3 List Item Containers drag in text links
Edit them to be Sub1 Sub2 and Sub3
Select one those text links and
from the page drop down use List Container
A box will go around those 3 in Design
ADD the classes vertical menu and
if you want to have those inset a bit add nested

The menu icon

Select the second column
From Content ADD a font icon link, I used menu3
For it's Attribute use data-toggle and value is offCanvas
(the ID we used for the second List Container)

Making the off canvas

Select the off-canvas-wrapper Container
You can double click on it from the inspector
ADD the classes position-right and off-canvas
(That will make it disappear from the page)
NOTE: To see the off canvas in RSD you have take the
off-canvas class out to edit it, then add it back in when done.

Preview ON

Do a preview on in your browser to see where we're at
Click on the menu icon and the off canvas will slide in
Click on the cross to close it or
for now you can also click on the page to close it
That's it, the rest is styling.


Making the menu icon fixed

Select the menu icon I used menu-icon-link for the class
(menu-icon is a foundation default so don't use that)
For it's Href use #no-link
Add the colors you want for regular and hover
remember to set it back to regular when done
In POSITION select fixed and I used top 0px right 20px for the values
You can add a Z-index of 999 if you have other Z-indexed elements
Leave it at auto for now

Preview ON

To see the fixed menu icon work add a row
Then make it's column 1500px min-height and use a background color just for now.
Preview on in your browser you'll see the icon scroll down the page
When you click on it the panel slides in over it

The off canvas panel styles

Since we can't see it in RSD go to inspector
Select off-canvas-wrapper Container from Inspector and double click
Delete the off-canvas class for now and click on the position-right to grey it out
You grey out the classes to select the one you want to apply a style to
In DIMENSIONS you'll see 250px width, you can adjust it there
Let's make it 200px for now

The close button style

Select it and change the regular and hover state colors
Remember to put it back to regular when done
If you want it centered you could change
the text align from right to center or even add a right margin
Let's leave it aligned right but add a 10px right margin for now

The menu styles

If you want a background color for the menu links for regular and hover you can do that in the List Item Container
The text link colors you use Text Link and ADD a class
don't use menu-text that's a foundation default, I used menu-link
ADD menu-link to all those menu text links
Now change the regular and hover state colors for the menu
Remember to put it back to regular when done

Preview ON

Select off-canvas-wrapper Container from Inspector and double click
ADD the off-canvas class back in again and preview on

Turn the overlay off and add a left border

When you open the off canvas panel it uses an opaque overlay
I like to turn that off, to do that we make a custom attribute
Select the off-canvas-wrapper Container
Click to grey out position-right and the off-canvas classes
In ATTRIBUTES Select Custom
ADD data-content-overlay with the value false
While we're at it let's add a left border to that panel
Select BORDER and click on the bar left of the center circle
Use 2px from the drop use solid and choose a color
Now preview on and you'll see the overlay is turned off

For fun let's add a transition to the menu text

Select off-canvas-wrapper Container from Inspector and double click
Delete the off-canvas class
Select a text link so we are using the menu-link class
In TYPOGRAPHY let's make the regular state text 15px
In TRANSITIONS select all properties and use apply to all
For function use Ease with a duration of .3
Select Hover state and use Ease with a duration of .3
then change the text size to 16px and bold
Remember to put it back to regular when done
ADD the Containers off-canvas class back again and preview on

Changing the dropdown arrow colors

You can't do this since it's a Foundation style
So we have to add some CSS to the HEAD
I will put that code in the download for you
Change the border color and paste that on your pages

Adding an image or text to the slide in pane

You can just add your text or image below the menu
I used absolute positioning to place it
at the bottom and to center it in the example