Side Menu is very closely related to Overlay Menu, it is equally highly configurable, but instead of overlaying the whole page, it slides out from the left, or from the right and is exactly as wide as you want it to be. Just like Overlay Menu, Side Menu can reflect the RapidWeaver site menu, or it can contain a custom list of links. For this reason, multiple instances of Side Menu can be placed on a stacks page.
The menu initially shows up as a black sidebar on the left of the page, with a black menu button in the top righthand corner. This is a configuration that is often seen on current websites but, not being a mortician, I'm not especially fond of this appearance. So let's take a look at the settings panel to see if we can change it.
The first setting is Unique Menu ID. Necessary because, as already stated, you can have multiple instances of Side Menu on each page. If you only intend to have one instance, you can leave the default ID unaltered.
Use Custom List is the next checkbox you'll encounter. Check it if you want a custom links list. Leave it unchecked if you need a site menu.
Now the party can begin: The Menu Configuration sets out with position – Left, or right – and continues with Font Family. Once again, you'll find a choice of twelve Google Fonts and once again, I ask myself – if Google Fonts are implemented, why can't I just enter the name of the font I want to use? Whatever – I'm sure you'll find a suitable font for your site amongst the twelve.
The Text Alignment may be set to Left, Right, or Centre and the Menu Fill Mode can be set to Pixels or Percent. The default setting is px.
Next follow individual settings for the menu width when displayed on Mobile, Tablet and Desktop. The menu Padding is set in px.
Next up is the Background opacity, followed by Background [content], which may be set to Off, Colour, Gradient, or Image. Images are centred and set to fill the menu height.
Image Cover will set a colour overlay for the background image – a nice effect.
As demonstrated in the screenshot, the Menu can contain a Header and/or a Footer. You may drop any stacks you please in the child stacks, but don't forget that the longer your link list, the less room you will have available. As also demonstrated in the screenshot, when the menu is opened, the site's scroll bar is hidden.
Next up: Dropdown Icons. The Icon Size for the icon that appears next to your link list to indicate sub-pages is set to a default of 24px. The Open Icon Font may be chosen from Google Material Icons, Font Awesome, or ION. Open Icon awaits the code of your choice. The same applies to the Close Icon.
Rotate Icon When Opened has its own settings for Degrees.
Top Level Menu Items has options for Font Size, Subtitle Size (for custom link lists), Padding and Vertical Spacing. Radius refers to the button radius. Then we have Text Colour and Subtitle Colour. While the Text Colour is a solid colour, the Subtitle Colour may be translucent.
The Button Background can be set to Off, Colour, or Gradient. The Gradient settings thankfully only have two colours and produce a very smooth gradient. The Direction can be Top to Bottom, Left to Right, Right to Left, or Diagonal.
Hover Text Colour and Hover Subtitle Colour are set individually, as is the Hover Background.
Sub Level Menu Items automatically inherit the Top Level Font, but the Font Size may be set individually. The Indent may be set either with a default Margin, or a default Padding. Margin and Padding can not be altered in this case.
The Sub Level Menu Items are also set to inherit the Top Level colours, but there is a checkbox to override the settings.
Menu Toggle. Show Toggle Text and Show Toggle Icon are the first two checkboxes. The Toggle Text Font may be set individually from the Item Font, as can the Toggle Font Size. The Toggle Text is set to 'Menu' by default. The same Icon options are available once more and the Font Size for the Icon is set individually from the text.
The Toggle Fill Mode is interesting. By default, it is set to Auto, but the options are Fill (full width), Pixel Width, or Percentage Width. The Menu Toggle is at the top right by default, but the Vertical and the Horizontal alignment may be altered, as may the Margin, Padding and Radius.
Once more we have multiple options for the Background and Hover settings, Plus Border and Shadow options.
I was irritated that the Overlay Menu Close Button couldn't be configured [at initial release]. This is not the case with Side Menu. The close button is as equally highly configurable as everything else. Hats off! ILD always listens to constructive criticism.
Advanced Settings. Here you'll find Show External Data Link Info and Make Parent Links Clickable.
Experimental. As with Overlay Menu, there is an options to Replace Theme Menu. This will not automatically work with all themes, but as mentioned last time, there are other stacks, that offer assistance here.
I liked Overlay Menu very much – it is highly configurable and is different.
I like Side Menu even more. It is more traditional so it will find wider acceptance and, if anything, it is more highly configurable than its sister stack.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.