Add styling?

Yes we could add default styling with a configuration option on the block to enable/disable it.

That would be fantastic, and thanks for a great initiative!

As I see it, it would be nice to immediately showcase what the module is capable of, without any other configuration than doing the two steps in the README file.

So perhaps the styling can be enabled by default, and similarly, under "Menu levels" the "Expand all menu links" option could perhaps also be enabled by default, for a menu to immediately show links to sub-pages?

+1 for this request.

Would be great if this could be a drop-in replacement for Superfish.

As a stop-gap measure, providing an example CSS file people could customise and add to their theme would be a big help.

I added an option for horizontal styling. Let me know how it looks! We could also add an option for a vertical menu.

Thanks @jayhuskins, it works great! Adding vertical styling as well is a great idea.

What do you think about my suggestion to enable these two settings by default, to immediately showcase what the module is capable of?

1. "Include default horizontal menu styles" (your patch #6)
2. "Expand all menu links" option under "Menu levels"

Let's move the discussion about the "Expand all menu links" option to this ticket:
https://www.drupal.org/project/disclosure_menu/issues/3419021 ✨ Make "Expand all menu links" label clearer Active

I'll set up a vertical style option, but I'm on the fence about making any styles active by default.

Great, let's discuss expanding menus in that other issue, that's better.

About default styling, I can see arguments for and against. But in my mind, the more that a module works out of the box, the better. This opinion is based on many, many years of trying Drupal modules, and sometimes 1. Spending time trying to figure out why the module doesn't quite seem to work, or 2. Get the wrong impression of the module, since a crucial function required a setting, which I didn't discover.

And that would be too bad, because this is a great module! What are your thoughts about not having styling enabled by default?

I worry about being too opinionated, but I think you're right. It's easier to see the functionality of the module with default styles enabled, and site builders can always disabled them if they want to write their own.

What would you think of making the theming a sub-module? That would allow people who wanted the pure functionality to use just the base module, and they could handle theming themself.

Turning on "Disclosure Menu Theming" module would give you themed menus by default.

Thanks for the understanding. I may even go as far as suggesting that "JavaScript expand on hover" be enabled by default as well, or would that be taking it too far? Again, my thinking is that it's an awesome feature, which would be nice to immediately show as a possibility. It can always be disabled, if so desired.

Also, the menu items themselves are unstyled and a bit rough, and it could be considered to make them prettier, with a few simple CSS rules?

Okay vertical styling is now an option and horizontal has been set as the default.

It looks good, thanks @jayhuskins -- "Vertical menu" is now an option, and when enabled, the items are listed under each other, as expected.

Also, "Horizontal menu" is enabled by default right after installing the module, making it look more like the kind of menu people are used to seeing.

I could change to RTBC, but maybe we should discuss first, if the menu items themselves could get styled and look a bit more themed? (like Admin Toolbar or Olivero)

As I wrote in #10, I prefer to showcase as much of a module's features right after install, to introduce it best to new users, and really make it shine.

The menu looks better now for wide Desktop resolution, with items listed horizontally, but with a few simple CSS rules, the Disclosure Menu items could look even more like menus users are accustomed to see, such as Admin Toolbar or Olivero, i.e. nicer, as opposed to the current, more raw look.

And, yes people should style the menu themselves, but with a few simple changes, such as removing underline for the menu items (but show on hover), and making the font-weight 600, we could make the menu look just a little more menu-esque, and work out of the box.

Also, sub-menu items, which pop up on click or hover, could also be aligned better. But maybe that's better handled in a separate issue? Or maybe as part of the light styling, I suggest above?

I created ✨ Enable hover navigation Javascript by default Active for my suggestion about Javascript on hover enabled by default.

I've tried out the horizontal style, and it's definitely a big improvement.

I agree with @ressa, that some basic styling to make it prettier by default would be nice. It doesn't need to be too fancy, but something that someone who wanted a usable site with minimal coding could say "that's good enough".

Perhaps, in addition to the current options for horizontal and vertical styling, there could be options for level of styling. Perhaps "None", "Minimal", and "Themed". Would be nice to hide the "Horizontal" and "Vertical" options if "None" was selected.

Is "Postponed" the right status for this? I'd prefer to see "Needs work".

@lostcarpark: I set it to "Postponed" mostly to make space for discussion, since you and @jayhuskins might not agree with me. But since you agree that basic design would be nice, let's change status. I like your suggestion with having "None", "Minimal" and "Themed" styling, where only the last option is missing now, since #14 in effect added "Minimal".

I made the styles prettier without making them too imposing. Let me know how they look! If you'd like more enhanced theming, I'd appreciate design help as that is not my specialty.

This is great, and exactly the kind of styling I was hoping for: Looks good, without being too imposing, @thanks @jayhuskins!

HORIZONTAL MENU

When you hover over a top menu item (level #1), level #3 items are shown as well, without hovering.

Would it be possible to get the same behavior as for example Admin Toolbar, where a child menu is only shown after hovering over the parent item?

So that you need to hover over "#2 hohacovel" to show "#3 mikopu":

#1 spes
  #2 hohacovel
    #3 mikopu

Also, it looks like #3 menu items are slightly lower, due to some padding, maybe?

VERTICAL MENU

This one is fine, and I think it's all right to expand, and show all sub menu items. But perhaps level #3 items could get a small indent, placing it a bit more to the right, to show the hierarchy?

@ressa great feedback thank you! I just fixed a separate issue ✨ Unlimited option for Maximum disclosure levels Fixed that was causing confusion. Basically there is a setting for how many menu levels should use disclosure buttons, and by default it was set to 1, which means the first menu level would have disclosure buttons, but all subsequent menu levels would not. To fix this confusion, I set the default to "Unlimited" so that all menu levels will use disclosure buttons by default.

Also, it looks like #3 menu items are slightly lower, due to some padding, maybe?

Correct, the level 3 menu items are not perfectly aligned due to the padding on the submenu container. If anyone has the time to tweak this styling it would be much appreciated.

Thanks for fixing the problem with showing too many menus when hovering in the other issue @jayhuskins, it works perfectly now! It looks like it even fixed the indentation in vertical display as a bonus, so it looks fine now.

Could something like this work?

.menu__item--level-2 .menu__submenu-container {
  margin-top: -0.25em;
}

I moved the padding from the `ul` to the `li` and now the submenus are properly aligned! If this looks good, I think it's ready to merge.

That works perfectly @jayhuskins, awesome work!

It's so great to have a fully functional and nice looking menu, right after installation. Thanks @lostcarpark and @jayhuskins :)

Automatically closed - issue fixed for 2 weeks with no activity.