Making an off canvas menu with RSD...

User 2823310 Photo


Registered User
312 posts

I actually was going to use this on a site for an off-canvas mega menu kind of thing, but since I won't be able to get to what you want for a while what you can try is use the off canvas part, but change the class position-right to position-top
Then for the menu try putting the dropdown menu in it: http://gordw.com/rsd/example/ul-bar.html or try that with the accordion menu which would still work.
User 2641915 Photo


Registered User
6 posts
Online Now

I was trying to save the below menus as components and was advised to put them in a single row to do so, but I am not able to do this after several tries, doubtless due to my own operator error. Would it take you long to put the following into one row so it can be converted to a component?
www.gordw.com/rsd/offcanvasdrop/offcanvasdrop.zip
Or would the following be easier?
www.gordw.com/rsd/offscreen/offscreen.zip
In any case, if I cannot get this to work I will probably just try to save the menu as a template and carry on accordingly. A component would be nice to have though.
David
User 2823310 Photo


Registered User
312 posts

Well the final version of those is on Step by Step and that is in a row to be made into a component. This is an older post so I think I changed a few things, can't remember now... but one of them was getting it into a row.
Ingers site has a tutorial on making the component too if that will come in handy? That link is on there as well.
User 122279 Photo


Senior Advisor
11,411 posts
Online Now

I'm afraid I will have to update that, it was written before some of the latest features in RSD, RBB and RFF were added. But For now, my first priority will be to get an 80 cm thick layer of snow down from my roof before it cracks.But I'll get back to that tutorial...
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 2641915 Photo


Registered User
6 posts
Online Now

I cannot seem to figure out how to get the links right in this simple offcanvas drop menu I made from your zip file. I think I am making some really basic mistakes. Please see file at www.expomax.com/offcampus022918rev4.rsd and my uploaded www.mediatents.com

David Wright wrote:
I was trying to save the below menus as components and was advised to put them in a single row to do so, but I am not able to do this after several tries, doubtless due to my own operator error. Would it take you long to put the following into one row so it can be converted to a component?
www.gordw.com/rsd/offcanvasdrop/offcanvasdrop.zip
Or would the following be easier?
www.gordw.com/rsd/offscreen/offscreen.zip
In any case, if I cannot get this to work I will probably just try to save the menu as a template and carry on accordingly. A component would be nice to have though.
David
User 122279 Photo


Senior Advisor
11,411 posts
Online Now

The link to your rsd file gives a 404.
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 2699991 Photo


Registered User
1,734 posts
Online Now

David Wright wrote:
I cannot seem to figure out how to get the links right in this simple offcanvas drop menu I made from your zip file. I think I am making some really basic mistakes. Please see file at www.expomax.com/offcampus022918rev4.rsd and my uploaded www.mediatents.com

David Wright wrote:
I was trying to save the below menus as components and was advised to put them in a single row to do so, but I am not able to do this after several tries, doubtless due to my own operator error. Would it take you long to put the following into one row so it can be converted to a component?
www.gordw.com/rsd/offcanvasdrop/offcanvasdrop.zip
Or would the following be easier?
www.gordw.com/rsd/offscreen/offscreen.zip
In any case, if I cannot get this to work I will probably just try to save the menu as a template and carry on accordingly. A component would be nice to have though.
David



The link to the About page works
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2823310 Photo


Registered User
312 posts

Go to the container with the off-canvas class and remove that class
You do that to see it in RSD and you put it back when done editing.
Select one of your sub links and change the # in the Href box to your page link.
For example Custom might be custom.html
By the way those top main links like TENTS wouldn't be a link that would control the accordion dropdown so it's link href would be #nolink
Under those you put the actual links, you have to do that with these foundation menus.
If they don't have a dropdown you can use them as a link.
Like I did for the step by step sites menu.

You are also missing the style to color the arrows in the HEAD
If you look in settings in the download in the HEAD you can copy it there or paste this in:
<style>
/* CUSTOM ARROW COLOR for ACCORDION MENU */

.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
border-color: #959595 transparent transparent;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover:after {
border-color: #fff transparent transparent;
}

</style>
That is a fix for RSD

The step by step tutorial is here:
http://gordw.com/rsd/side-off-canvas.html
To make a component or in this case for a site menu a SYMBOL the step by step is here:
http://tutorials.coffeecup.com/responsi … l#chap-3-2
User 2641915 Photo


Registered User
6 posts
Online Now

Alter Eagle wrote:
Go to the container with the off-canvas class and remove that class
You do that to see it in RSD and you put it back when done editing.
Select one of your sub links and change the # in the Href box to your page link.
For example Custom might be custom.html
By the way those top main links like TENTS wouldn't be a link that would control the accordion dropdown so it's link href would be #nolink
Under those you put the actual links, you have to do that with these foundation menus.
If they don't have a dropdown you can use them as a link.
Like I did for the step by step sites menu.

You are also missing the style to color the arrows in the HEAD
If you look in settings in the download in the HEAD you can copy it there or paste this in:
<style>
/* CUSTOM ARROW COLOR for ACCORDION MENU */

.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
border-color: #959595 transparent transparent;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover:after {
border-color: #fff transparent transparent;
}

</style>
That is a fix for RSD

The step by step tutorial is here:
http://gordw.com/rsd/side-off-canvas.html
To make a component or in this case for a site menu a SYMBOL the step by step is here:
http://tutorials.coffeecup.com/responsi … l#chap-3-2
User 2641915 Photo


Registered User
6 posts
Online Now

That is exactly the advice I needed for the links, as you can see by my revised links at www.mediatents.com I will finish the actual website tomorrow. How do I get to the HEAD you refer to?

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.