Materialize: nested menus/navbar

[starchild]

I'm adding this here as it can only be a bug. Nested navbar menu.

The foundation to any site structure is a nested navigation. It is impossible to create with Materialize and the one thing preventing me from releasing it to the wild in our CMS.

Bug: navbar > ul > ul > ul does not work!

Can this please get fixed asap?

I don't see why we should be finding hacks to get around this most fundamental of requirements.

Don't get me wrong I love this framework and am v appreciative of the work you put, in.... but it's like building a brick house without mortar.

Thank you.

[starchild]

anyone?

[Dogfalo]

What exactly are you trying to achieve? Do you have an image illustrating the use case?

[starchild]

hi, yes absolutely. The best way to describe it is by looking at this hack done on the 0.98 branch:

https://stackoverflow.com/questions/52511912/materialize-css-1-0-nested-dropdown/52517674#52517674 and http://output.jsbin.com/yihayos

I have tried getting this hack to work in 1.0, but to no avail.

[starchild]

there seems no way of doing this natively in 1.0

[starchild]

does the example make sense to you? Do you understand what I'm getting at here?

[starchild]

FWIW, this css below has pretty much solved the issue for me. Hopefully this can be fixed in the next release.

.dropdown-content > li {
position: relative;
}

.dropdown-content li .dropdown-content {
position: absolute;
left: 0 !important;
top: 0 !important;
opacity: 0 !important;
transform: translateX(-40%) !important;
transition: all .1s;
}

.dropdown-content li:hover .dropdown-content {
opacity: 1 !important;
transform: translateX(0) !important;
}

[sylvaincaillot]

Hello @starchild,
I am in the same situation and tried to use your CSS fix with no success. Would you have a jsfiddle available?
Thank you.
Such a shame this is not fixed after all this time...

[starchild]

No, I flicked Materialize completely due to this issue and the apparent unwillingness for the team to provide a solution. It's astounding that one of the most important building blocks of a site can be completely ignored. This lack of a menu will undoubtedly put a LOT of people off using this framework.

IMO The lack of a solution to this shows me that this project is DOA.

[sylvaincaillot]

@starchild Thank you for your answer.
This is what I started thinking when I saw the number of similar issues and that no release has been made since September last year.
Too bad, I was liking it as I didn't want to do a new Bootstrap look and feel website.

[starchild]

Yup, I feel your pain. Even that ridiculous help desk continual long list thing is a joke. Not useable in the slightest.

[YoYoBoBo]

I got nested dropdowns to work: https://gist.github.com/YoYoBoBo/7e12ca4eba1cd6e49a3ed110abba4d79

I used https://codepen.io/FOOGLES/pen/LYYdQeK as my base to get this working, it used the hover option to get sub dropdowns to load and had CSS to make the sub dropdowns load properly. But it was still buggy (weird loading, sub dropdowns wouldn't close when another one opened), so I made some changes.

I made it that the sub dropdowns are initialized after the main one is opened, and that the hover value would be set to false when the main one is closed. I also wrote some code to manually close all of the other sub dropdowns when another one was opened (otherwise they would all stay open until you moved the cursor off of the dropdown menu itself, so they would all stack on top of one another).

The vertical position of the nested dropdowns can be a little strange, but otherwise it functions normally.

[starchild]

how is this still even a thing? Such a fundamental component of webdesign and they couldn't care less.

[doughballs]

@starchild fundamental? I don't think I've ever used one, and don't see much of them these days - they don't score well on UX and they're not mobile friendly. Plenty of stuff online regarding better solutions to nested dropdowns (and dropdowns in general).

That said, it should be at least a viable option in Materialize seeing as it's a fairly simple fix.

[starchild]

are you serious? You don't use websites with multi-levelled dropdowns in them? Pffft. Rubbish.

[doughballs]

Sorry, I meant I've never built a site using one. Never been asked to implement one. I guess we all work on different types of sites.

[starchild]

we specialise in ecommerce, and they're essential.

[starchild]

... sadly this project appears dead in the water. I moved to Codyhouse when I realised that and I haven't looked back.

[doughballs]

I mean, Amazon is a pretty big ecommerce site, and they don't use them.

But I digress. Never head of Cody, will check it out.

There is literally nothing I can't build with this framework, whether it's being maintained actively or not (and that situation could well change soon..! )

No framework could handle the sites I work on out of the box - lots of bespoke features, so I'm used to making heavy adjustments. Not an issue for me.

[starchild]

Amazon is not your usual ecommerce site - they are a law unto themselves. Their UI is horrible, as is their UX, but seemingly they don't care.

in fact, everything about every element of the Amazon ecosystem is clunky and convoluted. Just horrible.

Codyhouse is the ducks nuts. Enjoy.