What is it?

I’ve labeled this menu system the P.E.P. Menu (PrettyMuch Everything Possible) because I used pretty much every variable allowed to create a dynamic, dimensional, sleek looking Wayfinder Dropdown Menu. The 1 Level has a divider image that you can use or change out (nav-line-bg.jpg). The 2nd Level background is an image, you could replace this with CSS3 but for now (or until IE9) im using a background image (sub-nav-bg.png). The 2nd Level also uses an icon gif that is called from the “linktext” field shown as 2C below so please have small icons ready for this menu.

1st Level

The Image shows how I used the fields in MODx to create the chunk template. The Outer or “1st Level” chunk is called “rev.OuterTpl”

<ul id="revNav">
[+wf.wrapper+]
</ul>


Now for the repeating part or the “row”. This chunk is called “rev.RowTpl”

<li [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+] [+wf.linktext+]" [+wf.attributes+]>[+wf.title+]</a><br />
[+wf.linktext+]
[+wf.wrapper+]
</li>


2nd Level

The Image shows how I used the fields in MODx to create the chunk template. The Inner or “2nd Level” chunk is called “rev.InnerTpl”


<ul id="revNavInner">
[+wf.wrapper+]
</ul>


Now for the repeating part or the “row”. This chunk is called “rev.RowInnerTpl”

<li>
<img src="assets/images/[+wf.linktext+].gif" border="0" /><a href="[+wf.link+]" title="[+wf.description+]" [+wf.attributes+]>[+wf.title+]</a>
[+wf.wrapper+]
</li>


CSS

Now that we have the 4 chunks in place to make the menu system. Lets add some style to it.


/* DROPDOWN OUTER TPL ________________ */
#revNav{ margin:0; padding:0; height:75px; list-style: none; position:relative; z-index: 98;}
#revNav li{ margin:0; padding:20px 25px 0px 20px; height:55px; background: url(images/nav-line-bg.jpg) bottom left no-repeat; float: left; font-size:10px; color:#78c1dc; zoom: 1;}
#revNav li.first{background:none;}
#revNav li a{ text-transform: uppercase; font-size:20px; color:#FFF; text-decoration:none; font-family: "FuturaMedium";}
#revNav li a:hover{ text-decoration:none; color:#02212c;}
#revNav li.hover,#revNav li:hover { position: relative; z-index: 99; cursor: default;}


/* DROPDOWN INNER TPL ________________ */
#revNavInner{ visibility: hidden; margin:0; padding:0px 0px 20px 0px; width:180px; background: url(images/sub-nav-bg.png) bottom left no-repeat; position: absolute; top: 100%; left: 0; z-index:100; list-style: none;}
#revNavInner li{margin:0px 10px; padding:5px 0px; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #cccbcb; background: none; width:160px; height:33px;}
#revNavInner li img{vertical-align: bottom;}
#revNavInner li a{ text-transform: uppercase; font-size:20px; color:#545555; text-decoration:none; font-family: "FuturaMedium"; padding-left: 5px; }
#revNavInner li a:hover{ text-decoration:none; color:#008abd;}
#revNav li:hover > ul {visibility: visible;}


Nothing to fantastic just a simple dropdown style. Like I said earlier there are 2 images being used in the backgrounds. Feel free to change them or replace them. I’m also using Futura in this stylesheet, so you may want to edit that.

Wayfinder Call

Here is the template call for my Wayfinder menu with the chunk names as I’ve used them here.


[[Wayfinder?startId=`0` &outerTpl=`rev.OuterTpl` &innerTpl=`rev.InnerTpl` &rowTpl=`rev.RowTpl` &innerRowTpl=`rev.RowInnerTpl` &firstClass=`first` &hereClass=`` &excludeDocs=`1`]]


If you would like to see it in action please visit : http://www.designelitetampabay.com/.

As always, feel free to comment or email me with any questions. Thanks for reading.