wayfinder vertical menu problem

44 Posts

sharadshailly Reply #1, 16 years, 1 month ago

hi,

I tried a lot making this vertical menu but not getting the right design huh

Here is my code for the vertical menu:


         <div class="span-5">
                 <div class="verticalmenu">
                        <div class="roundedBoxHeader">Head title</div><!--title of menu-->
                        <div class="roundedBoxContent"> <!--it is just a box-->
                            <div class="menu">menu item 1</div>  <!-- these are menu items-->
                            <div class="selected">menu item 2</div> 
                            <div class="menu">menu item 3</div>
                        </div>
                 </div>
        </div>

        <div class="clear"></div>

The modx tree directory structure in modx manager is:

parent resource (all of the following 3 vertical menus to be shown on this page)
menu title 1 (head title of vertical menu 1)
menu item 1a
menu item 1b (these are menu items)
menu item 1c
menu item 1d

(first vertical menu to be shown on all the above 4 pages)

menu title 2 (head title of vertical menu 2)
menu item 2a
menu item 2b (menu items)
menu item 2c
menu item 2d

(second vertical menu to be shown on all the above 4 pages)

menu title 3 (head title of vertical menu 3)
menu item 3a
menu item 3b
menu item 3c
menu item 3d

(third vertical menu to be shown on all the above 4 pages)

Can you please advice on how to divide the above vertical menu code into "wayfinder" templates (outer,inner,innerrow, and all) and how I could call "wayfinder" on each of these resources and also on the parent resource so that I get the right design and desired tree structure?

Complete help would be highly appreciated!!! grin

thanks.........

☆ A M B ☆
894 Posts

benmarte Reply #2, 16 years, 1 month ago

Wayfinder menus work based off of unordered lists (ul) you are using divs that’s why its not working.

Read this it shows you almost everything you need to know about wayfinder.

Good Luck

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 16 years, 1 month ago

It can use divs (or anything else you want), but the custom chunk tpls need to be carefully crafted to generate the desired output.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

44 Posts

sharadshailly Reply #4, 16 years, 1 month ago

It’s not that my menu is not working, in fact it is working the way it should but the problem is my design is getting slightly disturbed.

Can you provide me with a good link on the working of wayfinder templates.

793 Posts

ottogal Reply #5, 16 years, 1 month ago

As was already said, Wayfinder uses unordered lists by default. So it would be a good idea to replace

<div class="verticalmenu"> ... </div>

by

<ul class="verticalmenu"> ... </ul>

and all the

<div class="menu">menu item X</div>

by

<li class="menu">menu item X</li>

With [[Wayfinder?]] you would get the wanted <ul>-list, but without the classes. These are assigned using the parameters &outerClass for the <ul>s and &rowClass for the <li>s; so the Wayfinder call has to be

[[Wayfinder? &outerClass=`verticalmenu` &rowClass=`menu`]]

In the tutorial of kogondo you will also find how to assign the class "selected" to the active menu item.
Like sottwell said, you could also keep the <div>s, but then you had to replace the default Wayfinder templates and use the parameters &outerTpl and &rowTpl...

249 Posts

cyclissmo Reply #6, 16 years, 1 month ago

http://www.cssplay.co.uk/menus/

I get a LOT of inspiration for menu design from this place

lo9on.com

MODx Evolution/Revolution | Remote Desktop Training | Development