SmartMenus 2.0 notes

[davidcmoody]

I've been a long time user of SmartMenus, back before jQuery was a requirement. As I do not use jQuery in my application, I was excited to see v2.0 going back to no dependencies.

I am working on a redesign of my application, and I realize that what I'm doing may be specific to me, but I wanted to post this here for others.

In my application, I wanted a left side navbar. That displays Icons only, then on hover pops the menu out to the right and keeps it in the viewport. On mobile, I want the collapsible navigation. SmartMenus 2.0.0a1 got me 90% of the way there, and I know it's still an alpha release, but I wanted to share what I discovered.

1. When you have a long navigation list, SmartMenus by default does not scroll. For me I had to add two things to the CSS to make it scrollable. This goes on the <nav *> container. I didn't want scrollbars visible, because I'm already compressed to a 75px width sidebar.
   .primary-nav { --sm-navbar-sidebar-width: var(--cf-sidebar-width); overflow-y: scroll; scrollbar-width: none; } .primary-nav::-webkit-scrollbar { display: none; }
   Doing this got me the scrolling effect, but now SmartMenus was confused about where to open the menu at. So I had to modify the javascript with a few extra lines of code.

_subPosition had to have several updates to correctly calculate the positon of the menu. I also had to set the position to 'fixed' for non-mega menus. (I do not utilize "mega" menus presently, so I did not test anything there.).

After getting the menu to work correctly how I was hoping for on desktop, I then went to resizing the window. It actually worked great in whatever "size" it started in. But if you started desktop size and reduce to mobile or vice-versa, it was confused and would not display correctly.

To fix this I had to do two things:

_subResetPosition had to reset the position to static.
_subShow, I changed the "isCollapsible" variable to be based on the Viewport width.

Now it works great.

LIke I said, I know this is probably something specific to what I'm doing, but wanted to share in case it helps someone else.

I've attached my smartmenus.browser.js file below.
smartmenus.browser.txt

[vadikom]

Hi David,

Thanks very much for the time you took to provide this feedback!

There are some pretty major changes coming very soon in the second alpha. Many issues have been solved and some aspects re-thought. So at this point I consider the first alpha more like an initial rewrite to break the jQuery dependency while the second alpha will bring some notable improvements and modernization of the code (making use of some modern APIs, etc.) and I believe it will be very close to a beta and the final version.

Anyway, if I understand correctly, the main issue you describe is a known issue related to containers with overflow: auto/scroll and absolute positioned child elements - basically, all such children cannot pop out of the parent box and appear inside the scrollable area of the parent. And I guess that is why you have used fixed position for the sub menus. This is a possible solution although it has some drawbacks (unless additional measures are taken) like the fact the if someone scrolls the page while a dropdown is displayed, it would suddently look out of correct position.

I will consider if/how to support some kind of a generic workaround. I have some ideas as this also affects large sub menus to which we might want to apply native scrollbars.

Thanks again for your feedback!

[davidcmoody]

Thank you, looking forward to the next release.

I guess I hadn't noticed the fixed issue as I am using the menus on mouseover/mouseout. So there wasn't a chance for the menu to look out of place.