Below is a topic I started on Zulip about Flyout menus...

DrAlbany

Is there an easy way to create flyout menus?

My use case would be to have an "Editor" menu pop out from the left hand edge on hover instead of the normal admin menu bar. I think these look more "up to date" and aesthetically pleasing :smile:

I've looked at nice_menus module but it's not been updated in seven years and I think I remember @jenlampton having a discussion about nice_menus now being part of the core menu system... I could be wrong :smile:

Your thoughts and help greatly appreciated.

-------------------

indigoxela

  Struggling to figure out what you're after... mind to share a mockup?

-----------------

DrAlbany

Pinched this off a facebook post... but it demonstrates what I was thinking/liking.

--------------------------

indigoxela

  The whole admin menu aside? (More like in D9 - configurable?)

-------------------------

DrAlbany

I was thinking a limited "Editor" menu... but I suppose any menu.

-------------------------

indigoxela  

It's actually not complicated (I think)... but to my knowledge, there's nothing ready-made around in contrib land.

------------------------

DrAlbany

I've not seen D9 in action... Guess I should give it a try at some point.

I was thinking either Views or Taxonomy Menu. and having a region collapse into the side with a few pixels visible so the "On-hover" would get triggered.

----------------------

indigoxela  

To achieve it, you'd probably need:

  • A custom menu block (core provides all for that)
  • Some Javascript to do the toggle (expand/collapse)
  • Some CSS to let it look good

Feasible, but probably more work than you have hoped?
--------------------

DrAlbany

Feasible, but probably more work than you have hoped?

probably :) Could be something to put on the back burner... and to play within between other jobs.

-----------------

jenlampton

@Dr Albany you should be able to achieve that with the core menu block, by adding some classes. The library that's in Backdrop core is called "smartmenus" and supports the vertical fly-out format as well as the horrizontal drop-down we are using by default (see https://www.smartmenus.org/docs)

Here's an example: <ul id="main-menu" class="sm sm-vertical">

adding the sm-vertical class is all you need. the tricky part is figuring out which theme file/function to override in order to get it in there.

ooh, it looks like you can do it in *_preprocess_menu_tree() https://docs.backdropcms.org/api/backdrop/core%21includes%21menu.inc/function/theme_menu_tree/1

this would make a great contrib module :)

-----------------------------

So... starting to investigate and see if I can come up with a solution/contrib.

Stay tuned....

Comments

klonos's picture

Hey  👋

Have you given the NavBar module a go yet? It allows to place the admin menu vertically, so I believe that using that module + some permission tweaking should get you close to what you're after.

Once we have https://www.drupal.org/project/admin_menu_source ported over (or that feature added in core perhaps?), then that would be ideal in your case I think. You would be able to specify which menu should be used as the admin menu per-role 😉