I was checking out some mega menu issues and I came across this theme/template. I really liked how the submenus were overlapping their parents over the '>' arrow. Besides the nice '3D' look that could very well be my own opinion, I realized that I was covering less distance to move the mouse from one parent menu to its children. Please see attached screenshot to see what I mean.

If more people like the look and also believe that their mouse travels less distance, I would really like to see this feature in admin menu at some point (even as an option).

CommentFileSizeAuthor
#8 text_overlapping_arrow.png19.2 KBklonos
compact_menus.png405.86 KBklonos

Comments

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Closed (duplicate)

Thanks! However, marking as duplicate of #425832: admin_menu: implement mega-menus for now.

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented

...well, this feature was requested as an improvement to the already implemented 'classic' style, so I see no connection to the mega menu implementation. Here, the sub-items of parent menus would simply be shifted a few pixels to the left (or to the right if RTL is used), but still retain old method of pop-up/display. In mega-menus OTOH, the 2nd and 3rd level items are to be placed in a single 'mega-item' that displays them all at the same time.

This feature would not change the way menus are presented in a drastic way (like mega-menus do), rather than simply reduce the distance the mouse travels in order to click the desired item (especially if this item is in the 3rd or 4th + level).

I guess what I mean to say is that this feature request has nothing to do with mega menus IMO, but I won't argue any more than that.

donquixote’s picture

donquixote commented
Status: Active » Closed (duplicate)

In the screenshot example, one could as well reduce the width of the parent menu. Or, in particular, the padding-right of the menu items. There is a lot of empty space on the right, that could be cut off, with the same effect for pixel distance.

Not saying I am absolutely opposed to the idea, but then we need a more honest screenshot/mockup.
Would we accept that the submenu overlaps a part of the text of the parent menu items? Or would we increase the items' padding-right, to get the desired empty space?

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Closed (duplicate) » Active
klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented
Status: Closed (duplicate) » Active

@donquixote: The image I uploaded in #0 is not a mockup at all. It is simply a screenshot of a live site's menu (I also provide a link to it).

I too initially had thought we could reduce the width of each parent menu down to the width of the longest item in each level. I still am not quite sure about it though, since it seems kinda 'pleasing' in the eye to have the same width in all menus and have longer items wrap in a second line.

My idea was to simply have the child menus 'shifted' a few pixels to the left, only enough to cover the arrow shown to the right of each menu item that has children. I see how reducing the width of the menus to the width of the longest item would save extra distance traveled, but I am not sure how that would feel to others.

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented

...'pleasing' in the eye...

or

...'pleasing' to the eye...

I am not sure - English not my mother tongue ;)

donquixote’s picture

donquixote commented

@Klonos: Google is your friend :)
"pleasing in the eye" -> 1.790.000 results
"pleasing to the eye" -> 31.200 results

"The image I uploaded in #0 is not a mockup at all."
ok, got that.

"we could reduce the width of each parent menu down to the width of the longest item in each level."
That's not what I am suggesting.
With the existing CSS, the links of admin_menu have a padding-right of 8px. This allows the text to get as close as 8px to the right edge. You can confirm that by adding "iiiii" to the end of a link text with firebug. This is different from the thing in your screenshot, which seems to have a far bigger padding-right.
If we now let the submenus overlap the parent menu, we will in some cases see text being hidden behind the submenu. Unless we increase the padding-right, in which case we could as well just reduce the width of the menus.
And of course, the arrows will be hidden behind the submenus, so we don't see which of the lower items do have a submenu and which don't, while hovering an item that has.

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented
StatusFileSize
new text_overlapping_arrow.png19.2 KB

With the existing CSS, the links of admin_menu have a padding-right of 8px. This allows the text to get as close as 8px to the right edge. You can confirm that by adding "iiiii" to the end of a link text with firebug...

I just realized this. I take it you are referring to this part of admin_menu_toolbar.css:

#admin-menu ul > li > a {
  border-right: 0;
  margin-bottom: 3px;
  padding: 3px 8px;
}

/kinda off-topic here.../

Well, I did try it and it indeed is as you state, but I've also noticed that the arrow.png is 9x9 pixels. This actually leads to text overlapping it (by
at least 1px, because the text is allowed to go as far as 8 pixels - see attached screenie). IMO we need to either make the arrow smaller (6x6 pixels - but that would reduce usability), or increase the left/right padding to at least 11x11 pixels. I haven't noticed this before and this changes things a bit.

klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented

And of course, the arrows will be hidden behind the submenus, ...

That was the whole idea! What I initially intended to suggest is that we shifted the menus only by as many pixels to the right as the width of the arrows. Of course, this then will cause...

... so we don't see which of the lower items do have a submenu and which don't, while hovering an item that has.

...which makes it a really good thing that expandable menus have a slightly different color than the ones that are not ;)

This, as you already have noted, will only happen for the expandable items that are lower than the one hovered on. Let me add to this note that how many arrows will be 'hidden' (if any) will depend on the size (as in how many items) of the submenu. Besides, lets not forget that both expandable and non-expandable items are opaque/transparent. So... arrows will not actually be hidden now, will they? ;)

donquixote’s picture

donquixote commented

"arrow.png is 9x9 pixels. This actually leads to text overlapping"
"increase the left/right padding to at least 11x11 pixels"

Instead, we could increase padding-right only for those items that have an arrow icon. (all this in case we don't move the submenus)

"arrows will not actually be hidden now, will they?"

Ok, let's say "less visible". We will have to see that in practice / screenshot, to decide if this is what we want.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Version: 6.x-3.x-dev » 7.x-3.x-dev
truls1502’s picture

truls1502
he/him
Primary language Norwegian Bokmål
commented
Issue summary: View changes
Status: Active » Postponed (maintainer needs more info)
Issue tags: +postponed2w

I am sorry for no reply until now.

There are many issues regarding this module admin_menu which is a bit difficult for us to follow up since some of the issues might be already outdated, or is already fixed by the module or any other modules or itself core which means that the problem might no longer need to be fixed.

We can see that the issue has been created for a few years ago, I hope it is okay for you that I am postponing the issue, and give you around two weeks. If you still face the problem, could you tell us the step by step when until you get the error message or what is frustrated you, and a list of modules you are using related to admin_menu and a screenshot that might help us? So it makes us easier to reproduce your issue.

However, after two weeks with no feedback - we will close this issue. So in case, you noticed it after the issue is closed, do not hesitate to reopen it like and fill information which is mentioned above.

So before giving us a feedback, do you mind to test it again with our latest 7.x-3.x-dev?

Thank you for understanding! :)

truls1502’s picture

truls1502
he/him
Primary language Norwegian Bokmål
commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
Issue tags: -postponed2w

This issue has been automatically marked as closed because it has not had recent activity after the last post.

However, if you or someone is still facing the same issue as described to the issue, could you please to re-open the issue by changing the status of the issue, and add an explanation with more details which can help us to reproduce your situation.

Again, thank you for your contributions! :)