Table of Contents

Vertical Navigation

Photographer Daniel Leu recently launched his new CE3 website, combining stunning imagery, solid implementation of CE3 plugins, and some excellent customizations via PHPlugins. Those customizations have generated some interest in our forum, and Daniel has been good enough to share his work with other users.

One of those customizations is a responsive, vertical layout for the navigation menu, visible below on the left side of the page layout:

Daniel has published a tutorial on his blog to share how he created this navigation. His solution is elegant in its simplicity and worth checking out, but only applies to the CE3 framework's single-level navigation layout. Below, I have expanded upon Daniel's modification to broaden its potential for implementation, allowing vertical navigation to be used in both single-level and multi-level layouts.

Both implementations – Daniel's original work, and our expansion thereof – are responsive, allowing galleries and pages to fall back on the standard layout navigation on small displays, such as on tablets and mobile phones. This is shown in the image below.

Prerequisites

Implementation

First, we encapsulate “the block” and “the grid” with a container. This allows us to easily move them to the side as a single element. These functions wrap them in a <div> element with the ID “the-canvas”, that we'll use later in our CSS.

Depending on whether you're setup for single-level or multi-level navigation, activate the appropriate line to start the CSS. Delete or comment-out the @media line that you don't need. Above, the multi-level @media instruction is active by default.

Credit

This modification was made possible thanks to the work done by Daniel Leu. His original implementation is brilliant in its simplicity, and not the sort of thing I would have thought to do. If you'd like to show thanks to Daniel for his work, or encourage him to do more, he accepts donations on his site. Hit the donation button on his original tutorial to how your appreciation and to keep the man in pizza and wine.