modxhost menu

15 Posts

Josge Reply #1, 16 years, 11 months ago

Hi all,

i’ve used the modxhost template as base for my own template.

In that template they use wayfinder to create the menu with some javascript and CSS.

The basic menu there uses only two levels : main and one sub. For my site i need three levels 1, 1.1 and 1.1.1.

Has anyone done this already and willing to share?
Or has anyone got a simular menu?

thanks

884 Posts

sinbad Reply #2, 16 years, 11 months ago

saw this yet?
if i get u right u need to set &level

http://www.muddydogpaws.com/development/wayfinder/parameters.html

15 Posts

Josge Reply #3, 16 years, 11 months ago

Hi Sinbad,

Thnx for your reply.

Unfortunatly setting the &level doesn’t change a thing, even if i set the level to 1 or 2.
So i guess that the javascripts have something to do with that:

manager/media/script/mootools/mootools.js
assets/templates/tvb/drop_down_menu.js
manager/media/script/scriptaculous/prototype.js
manager/media/script/scriptaculous/scriptaculous.js
and
moo.fx.js

i find it extra strange that when i modify the wayfinder call to only one level, the second level still appears

18 Posts

mk03060 Reply #4, 16 years, 11 months ago

I’m having the same problem so I’m glad you started this thread. I also set the level and that didn’t work. I’ll keep looking and post if I find the solution.

18 Posts

mk03060 Reply #5, 16 years, 11 months ago

According to the WayFinder 2.0 snippet, the default is 0 anyways, which would return all levels.

2,310 Posts

bunk58 Reply #6, 16 years, 11 months ago

It’s quite possible to have a three level menu, but you need the correct CSS to make it work.
Visit http://crickweb.co.uk and look at the dropdown CSS file.
Although it only has two levels currently I have had three levels working.
My snippet call is

[!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRow` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` &outerClass=`menu` &cssTpl=`wfStyle`!]

Also for IE you need

<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
</style>
<![endif]-->

in your template (with the .htc file in the correct folder)
If you need the wf chunks let me know and I’ll post them.

David

15 Posts

Josge Reply #7, 16 years, 11 months ago

I think i found a way to do it with the original menu in the modxhost template.

Stupid that i didn’t look at that earlier but this is what is going on:

the wayfinder call and the used javascript actually do build the right lists so the third level is in the code.
But the CSS doesn’t cover the third level and doesn’t display it.

So i’m going to adjust the css and try if i can get that running. If i do, i’ll post it ofcourse.

15 Posts

Josge Reply #8, 16 years, 11 months ago

it wasn’t the css. it is the javascript.
the script is only built for two levels and my javascript knowledge is not good enough to fix it.

the third level items are disply:none and stay that way.

So ik guess i’m gonna try your way david, could you post the chunks please?

2,310 Posts

bunk58 Reply #9, 16 years, 11 months ago

wfInner

<ul>
    [+wf.wrapper+]
</ul>

wfOuter

<div[+wf.classes+]>
    <ul>
        [+wf.wrapper+]
    </ul>
</div>

wfParentRow

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

wfRow

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

wfStyle

<link rel="stylesheet" media="all" type="text/css" href="assets/templates/default/dropdown.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/default/dropdown_ie.css" />
<![endif]-->

Any problems let me know!

David