How do you add drop-down navigation to the andreas00 template?

I used the template andreas00 to build the site below
http://vps2836.inmotionhosting.com/~btzbuff/

Does any one have a snippet, etc? that they have used to add sub-directory navigation?

thanks,
Daniel

It’s all in the CSS. The only change you’ll need is to change the &level= parameter of the Wayfinder snippet. You get a standard nested unordered list, and your preferred CSS (or javascript if you want to get complicated) just works with that.

Here is where I started with such menus, long before MODx.

http://www.alistapart.com/articles/taminglists/
http://www.alistapart.com/articles/horizdropdowns/
http://www.alistapart.com/articles/dropdowns/

Hi . . .

I am having trouble changing the Wayfinder snippet to pull in the menu pop out (flyout) sub-directory menus. What do I need to add to activate that?

I changed the snippet to

’level’ => isset($level) ? $level : 2,

But nothing is happening. Am I missing something?


This is what the Menu area of the CSS look like . . .


/* Left sidebar and menu */
#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul.avmenu li {display:inline; padding:0; width:150px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;}
#leftside p,.announce p {font-size:0.9em;}



thanks,
Daniel

Hi . . . just checking back to see if anyone has any ideas?

thanks,
Daniel