As I have received numerous requests to describe how I created my vertical navigation menu, here’s a short post explaining the process.

My web site is based on the CE3 series web galleries by The Turning Gate. One of its features is a powerful framework for PHP extensions, called phplugins. They enabled me to customize the look and feel of my web site without the need to modify any of the original source code.

Pre-requisites

• You have a TTG CE3 Lightroom web gallery
• Phplugins are enabled. If you don’t know what this means, please read this first
• Custom CSS is enabled (link)
• The Masthead needs to be above the navigation:

Setup

I created a small test page where the final result is shown. The theme used is the CE3 Asphalt.

All major components inside the CE3 framework are encapsulated in <div></div> tags. It should have been as easy as finding the correct identifier and applying some additional styles. Unfortunately, I was unable to get it done like this.

Only when I introduced a <div></div> to encapsulate the main page components “the-block” and “the-grid” as a new group was I able to properly control the layout. Here are the two phplugins hooks that do the heavy lifting. This code goes into your phplugins.php file:

// Start of page content
function ttg_canvas_top( $style, $path ) { 
   // Encapsulate the main page into my own named div.
   if (G_STYLE != 'CE3-MOBILE'){
      echo '<div id="my-content" > <!-- #my-content -->';
   }
}

// End of page content
function ttg_canvas_bottom( $style, $path ) { 
   // End of my custom div.
   if (G_STYLE != 'CE3-MOBILE'){
      echo '</div> <!-- #my-content -->';
   }
} // END

Following few lines of CSS make the magic and need to be added to your custom.css file:

/* Vertical Navigation
=================================================== */
@media only screen and (min-width: 991px) {
   #navigation {
      width: 160px;
      float: left;
   }
}

#my-content {
   overflow: hidden;
}

With just these few lines we get a vertical navigation bar that is on the left side of the main content.

With some more CSS, we get a more pleasant look.

/* Vertical Navigation: A more pleasant look
=================================================== */

@media only screen and (min-width: 991px) {
   #navigation .mantle {
      background-color: transparent;
      border: none;
      padding: 24px 24px 4px;
   }
   p.p-nav a {
      border-left-width: 0;
   }
   p.p-nav a:first-child {
      padding-left: 10px;
   }
   p.p-nav a {
      padding-left: 10px;
      width: 80%;
   }
   p.p-nav {
      text-align: left;
   }
}

In the end it looks very simple, but it did take a lot of work to find out how to get here.

Tips & Tricks

• This example shows a left-hand side navigation menu. Do you prefer a right-hand side navigation menu? Nothing easier than this

  #navigation {
     width: 160px;
     float: right;
  }

• If you prefer dynamic sizing of the menu, you can use

  #navigation {
     width: 15%;
     float: left;
  }

• In order to avoid to accidentally overwrite the ‘phplugins’ directory when updating my web site, I renamed it. The path to that directory had to be updated in Lightroom as well.

Donate

Do you like my breadcrumbs? Do you want to use them on your site? Please show your appreciation by donating to my pizza&wine fund. This helps keep me motivated to post other TTG CE3 related customizations.