Flyout Menu

31 Posts

bintimalu Reply #1, 13 years, 2 months ago

Does anyone know where I can get a good tutorial on how to create a fly-out menu on MODX, I've tried all the tutorials including http://muddydogpaws.com/development/wayfinder/examples/example-4.html but it doesn't seem to work. I'm an amateur when it comes to drop-down menus and MODX in general. I'd appreciate it if I could get the steps on how to make one, with the snippets, chunks and other documents I need.

219 Posts

David Pede Reply #2, 13 years, 2 months ago

This free ebook would be a great place to start learning wayfinder:

http://www.sottwell.com/links/wayfinder/wayfinder-book.pdf

Find me on Twitter, GitHub or Google+

31 Posts

bintimalu Reply #3, 13 years, 2 months ago

Thanks. I'm working on a website and my sub menu is not working, I have been trying to fix it for a few days but nothing has changed. Do you think you can take a look and tell me what might be wrong?

http://eldersdigest.org/

The sub menu is meant to be under the Media section. It shows the sub menu on the code but not in the website for some reason.

219 Posts

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

From what I can see it looks like more of a css issue. Your source code shows:

<div class="accordion-menu">
  <ul>
    <li><a class="activemenu" href="Media" title="Media">MEDIA</a></li>
    <ul class="submenu">
      <li><a href="Media/Videos" title="Videos">VIDEOS</a></li>
    </ul>
  </ul>
</div>

and this in your css:

.submenu {
  display: none;
}

First you need to adjust your markup so it outputs like this:

<div>
  <ul class="accordion-menu">
    <li>
      <a class="activemenu" href="Media" title="Media">MEDIA</a>
      <ul class="submenu">
        <li><a href="Media/Videos" title="Videos">VIDEOS</a></li>
      </ul>
    </li>
  </ul>
</div>

and then add this to your css file:

ul.accordion-menu li:hover ul.submenu {
  display: block;
}

The video submenu should now show on hover. You will need to do some more work on your css as the menu won't look great by just doing the above.

You should be able to sort any styling issues by reading this tutorial and demo: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Find me on Twitter, GitHub or Google+

31 Posts

bintimalu Reply #5, 13 years, 1 month ago

I've been trying to do that but s far there are no changes

219 Posts

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

Your markup is still not correct. The submenu ul must be contained by the li:

<li>
  <a class="activemenu" href="Media" title="Media">MEDIA</a>
  <ul class="submenu">
    <li><a href="Media/Videos" title="Videos">VIDEOS</a></li>
  </ul>
</li>

Find me on Twitter, GitHub or Google+

31 Posts

bintimalu Reply #7, 13 years, 1 month ago

I'm using a template to display the pages. I've tried to alter the template several times but there's be no significant change, other than at one point it displayed the submenu under the parent when you clicked on the parent. But that's not the case anymore.

219 Posts

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

Looking at this discussion: https://forums.modx.com/thread/?thread=86031&page=2#dis-post-474409

I reckon it's the hereTpl. Change to:

<li>
  <a class="activemenu" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
  [[+wf.wrapper]]
</li>

Find me on Twitter, GitHub or Google+

31 Posts

bintimalu Reply #9, 13 years, 1 month ago

It's now under the parent, but it only appears in the source code once I click on media. Do I need the li inside the ul?

219 Posts

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

The markup is now correct. As you have not followed my guide above you need to change the css to:

ul#accordion li:hover ul.submenu {
    display: block;
}

Find me on Twitter, GitHub or Google+