Searching for wayfinder-drop-down-menu howto

Hi everyone!

Im doing my first MODX Project, and the content and Layout stuff is in good progress. Now I tried the whole day to get a Dropdown menu - without success

First thing I tried was this solution:

[[Wayfinder? &config=`cssplay-dropdown` &startId=`0`]]

Nice and easy, but J could not find a way to change the event from "mouseover" to "click", so I had to drop this.

Next I tried with different wayfinder settings, some of them didnt caused the results I hoped, others didnt show any results, in form of an empty Wayfinder Call.

I am really lost, and want to ask, if someone has a good example, howto, tutorial or whatever that can help me to get a Dropdown menu with wayfinder?

Would be so thankfull!

PS: Sorry for my language skills, I gave my best

Sarah

Hi,
Here you can find the official documentation : https://docs.modx.com/extras/revo/wayfinder
And here a good tutorial but in English : https://www.youtube.com/watch?v=sKXD2-LC1Wg
EDIT : this is a generator for wayfinder and it's in German : http://calidris.de/ottogal/ymodx/index.php?id=30
I hope this help. [ed. note: Steeve last edited this post 9 years, 11 months ago.]

Hi Steeve,
first thanks a lot for your answer!!!

I read the documentation, and watched the video… but I think I am missing something elementary.

In the video, the person uses this code:



and thats it, to get a full styled drop down menu. What do I have to write in the CSS to get a drop down? With this call I just get menu in form of a list.

Greetings
Sarah

Quote from: sarah_ger at Oct 31, 2016, 08:56 AM

...
In the video, the person uses this code:

<div id="navigation">
[[Wayfinder? &startId=`0`&level=`3`]]
  </div>

and thats it, to get a full styled drop down menu. What do I have to write in the CSS to get a drop down? With this call I just get menu in form of a list.
...

What you need to write depend from your HTML code. Here is an example to learn how to make a simple dropdown menu.
https://codepen.io/philhoyt/pen/ujHzd
You can find more example with Google.

Steeve, again thanks a lot for your tipp. I copied the example and after playing around with it a little I understood whats going on there.

Just one last thing is stillt not working, the effect that the menu opens on click, and not on mouse over.
For that I downloaded the Jquery package, and put it in the head are of my document:



I createt a chunk wfJS:



The wayfinder call looks like this:



Anyone a Tipp or a more useful google keywords than "modx click hover wayfinder jquery"?

thanks

Sarah

Quote from: sarah_ger at Oct 31, 2016, 04:15 PM

Steeve, again thanks a lot for your tipp. I copied the example and after playing around with it a little I understood whats going on there.

Just one last thing is stillt not working, the effect that the menu opens on click, and not on mouse over.
For that I downloaded the Jquery package, and put it in the head are of my document:

<script type="text/javascript" src="assets/components/jquery/jquery-ui-1.9.2.custom.js"></script>

I createt a chunk wfJS:

<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
</script>

The wayfinder call looks like this:

[[Wayfinder? &startId=`0`&level=`3` &jsTpl=`wfJs`]]

Anyone a Tipp or a more useful google keywords than "modx click hover wayfinder jquery"?

thanks

Sarah

You're welcome Sarah! I think you can do it without any Javascript code as you can see in this example : http://www.w3schools.com/howto/howto_css_dropdown.asp