So, Last night i started to convert my design for a client over to MODx, it’s a simple little Foxy Cart Boutique store with only about 6 products - perfect for Foxycart and MODx. They wanted to originally go with Monster, but i was able to convince them otherwise. So first things first was setting up the Navigation.
The Single Image Rollover effect i’ve been using for these situations can be found here:
http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/
With only a minimal amount of modding i was able to get this up and working in MODx.
1. replacing my hardcoded navigation with Wayfinder
REPLACE THIS:
<div id="nav">
<ul id="navigation">
<li id="nav1"><a href="belts/" >Belts</a></li>
<li id="nav2"><a href="jewelry/">Jewelry</a></li>
<li id="nav3"><a href="contact/">Contact</a></li>
<li id="nav4"><a href="about/">About</a></li>
<li id="nav5"><a href="retailers/">Retailers</a></li>
<li id="nav6"><a href="wholesale/">Wholesale</a></li>
</ul>
</div>
WITH THIS:
<ul id="navigation">
[!Wayfinder?startId=`0`&level=`1` &rowIdPrefix=`navitem`!]
</ul>
I’m using the &level 1 as there are subpages for a few categories that i don’t want to appear in the navigation. and rowIdPrefix to give each list item it’s own specific id. This is nessessary for the single image navigation to function. Since i set the rowIdPrefix to be "navitem" the generated nav sans CSS will look something like this:
<div id="nav">
<ul id="navigation">
<ul>
<li id="navitem2" class="active"><a href="/index.php?id=2" title="Belts" >Belts</a></li>
<li id="navitem3"><a href="/index.php?id=3" title="Jewelry" >Jewelry</a></li>
<li id="navitem4"><a href="/index.php?id=4" title="Contact" >Contact</a></li>
<li id="navitem5"><a href="/index.php?id=5" title="About" >About</a></li>
<li id="navitem6"><a href="/index.php?id=6" title="Retailers" >Retailers</a></li>
<li id="navitem7" class="last"><a href="/index.php?id=7" title="Wholesale" >Wholesale</a></li>
</ul>
</ul>
</div>
Now if you followed the ghetto cooler tutorial at the top of the page, you should have your single nav image and your CSS, just make sure your CSS nav item ID’s reflect the IDs you setup through wayfinder and you should be well on your way to a nice little single image nav using wayfinder. Of course, if you add any new navigation through MODx you’ll need to rework your navigation image and CSS.
The Last thing to do is to get your navigation to stay active on your active pages. This is difficult using the single image effect because just one CSS class like .active won’t do the trick since we’re using background-position to create the rollover effect and each nav item uses a specific bg-position.
What i decided to do was to use the suggestion @ ghetto cooler; to give each pages body a custom id, and use that as a CSS selector - but to do this, without having to handcode each page was to use MODx’s internal template code to generate my page Ids - in my case, since the nav items, for instance "Belts" had multiple pages under them i needed an id that multiple pages could share, so i couldn’t use the PAGETITLE, i instead used the alias, as multiple pages seem to be able to share the same alias. my template code looks like this:
and my new rollover and active css looks like this:
ul li#navitem2 a:hover, body#Belts ul li#navitem2 a{
background-position: XXpx -XXpx;
}
Once that’s all in place, and MODx replaces the template code with the page alias (in this case, Belts) you should have a perfectly nice single image rollover navigation tied to your MODx backend. Enjoy.
ps. I’m rather new to Working with MODx and i’ve gotten great help from everyone here. I know this tutorial probably isn’t the best and only way to do it, and i hope some of you will explain even better methods or if this wasn’t clear enough, ask questions. But i wanted to give a little something back. Enjoy.
-T
