User Tools

Site Tools


phplugins_vertical_navigation

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.

You can see this in action on Daniel's site, or in our demonstration gallery.


Prerequisites

To implementation this modification, you first need to do the following:


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.

Copy this function into your ``phplugins.php`` file:

// Start of page content
function ttg_canvas_top( $style, $path ) { 
   // Encapsulate the main page into my own named div.
      echo '<div id="the-canvas" >';
}
// End of page content
function ttg_canvas_bottom( $style, $path ) { 
   // End of my custom div.
      echo '</div> <!-- #the-canvas -->';
} // END

Now we need to style our navigation to make it vertical. This CSS will get the job done; put it into your custom.css file:

/* for Single-level Navigation
@media only screen and (min-width: 992px) { */

/* for Multi-level Navigation */
@media only screen and (min-width: 1025px) {

	#navigation {
		float: left; /* 'left' or 'right' */
		width: 175px; /* set desired width for navigation */
		}
	#the-canvas {
		overflow: hidden;
		}
	#navigation .mantle {
		background-color: transparent; /* set desired background color for navigation block */
		}
	#navigation .mantle, 
	#navigation .core {
		border: none;
		margin: 0;
		padding: 0;
		}
	p.p-nav, 
	.sf-menu {
		height: auto;
		text-align: left;
		}
	.sf-menu ul, 
	.sf-menu .sub-menu {
		border: none;
		padding-left: 8px; /* set desired indent for sub-menus */
		position: static;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;	
		}
	.sf-menu ul,
	.sf-menu ul li {
		width: inherit;
		}
	p.p-nav a, 
	.sf-menu a, 
	.sf-menu .sub-menu a {
		border: none;
		}

	.sf-menu .sub-menu li a,
	.sf-menu .sub-menu li a:visited {
		border-top: none;
		}
	.sf-menu .sub-menu > li:first-child > a,
	.sf-menu .sub-menu > li:first-child > a:visited {
		border-top: none;
		}
	p.p-nav a, 
	.sf-menu li {
		display: block;
		float: none;
		}

	p.p-nav a, 
	.sf-menu a, 
	.sf-menu .sub-menu a {
		background-color: transparent; /* set background-color for hyperlinks */
		color: #2c2c2c; /* set text color for hyperlinks */
		}
	p.p-nav a:hover, 
	.sf-menu a:hover, 
	.sf-menu .sub-menu a:hover {
		background-color: #f1f1f1; /* set background-color for hyperlink hover events */
		color: #333333; /* set text color for hyperlink hover events */
		}
	
	.drop-caret { display: none !important; }

	} /* min-width: 992px/1025px */

I've commented the styling so that you can easily identify where to make customizations to desired width, color, etc.

At the very top of the styling, I have this:

/* for Single-level Navigation
@media only screen and (min-width: 992px) { */

/* for Multi-level Navigation */
@media only screen and (min-width: 1025px) {

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.

phplugins_vertical_navigation.txt · Last modified: 2013/04/12 04:31 by admin