Modx, a popular content Management Framework which comes with a vast directory of useful packages.Wayfinder is a Snippet basically used to create navigational menus in Modx.
So I am going to write a detailed tutorial about the vertical accordion menu in Modx Revolution with the use of Wayfinder package. You just need to follow very simple steps to create your accordion menu in Modx.
So, Here are the detailed steps:
Also Read: Execute Custom Query IN MODx
Step 1:
Let’s start with the Wayfinder code, Here we call Wayfinder snippet for displaying menu.To place below code into the template.
1 2 3 4 5 6 7 8 9 | [[!Wayfinder? &startId=<code>0 &level=<code>3 &outerClass=<code>wfmenu &innerClass=<code>submenu &jsTpl=<code>wfJS &cssTpl=<code>wfCss ]] |
Step 2:
Now it is time to call JavaScript which is very useful to create an accordion effect with the menu.To add Javascript code, create one new chunk with the name ‘wfJS’ and add below code in it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script src="jquery.ui.core.js" type="text/javascript"></script> $('.wfmenu ul').hide(); $('.wfmenu li a').click( function(ev) { var openMe = $(this).next(); if(mySiblings.length>0 && openMe.length>0) ev.preventDefault(); if(openMe.is(':visible')) { $(this).removeClass("selected"); openMe.slideUp('normal'); } else { mySiblings.slideUp('normal'); $(this).addClass("selected"); openMe.slideDown('normal'); } } ); $('li.active a').trigger('click'); }); |
Step 3:
Next is to implement CSS.To use CSS create one more chunk with title ‘wfCss’ and place below code in it.
Must Read: Execute Custom Query IN MODx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | ul.wfmenu, ul.wfmenu ul { list-style-type:none; margin: 0; padding: 0; width:200px; } ul.wfmenu a { display: block; text-decoration: none; } ul.wfmenu li { } ul.wfmenu li a { color: #fff; line-height:30px; text-indent:20px; height:30px; background-color:#006699; background-repeat:no-repeat; } ul.wfmenu li a:hover { } ul.wfmenu li ul li a { background: #eaf1f6; color: #000; margin-top:1px; height:25px; } ul.wfmenu li ul li a:hover { text-indent:15px; background: #cadded; border-left: 5px #217fa4 solid; } ul.wfmenu li ul.submenu li a { height:25px; line-height:25px; margin-top:0; text-indent:30px; font-size:0.9em; color:#096996; } ul.wfmenu li ul.submenu li a:hover { border-left: none; } ul.wfmenu li ul.submenu li ul li a { background: #eaf1f6; color: #096996; font-size:0.8em; margin-top:1px; line-height:20px; height:20px; } ul.wfmenu li ul.submenu li ul li a:hover { background: #cadded; border-left: 5px #217fa4 solid; text-indent:25px; } |
When We have successfully done the above steps, It’s time to see it in action.I hope you have learned a bit and don’t forget to write your valuable comments.
Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
