Complex Wayfinder menu with different sub list class names

58 Posts

carlina Reply #1, 12 years, 10 months ago

Hi!

I want to create a pretty complex menu with Wayfinder (a 3-level flyout menu). For this menu I need different kinds of &innerTpl because I need different classes for different levels.

<ul class="menu">
  <li>Home</li>
  <li>Main Page
      <div class="dropdown_container">
	    <ul class="dropdown_flyout">
		...	
		   <ul class="dropdown_flyout_level">
			...
			  <ul class="dropdown_flyout_level">
      </div>                        ...
  </li>

How to manage the different sub list class names with Wayfinder? As it's a jquery menu I need these class names (otherwise I would have to change the script).

THANKS! [ed. note: carlina last edited this post 12 years, 10 months ago.]

5,888 Posts

Bruno17 Reply #2, 12 years, 10 months ago

I think the simplest way would be to nest different wayfinder-calls inside wayfinder-tpls.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

58 Posts

carlina Reply #3, 12 years, 10 months ago

Great idea, thank you!

I nested another Wayfinder call in the &innerTpl:

<div class="dropdown_container">
 [[Wayfinder? 
 &startId=`2`
 &outerClass=`dropdown_flyout`
 &innerClass=`dropdown_flyout_level`
 &parentClass=`dropdown_parent`
 ]]
</div>

As I set the id on 2, EVERY sub menu starts on this Main Page (SERVICES). But I have other main pages i.e. ABOUT with a sub menus on its on. So I tried &startId=`[[*parent]]` because I need the id of the particular parent main page. And what happens? I get a list of all my main pages in the sub menu (Home, Services, About, ...). But I need a list of the pages WITHIN the particular main page container. Is there a way to get a relative parent id within the &startid parameter?

This is the site structure:

<ul class="menu">
  <li>HOME</li>
  <li>SERVICES (main page with the first sub menu, has id=2)
      <div class="dropdown_container">
        <ul class="dropdown_flyout">
        ...
           <ul class="dropdown_flyout_level">
            ...
              <ul class="dropdown_flyout_level">
      </div>                        ...
  </li>
<li>ABOUT (main page with another sub menu)
      <div class="dropdown_container">
          <ul class="dropdown_flyout">
             [the start id of this sub menu should be the one of the ABOUT container] 
          </ul>
      </div>
  </li>
...
</ul>

5,888 Posts

Bruno17 Reply #4, 12 years, 10 months ago

I'm not sure what's the correct placeholder for the current id in the innerTpl

is it

[[+wf.id]]

?

then try:

<div class="dropdown_container">
 [[Wayfinder?
 &startId=`[[+wf.id]]`
 &outerClass=`dropdown_flyout`
 &innerClass=`dropdown_flyout_level`
 &parentClass=`dropdown_parent`
 ]]
</div>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

58 Posts

carlina Reply #5, 12 years, 10 months ago

Unfortunately, that didn't work. In the end as I couldn't find an appropriate solution I modified the CSS and JS. Now I've a menu with identical parent classes. Nevertheless, thanks for your answers!

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 12 years, 10 months ago

Good idea. While Wayfinder can usually be coerced into generating what you want, there's times when it's easier to just change what you want wink

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

793 Posts

ottogal Reply #7, 12 years, 10 months ago

I'm not sure what's the correct placeholder for the current id in the innerTpl

You need

[[+wf.docid]]

The placeholder [[+wf.id]] is used together with the &rowIdPrefix parameter; see http://rtfm.modx.com/extras/evo/wayfinder#Wayfinder-TemplateParameters