Side Off Canvas Menu

Right side slide in with a drop down Menu


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

A little tip for working with the Tutorials

From your browser copy the step by step text
Open notepad and paste the step by step into it
Now when you open RSD you can use a diminished notepad window.
From there you can copy/paste the classes, id's etc.

OR in windows 10 what you can do is open 2 RSD projects
The tutorial and a new project.
Diminish everything else except those.
Press the windows key + the right arrow that put one on the right side of the screen, and have the tutorial on the other.
Now you can just focus from one to the other.

I do both, and flip between them as needed.

Add 2 Rows from Layout

The top row will hold any kind of menu you want and a close icon.
The second and following rows / containers will be the page content and we'll add a fixed menu icon in the second rows container.

For this example I set all the rows to be full width.
In Inspector select the top row double click
In Design / Style apply to Type / Dimensions max-width to none

Setting up the Top Row

In Inspector select the top row's column double click to select it
I gave the row a class of top-row and made it a grey color for working in it

Go to content and from text ADD a font icon link I used cross3
Give it a class of icon-cross to style it.
Make it white for regular state and grey for hover, (go back to regular state when done).
From the class drop down box ADD close-button
From Attributes ADD data-close from the drop down
Go down to position you'll see it's now Absolute
Under that is the values.
From left to right they are: top right bottom left, so you can fix it to any position you like.
In the first box on the left (top) change 0.5 rem to 0 px
In the second box (right) change the default 1 rem to 20 px

Now you can't see the column so go to inspector and select the top column
Double click on it to get to Design, now select content / elements.
Go down to the very bottom in Layout and select List Container
Select the top list item container and from element select Text Link
Do that for the second and third list item containers
This will be our Menu when we get to it in changes below
For now go to inspector again and select that top column, double click to go to design.
From the drop down ADD the class off-canvas-wrapper
Go to Dimensions and in the Padding left box (top) change 0 to 40 px
That will put our menu under the closing icon.

In Inspector select the top row, double click
In Classes from the drop down ADD position-right
Then since we don't have multilevel-offcanvas we have to copy/paste that class in there
From the drop down again ADD off-canvas
The whole shabang will now disappear on you.
In id ADD offCanvas
In Attributes ADD data-off-canvas from the drop down
NOTE: To see the off canvas in RSD you have take this rows off-canvas class out and then add it back in after editing it.

Setting up the fixed menu icon in the Second Rows column

Select the second rows column from the inspector or by clicking on it and use that drop down
It should have the class content-column-2, I think?
Anyway from content / elements ADD a font icon link
A little tip here if you have added stuff to that column you can get it to the top (under column) easy by dragging it up inside the inspector.
Select that icon, I used menu5 from the drop down.
For it's Attribute use data-toggle
The Attribute value is the id we used for the top row offCanvas
For regular state white and hover grey, (set it back to regular when done)
To make it fixed to the top go down to Position and select fixed, the right most selection.
In the first box on the left (top) under position change auto to px and use a value of 0
In the second box (right) under position change auto to px and use a value of 20
Those are from left to right: top right bottom left so you can fix it to any position you like.

Use Preview on to see it in your browser

Now preview it in your browser and you'll have a fixed menu icon when clicked a menu will slide in from the right.
In that menu will be an X that will close it or you can click the menu icon to close it.
Now let's make some changes and add a bit more to the menu to make it a drop down.

Making some changes

Let's make the menu section so when we click on the menu icon it doesn't jump to the top and open.
Select menu5 icon from the inspector or by just clicking on it.
What we do for that is change the default link from just a hash tag (#) and add no-link so it looks like #no-link in the Href box.
Also do that kind of link for the top cross3 close icon so it won't jump.
Now preview on and when you scroll down it'll open where you are on the page.

Let's work on the menu

To see that top row in RSD we have to remove the off-canvas class then add it back later
So go to the Inspector select the top row and double click that puts you in design and remove that class

First let's make all the Text Links the same so we don't have to mess with the styles later
Go to inspector and select the top text link we put in earlier and double click to get to Design
In Style apply to Type, set the font and size you want, for regular state white and hover grey (set it back to regular)

The Main Menu Links

Go to the inspector and select the List Container we added earlier
From the drop down ADD the classes vertical & menu
In Attributes select data-accordion-menu
Now so we can follow the subs we'll add, select the top Linked Text
Right click on it / edit text and type in Main 1
The second one Main 2 the third Main 3

The Nested UL Sub Menu Links

I suggest you do save often in this step so you can open it as a recent, just in case, the first time doing this
Now to get the subs in there go to Inspector and select the top List Item Container and double click
That puts you in Design, with it selected, so go to content and from Layout down at the bottom select List Container
Now we have a nested UL. Select that top List Item Container and put a Text Link in it like we did for the Main links
Edit those links to say Sub 1a, the next 2 Sub 1b and the third one Sub 1c
Go to inspector and and scroll through those List Containers until all 3 (sub 1a, sub 1b and sub 1c) are highlighted and double click that
For that List Container ADD 3 classes: vertical menu & nested from the drop down

Now we do that same thing for the other 2 List Item Containers, use the inspector to highlight them it's easy to get lost doing this
Name those subs 2a 2b 2c and 3a 3b and 3c like we did for the others and ADD the classes: vertical menu & nested the same way
Use Undo if you do one before RSD switches over or get a selection wrong

Preview On

Lets do a preview on in your browser.
From inspector select the top row, double click on it and the put the off-canvas class back in we took out to work on it, then use preview on
You can play around with the colors, slide in height & width add other links and stuff. 
For example to have the menu expand it's height when clicked on instead being full height go to the top row double click on it.
In Design / Dimensions change the height from the default 100% to auto.