Making an off canvas menu with RSD...

User 2823310 Photo


Registered User
312 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
User 2815606 Photo


Registered User
50 posts
Online Now

NICE !!

Thank you for taking the time to share it.

David
User 2823310 Photo


Registered User
312 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
User 122279 Photo


Senior Advisor
11,242 posts
Online Now

Nice work! Thanks for sharing! :)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 187934 Photo


Senior Advisor
18,025 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.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 84349 Photo


Registered User
53 posts

Thanks a lot.
Really appreciated.
User 2823310 Photo


Registered User
312 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.
User 2815606 Photo


Registered User
50 posts
Online Now

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.

David
User 2823310 Photo


Registered User
312 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.
User 2641915 Photo


Registered User
6 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.

David

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.