Nested dropdown menu when activated...

User 2220522 Photo


Registered User
49 posts

I created a nested dropdown menu just like in the SD "Build Nested Menu" video tutorial. The menu works great for a small screen; the vertical nested menu opens and closes with a click. The menu position for the submenu has a down arrow next to it and clicking on the position opens the submenu and turns the arrow into an up arrow. You can then click on the same position again to close the menu. Hovering over it has no effect.

However, for larger screens with the menu in the horizontal orientation, a mouse hover opens the submenu and it remains open even with the pointer moved off the menu. You have to click somewhere else on the screen to close it. I would like to see it function just like the small screen version where the down arrow turns into an up arrow and clicking on it closes the menu. Or at the very least, if you move your mouse pointer off the submenu it closes by itself.

Any help would be much appreciated! Thanks.
User 2220522 Photo


Registered User
49 posts

I fixed the hover and remain open issue. However I still would like the click to open and close like the small screen menu.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Before you fixed the issue, did it remain open before or after you had added some more pages? My experience is, that in wide view the dropdowns remain open for a bit as long as there is only one page. After some pages (or some anchor links down the page) have been added, the issue is not there any more.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2040390 Photo


Registered User
95 posts

Inger's sticky menu for Materialize is working half-way for me (is this a separate issue?).

For viewports smaller than the (arbitrary) breakpoint at 992px, the dropdown is grayed out. Above that it works fine.

My rsd file is about 2 and a half megs and I'm not sure about how to send it. Will the CC e-mail accept a file that large or should I put it in Dropbox?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Dropbox, most likely. And yes, this will be a different issue.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

So, I got your file, Dan, and have returned it after a wee bit of editing.

For anyone who is working with Materialize and is having issues with overlay on navbars: As far as I am able to see, you cannot create a horizontal navbar that collapses into a vertical one on small screens, and at the same time is sticky or fixed at all screen viewports

UNLESS

you add this bit of styling in the Page manager:
<style>
.sidenav-overlay {z-index: 1;} //basically reducing the z-index.
</style>
Make it global on all the pages.

At the time when I created the fixed navbar for Materialize that I'm offering in my sharing folder (March 2019) I was not aware of this. As soon as I have time, I will update that component (after New Year, most likely).
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.