pdoMenu Mega Menu

I finally got my head round making a mega menu that lists sub pages as a centered horizontal menu (I had to use a little inline css fo rnow to get it to work but I’ll sort that out). I’m using Foundation framework and Animate.css so it slides down nicely but I can’t figure out how to let it slide back up on mouse out of either the parent link or the sub menu itself. Any ideas?

<ul class="horizontal dropdown menu align-right show-for-large" data-dropdown-menu>
[[!pdoMenu?
    &startId=`0`
    &resources=`-1`
    &level=`3`
    &levelClass=`level-`
    &tplParentRow=`@INLINE <li [[+classes]]><a [[+classes]] href="[[+link]]" [[+link_attributes]]>[[+menutitle]]</a><ul style="width: 100vw;position: fixed;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;background-color:transparent;border:0;">[[+wrapper]]</ul></li>`
    &tplOuter=`@INLINE <li [[+classes]]>[[+wrapper]]</li>`
    &tplInner=`@INLINE <div [[+classes]]>[[+wrapper]]</div>`
    &countChildren=`0`
    &tpl=`@INLINE <li><a style="[[+link_attributes]]" class="undbut" href="[[+link]]" >[[+menutitle]]</a></li>`
	&parentClass=`menu align-center`
	&outerClass=``
	&innerClass=`text-center align-center animate__animated animate__fadeInDown dropgrid grid-x grid-padding-x`
	&rowClass=``
]]
</ul>

If you are using the Foundation dropdown js, it adds the class js-dropdown-active on the ul when hovered. This class toggles the ul display between display: none and display: block. It also adds some timing to the removal of the class so the list doesn’t disappear immediately on mouseleave event.

I’m not sure whether you will be colliding with that js. What I’d try is not using the Animate.css classes directly on the tag, but instead add them as properties to classes, including the class that the js is already toggling. So on the dropdown uls - something like:

.my-animation {
  animation: fadeoutUp;
  animation-duration: 2s;
}
.my-animation.js-dropdown-active {
  animation: fadeinDown;
  animation-duration: 2s;
}

Because CSS transitions don’t work with the display property, you might have to add some other property to your my-animation class that can be animated (visibility, opacity, height, ?)

It would be easier to work this out in a Codepen first before building your pdoMenu templates. That way you can also easily share your work here.

Note: Thinking again, the above can’t work if you’re using the dropdown js, because when the js removes the active class the ul changes to display: none which would happen immediately and prevent any animations from being seen. Probably if you want to animate the menu disappearing you’ll have to do it with javascript and play around with the dropdown js to keep it from getting in the way.

2 Likes

Bob’s Guides uses the Sky Mega Menu, though I had to use three separate pdoMenu calls to make it work with all three sections of the site.

I’ve been very happy with it, and haven’t touched it for years.

1 Like

That seems to have nice smooth animation, but only on appearing. I think that’s better UX anyway!

There are a few instances I can think of where an on leaving animation wouldn’t work well. For instance if you’re clicking from one top level menu item to a different one, you probably don’t want both animations happening at once, you want the one you’re leaving to get out of the way. And if you’re clicking a menu item and it’s a page link, likely the new page load prevents seeing an on leave animation.

So, @chrisandy maybe your menu is fine as is?

Thanks Bob but I’m using one pdo call here which works just fine. I’m building myself a boilerplate using Modx 3, PHP 8 and latest version of Foundation. Trying to keep the number of extras and snippets down to an absolute minimum.

Yep - you’re spot on Lucy and I’ve been struggling with this as I have something very similar working on another site. Tried the script on this site and I’m not sure if it’s because I’m using php 8 or if I have a problem with the latest version of Foundation js that I’ve downloaded.

Tried replacing my menu with the following and the animation fade out isn’t working so something is wrong - I have a very similar effect on another site and the inline style attributes it creates are working but for this site it just writes “style” with no attributes. I’m beginning to think it’s PHP 8 that is the problem - bit out of my depth though. Animated Dropdown | Foundation 6

I can’t imagine any way that the php version would effect this… More likely you have colliding bits of Javascript and/or css.

The animated menu you linked to is very buggy on mobile (android, chrome browser), so I’m not sure it’s worth pursuing honestly.

Do you have a working example of what you’re attempting, somewhere we can have a look?

I wouldn’t be using it for the tablet / mobile version and it’s really there just to prove to me (as I’ve just discovered) that the very latest version of foundation.js doesn’t seem to be working as expected. I swapped it out for an older version and functionality was as I expected so I’m going to do some digging around and I’ll post a link to where I’ve got with it early next week. So basically it’s not php it’s foundation that’s not working properly.

This is the closest I can build and it does what I want except for one big problem and that’s flickering when a submenu item is hovered. This is on my testbed site which is where I test various elements: News | MODX Revolution

I think the mega menu I linked to would work fine with a single call to PdoMenu on your site, I only used three because of the unusual structure of my site.

1 Like

This is what I ended up with and it seems to work quite nicely. It leaves the sub menu container open until another parent menu is hovered or something else is clicked. That will do for what I need. I will figure out a way to move the inline css but for now it’s fine. This uses foundation css and js and also animate.css.

        <ul class="horizontal dropdown menu align-right show-for-large" data-dropdown-menu data-autoclose="false">
[[!pdoMenu?
    &startId=`0`
    &resources=`-1`
    &level=`3`
    &levelClass=`level-`
    &tplParentRow=`@INLINE <li [[+classes]]><a [[+classes]] href="[[+link]]" [[+link_attributes]]>[[+menutitle]]</a><ul style="width: 100vw;
  position: fixed;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;background-color:transparent;border:0;">[[+wrapper]]</ul></li>`
    &tplOuter=`@INLINE <li [[+classes]]>[[+wrapper]]</li>`
    &tplInner=`@INLINE <div [[+classes]]>[[+wrapper]]</div>`
    &countChildren=`0`
    &tpl=`@INLINE <li><a style="[[+link_attributes]]" class="undbut" href="[[+link]]" >[[+menutitle]]</a></li>`
	&parentClass=`menu align-center`
	&outerClass=``
	&innerClass=`text-center align-center animate__animated animate__fadeInDown dropgrid grid-x`
	&rowClass=``
]]
</ul>