Wayfinder + CSS menu accordion style

☆ A M B ☆
453 Posts

Mproject Reply #11, 17 years, 11 months ago

I’m totally lost right now....

Tried alot of accordion stuff... and in the end stuck with always expanded menu sad

Can somebody help me out? Really need some fast help because my boss will kill me rolleyes

BASE - Web Design Studio
MODX Ambassador

Website

2,314 Posts

anonymized-26931 Reply #12, 17 years, 11 months ago

here’s a tutorial of a modx mootools-accordion integration (google translated):
http://translate.google.de/translate?u=http%3A%2F%2Fwww.partout.info%2Fakkordeon-menu.html&hl=de&ie=UTF-8&sl=de&tl=en
hope this will help, cheers, j

☆ A M B ☆
453 Posts

Mproject Reply #13, 17 years, 11 months ago

Quote from: AHHP at Oct 31, 2008, 01:08 PM

use &parentRowHereTpl and &parentRowTpl parameters, create template like this:
<li[+wf.classes+]><span ...... >[+wf.linktext+]»</span>[+wf.wrapper+]</li>
all parameters with exapmples exist in wayfinder documentation (assets/snippets/wayfinder/wayfinder.documentation.html)

[attach your images here too please]

@AHHP: you are the closest in what I’m trying to get! Thanks for everything by now....
I somehow managed to achieve that I click on the main category, but it won’t expand me subcategories until I click on it.

I must put CSS class expandfirst (as mentioned here) to the unordered list, but my parentRowHereTpl is <li> tags undecided

Aaaaaaargh... only few more steps rolleyes

BASE - Web Design Studio
MODX Ambassador

Website

1,390 Posts

kongondo Reply #14, 17 years, 11 months ago

Put the expandfirst class to your &outerTpl

<ul class="expandfirst" >[+wf.wrapper+]</ul>

and include a call to this in your WF snippet call

&outerTpl=`YourOuterTplName`

Maybe there’s a better way of achieving this...(after all, it’s monday wink

)

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
453 Posts

Mproject Reply #15, 17 years, 11 months ago

Already did that...

outerTpl:

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

and my WF call:

[!Wayfinder? &startId=`0` &level=`2`&rowIdPrefix=`Menu` &jsTpl=`jsTpl` &cssTpl=`cssTpl` &outerTpl=`outerTpl`&rowTpl=`rowTpl` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`&parentRowTpl=`parentRowTpl` &parentRowHereTpl=`parentRowHereTpl` &hereTpl=`hereTpl`!]

I guess I’m searchin something like this in
parentRowHereTpl

<li id="menu" class="menu expandfirst"
[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]" [+wf.id+]><em class="ikona"></em>[+wf.linktext+]</a>[+wf.wrapper+]</li>

.. but that doesn’t work either

BASE - Web Design Studio
MODX Ambassador

Website

☆ A M B ☆
455 Posts

AHHP Reply #16, 17 years, 11 months ago

I saw your menu and main script menu.
You must change the main UL class to "menu":

<ul id="menu1" class="topmenu">      to     <ul id="menu1" class="menu">

I created your menu, it worked! you can watch it in attached file.

God loves me. 【ツ】

MODX.ir (Persian Support)

Boplo.ir/modx/ (Persian)

☆ A M B ☆
453 Posts

Mproject Reply #17, 17 years, 11 months ago

Hey!

Yeah... I was experimenting with the menu.... you can see now the working preview... accordion works fine, but I’m only troubleed with the link issue (main category MUST be a link to that category, and when a user is on that certain category, the subcategories must be expanded).

I’m gonna take a look your menu now... maybe it can solve my worries

BASE - Web Design Studio
MODX Ambassador

Website

☆ A M B ☆
453 Posts

Mproject Reply #18, 17 years, 11 months ago

Quote from: AHHP at Nov 04, 2008, 03:12 AM

I created your menu, it worked! you can watch it in attached file.

Thanks for that, but I got that working...

Need something like
ParentRowTPL
id="menu" class="menu"

and for
ParentRowHereTPL
id="menu" class="menu collapsible expandfirst"

P.S. already tried that but won’t work

Update:
tried also with
innerTpl
<ul id="menu" class="menu collapsible expandfirst" [+wf.classes+]>
[+wf.wrapper+]
</ul>

That doesn’t work neither

BASE - Web Design Studio
MODX Ambassador

Website