Side Nav Plus

But I never use a Side Nav stack!

Well maybe after seeing what Side Nav Plus can do you may change your mind.

A brief Introduction

The way this page is laid out is probably how you think of a side nav arrangement.

This is a simple 2 column layout with a Side Nav Plus in a Sticky Grummage. Yeah, yeah I hear you say but there are a couple of things that are immediately apparent.

Firstly, the Foundation Side Nav Plus stack supports collapsible accordion style dropdown menus for sub pages. This is something people have been requesting for nearly a year now.

These pages are simply generated from your normal RapidWeaver page list - no drama. But there are several new features and controls that let you selectively display certain pages or groups of page. This finally allows you to make Mega Menu's automatically, but more of that later.

As you may have come to expect, there are absolutely loads of styling options built in to Side Nav Plus, and several novel features that sensibly process lots of different page types to make a consistency styled menu.

Lets file your existing thoughts of a Side Nav and start again

My Image

Side Nav Plus

Features

Expanding Sub-Page Menus

My Image

One click of the Mode button turns the humble side nav into an expanding menu


Toggle Mode

My Image

With Toggle enabled, only one sub-menu at a time can be open

SideNav+ can also strip Heading styles so that your offsite pages do not look different in the menu.


Lots of Styling Options

My Image

Every aspect of the menu area can be styled.

Backgrounds can be color, gradients or images - with or without the zoom effect on this page.


And the big one...

With one click of the stacks Add Child + button you can activate the built in Off Canvas menu system for SideNav.

You don't need to put your page content inside an off-canvas container. In-fact you don't need to do anything.

Simplicity itself

My Image

Resize your browser and you will see the green image background Side Nav + (from the section above) transform into a smart off canvas menu and remove itself from the page body content.


Integrated visibility and
off-canvas

With a vertical navigation you most often want it visible on the desktop for larger screens but in a mobile menu when screen sizes are limited.

SideNav Plus does just this. You can choose to have the navigation visible normally above a breakpoint and in an off-canvas below it.

You can also choose to have the navigation hidden at larger breakpoints, in which case you can use TopBar or another desktop nav for small screens.

My Image

Why Integrated?

Because SideNav Plus' visibility system not only show and hides content, but also allows it to be moved between the main page body and the side bar.


Drop-zones top and bottom

Activate the optional top and bottom drop-zones and you can add extra content to your menus.

Each drop-zone has responsive visibility options so that the extra information is only shown when you want it.

For example you may put extra content that is only shown on the mobile off canvas to replace information from the main page.

Telephone numbers and contact information are ideal for these areas.

My Image

The top and bottom zones can also accommodate a vertical MagicGellan.

Combined site and in-page menus in one simple mobile off canvas