Creating A Fancy Menu In Concrete5 with CSS

I was working on a subcontract for the Canadian Clean Power Coalition website and received a set of design files which included a very colorful side menu. I had planned to make the site using Concrete5 since the client wanted a CMS and C5 is my favourite.

The menu looks like this

As you can see the menu consists of :
the top level links in grey
the current top level in green with a leaf
sub level links in black
and the active page in red.

Once I created the skeleton of pages in the website I can use the auto-nav feature to create the menu. In this case the menu display all relevant subpages.

The actual html generated by the autonav looks like this:

<ul class="nav">
<li>
<a href="/index.php/about-the-ccpc/">About the CCPC</a>
</li>
<li class="nav-path-selected">
<a class="nav-path-selected" href="/index.php/electricity-sector/">Electricity Sector</a>
<ul>
<li class="nav-selected nav-path-selected">
<a class="nav-selected nav-path-selected" href="/index.php/electricity-sector/electricity-terms/">Electricity Terms</a>
</li>
<li>
<a href="/index.php/electricity-sector/how-a-coal-fired-power-plant-works/">How a coal-fired power plant works</a>
</li>
</ul>
</li>
<li>
<a href="/index.php/clean-power-projects-and-technology/">Clean Power Projects and Technology</a>
</li>
<li>
<a href="/index.php/ccpc-members/">CCPC Members</a>
</li>
<li><a href="/index.php/newsroom/">Newsroom</a>
</ul> 

I like to wrap the nav in it's own div with an id, in this case I wrapped the navigation in a <div id="navBar">. Based on this it is an exercise in CSS using child and descendant selectors.

1. The base menu styles

#navBar{width: 180px; margin: 25px 0px 0px 5px; float:left ;font: normal 12px Arial, Helvetica, sans-serif; text-transform: uppercase;}

#navBar a{display: block; text-decoration: none; margin: 10px 0px 10px 20px; color: #999} // grey color
#navBar ul{margin: 0px; padding: 0px};
#navBar ul.nav li{list-style: none; margin-left: 0px;} // remove the list circles

2. The green on state, uses the .nav-path-selected class generated by autonav

#navBar ul.nav > li.nav-path-selected{background: url(images/nav_leaf.gif) 4px 4px no-repeat;} //place the leaf on the list item, note the descendant since the .nav-path-selected is used on both menu levels.
#navBar ul.nav li.nav-path-selected a{color:#090; font-weight:600;} // change text to bold green

3. The submenu only exists when the parent item is selected so i can still use .nav-path-selected class

#navBar ul.nav li.nav-path-selected ul{margin-left:20px;} // indent the sub menu

#navBar ul.nav li.nav-path-selected ul a{color:#000;} // base color of links is black
#navBar ul.nav li.nav-path-selected ul a.nav-selected{color:#C00;} // active link is red

The result is a 2 tier menu with 4 colors and a graphic leaf, sure it looks a little like Christmas but that's what they wanted.