web counter
Side Menu
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Side Menu

1LD has enlarged their team. More team members means more capacity which, amongst other things, results in more stacks for happy Weavers. Just a fortnight ago, I reviewed Overlay Menu. Yesterday Side Menu was added to 1LD's range of products.

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.

Side Menu

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.
Thumbs Up!

blog comments powered by Disqus

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

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required