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
Thank you for taking the time to share it.
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
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)
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.
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 ... ).
Well done and, again, thanks for taking the time and effort to share, it's what makes this forum great.
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.
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.