Dropdown menu creation

10 Posts

charcoaldesign Reply #1, 13 years, 4 months ago

I have an existing MODx site - Revolution 2.1.3-pl (traditional) - and I need to create a dropdown menu. The existing site doesn't have the capability.
Is there anything in the MODx's tools, or an add-on, that will let me do this relatively easily?

384 Posts

eladnova Reply #2, 13 years, 4 months ago

Are you using Wayfinder for your existing menu? Have a google for Wayfinder drop down menu. There are a few examples on the authors website.

...

10 Posts

charcoaldesign Reply #3, 13 years, 4 months ago

Yes I am, thanks - I'll do that.

194 Posts

DonQuicky Reply #4, 13 years, 2 months ago

@charcoaldesign: still active topic?

Codeplaza Webdesign: for professional websites at low cost

10 Posts

charcoaldesign Reply #5, 13 years, 2 months ago

Quote from: donquicky at Jul 04, 2013, 05:06 PM

@charcoaldesign: still active topic?

I've had to resort to a css menu (with manual set up so voiding the modx menu) until I do some study on Wayfinder etc.
Any good tutorials welcome on setting up a dropdown menu - I've found some old ones online but they seemed out of date or incomplete.

194 Posts

DonQuicky Reply #6, 13 years, 2 months ago

I would still use Wayfinder to generate the navigation HTML and finish the menu with JQuery. Wayfinder is easy to learn and produces the right HTML needed.

Take a loot at: http://makotokw.github.io/jquery/ui_potato_menu/

Codeplaza Webdesign: for professional websites at low cost

10 Posts

charcoaldesign Reply #7, 13 years, 2 months ago

Thanks a lot for that. I'll try to apply it. Nice slick menu style.
I just need to get up to speed with Wayfinder among other things - I've only started with modx editing a client's site someone else built, but I really like it and want to use it for new site projects.

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 13 years, 2 months ago

Here you go... http://sottwell.com/links/wayfinder.html

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

☆ A M B ☆
1,780 Posts

Frogabog Reply #9, 13 years, 2 months ago

Wayfinder works great with css dropdown menus. No need to use a static menu with Wayfinder at all. Susan's link will help, but basically all you need to do is build your css for the menu, and tell Wayfinder to use the id's and classes.

Something like this:

Wrap Wayfinder with your nav id or class:

<nav id="main_nav">[[Wayfinder? &startId=`0` &level=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &hideSubMenu=`0`]]</nav>

Standard Wayfinder rowTpl chunk:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

Set your dropdown class in this innerTpl chunk:

<!-- innerTpl -->
<ul class="sublist [[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

10 Posts

charcoaldesign Reply #10, 13 years, 2 months ago

Awesome, thanks Susan & Kori! I'll give it a shot.