Modx Dropdown menu

15 Posts

rocknet Reply #1, 13 years, 1 month ago

I have been trying in vain to make a a horizontal menu with a drop-down.

I have read the documentation and looked all over the web for the last 2 days (youtube etc) but am still non the wiser as to how to acheive my goal. MODx looks great but all the tutorials seem to assume that the reader is already very knowledgable about MODx. I have yet to see any tuorial that has a start to finish explanation on how to make a drop down menu.

I am familiar with css menus doing what I want in normal HTML websites but can't see how to implement a CSS menu in MODx.
Does anyone have a straight forward tuorial to recommend?

PLease, please, Please.

Steve

60 Posts

DasItsch Reply #2, 13 years, 1 month ago

http://codingpad.maryspad.com/2011/02/21/modx-revolution-for-complete-beginners-part-8-using-wayfinder-to-create-menus/

http://rtfm.modx.com/extras/revo/wayfinder/wayfinder-introductory-examples

15 Posts

rocknet Reply #3, 13 years, 1 month ago

Hello Dasltsch,

Thank you for that but I had seen that tutorial and could not follow it. The problem with it for me is that it does not explain the process from start to finish and requires me to download a template. The template would presumably already include a menu css etc, which kinds of skips one of the steps for me.

Surely there must be a tutorial out there that gives a step by step instruction on implementing a dropdown menu with css.
It's not that I don't know about CSS, it's just that I can't grasp the MODx way of implementing a style sheet for a wayfinder menu. Menus are such a fundamental part of any website and this is being stumbing block for me at the moment. I really want to progess with MODx as it does look like it provides me, a designer (not coder) with a great deal of freedom.

If anyone could help I would very much appreciate it. Come on guys... How about a full tutorial, just using the default template, or how about a youtube video. There's a lot of people like me who could really make use of MODx if the tutorials were a bit easy for us.

Any help would be greatly appreciated.

I am away from my email for about 5 days now so won't be able to thank anyone for their help until then.

Thanks

Steve

60 Posts

DasItsch Reply #4, 13 years, 1 month ago

Quote from: rocknet at Aug 12, 2013, 02:54 AM

Surely there must be a tutorial out there that gives a step by step instruction on implementing a dropdown menu with css.

Assuming you have your HTML working as a template in MODX and installed Wayfinder, it's as simple as replacing the whole HTML-menu (usually an unordered list) with a Wayfinder call.

Example HTML-menu:

<ul class="mainMenu">
  <li class="first">
    <a>Page 1</a>
  </li>
  <li>
    <a>Page 2</a>
  </li>
  <li>
    <a>Page 3</a>
    <ul>
      <li class="first">
        <a>Page 3.1</a>
      </li>
      <li>
        <a>Page 3.2</a>
      </li>
      <li class="last">
        <a>Page 3.3</a>
      </li>
    </ul>
  </li>
  <li class="last">
    <a>Page 4</a>
  </li>
</ul>

Just replace the whole ul.mainMenu with the following Wayfinder call:

[[Wayfinder? &startId=`0` &outerClass=`mainMenu`]]

That's all that is needed to build a dynamic navigation menu from the document-tree.

219 Posts

David Pede Reply #5, 13 years, 1 month ago

You may find this thread useful:
https://forums.modx.com/thread/?thread=85813&page=1#dis-post-474408

Find me on Twitter, GitHub or Google+

☆ A M B ☆
222 Posts

Jason Sonderman Reply #6, 13 years, 1 month ago

If you are trying to implement a CSS file, You will need to add the file your server like you would for a static HTML page, and put a <link> reference in your <head> tag of your template.

The simplest way to do this (not the more efficient, but simplest) is to put the styles.css file in your assets directory by creating a css directory in there and placing the file in there. Then you can put the <link href="[[++assets_url]]css/styles.css" rel="stylesheet"/> in your head tag. The [[++assets_url]] is a placeholder to the system setting for the url of your assets directory.

Then you write you css declarations into that styles.css file.

Typically, I go a bit further and make a static chunk that links to the css file so I can edit it using a code syntax plugin in modx, but that is a personal preference.

The same process can be used for creating a global.js file, except using a <script> tag instead of a <link> tag.

☆ A M B ☆
298 Posts

ojchris Reply #7, 13 years, 1 month ago

Don't be lazy. All you need is to read http://codingpad.maryspad.com/2011/02/21/modx-revolution-for-complete-beginners-part-8-using-wayfinder-to-create-menus/ when you are calm and scene enough.

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 13 years, 1 month ago

Gently, ojchris...

It's quite common for "newbie" MODx users to get excited and frustrated. MODx is too easy, and many new users simply over-think the problem, expecting things to be a lot more difficult than they need to be.

Since Wayfinder by default generates a simple nested unordered list, I very rarely have to do anything other than perhaps use some optional properties to specify some classnames, or give the outer UL container an ID attributed needed by some javascript or another.

These two documents have been the staple of menu making for years
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

15 Posts

rocknet Reply #9, 13 years, 1 month ago

Hello all,

Just got back from my break and am very grateful for all of the responses.
I have just spent a futher 4 hours at my PC but have not made much progress.

1: I can create the ccs file in assets.
2: I can link to it from the template and can even apply the css style to a HTML unordered list.
However, I can't get the css to work properly with the example given by Dasltsch. I know that it is me at fault but can't work out were I am going wrong.

I have been trying to implement the css used in this menu example http://cssmenumaker.com/menu/opera-drop-down-menu
I think I am missing some steps or some key part of code.

My result (using the HTML unordered list by Dasltsch can be seen here.. http://www.bodecker.co.uk/

Here is my html list

    <div id='mainMenu'>
    <ul>
    
  <li>
    <a>Page 1</a>
  </li>
  <li>
    <a>Page 2</a>
  </li>
  <li>
    <a>Page 3</a>
    <ul>
      <li>
        <a>Page 3.1</a>
      </li>
      <li>
        <a>Page 3.2</a>
      </li>
      <li class="last">
        <a>Page 3.3</a>
      </li>
    </ul>
  </li>
  <li class="last">
    <a>Page 4</a>
  </li>
        </ul>

        </div>

Thanks guys.

Stephen

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 13 years, 1 month ago

<div id="cssmenu">
[[Wayfinder? &startId=`0` &parentClass=`has-sub`]]
</div>

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