Making an off canvas menu with RSD foundation

Registered User
304 posts

I just started using RSD foundation a couple of days ago, (after using grinder since beta).
So I thought I'd share my look in using off canvas in the form of a tutorial.
Here is the example:
Off Canvas Menu
That is the final version.
On medium and up screens it's a horizontal menu.
For small screens it transitions to a vertical menu.
The menu icon and off canvas are in fixed position as you scroll down the page.

If you follow the step by step you can make your own.
Then follow along to see how I made the changes to get it to a responsive off canvas.
That is for those of you that want a starting tutorial then add any kind of menu you like.
You could use buttons text links etc. this final version uses a simple RSD UL link.

If you want it done, here is the zip 23.2 KB: Off Canvas ZIP
OR here is the rsd file 76.2 KB: Off Canvas RSD

Registered User
49 posts


Thank you for taking the time to share it.


Registered User
304 posts

Thanks David, it was fun figuring it out.

Here is another version using a off canvas right side slide in with a drop menu.
Off Canvas Drop Menu Example
The rsd file 89.6 KB
Off Canvas Drop RSD
The zip file 22.8 KB
Off Canvas Drop ZIP

Senior Advisor
11,013 posts
Online Now

Nice work! Thanks for sharing! :)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF:
Component sharing for RSD, RFF and RBB:

Senior Advisor
17,827 posts

Thanks dude!
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
Here's my CoffeeCup SCCP Shop with examples of what can be done.
This is a site I built for my work.(RSD)
This is a site I built for use in my job.(HTML Editor)
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)

Registered User
49 posts

Thanks a lot.
Really appreciated.

Registered User
304 posts

Well you're welcome :)
I added some color coding this morning, might make it easier to follow along?
I'll update the downloads later today.
I'll also get to the off canvas drop menu slide in and show you the couple of things to do for that one later too.

Registered User
49 posts

Hi AE,
I followed your instructions and made the menu. It was super easy with the instruction being clear and concise.
The color coding in the text make it very clear where the class, ID, attributes, etc., needed to be added or amended.

Great fun doing it ..... and I also learned more about the way things function in Foundation (and RSD) as a result.

Another great addition to my toolkit of goodies (I will have to get a bigger toolbag soon ... :lol: ).

Well done and, again, thanks for taking the time and effort to share, it's what makes this forum great.


Registered User
304 posts

That's great David, thanks for saying so. This ones a little trickier with the nested UL drop down accordion menu sliding in from the side.

The Side Off Canvas with Drop Menu is updated and has the step by step Tutorial. I'm just going to do ZIP files so the RSD download has been removed.
That is here: Side Off Canvas ZIP download that link is also in the example too.

Registered User
2 posts

Alter Eagle,
Your contributions are inspiring. Any chance to add some drop downs in the Top Off Canvas menu you have in the "Menus and Zips" link in the Side Off Canvas Menu with drop downs? That would get me where I need to go.

In the meantime, I am trying my best with what you have put up already.


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.