Responsive strategy for admin_menu

I am working on a patch for this after discussing something which seems like a good approach to me with @sun during the DevDays in Barcelona. I am working on a solution that would have a look and feel similiar to what jQuery Mobile does for navigations. It will also include the search widget from #806350: Add a search widget to find links in admin menu. I am assigning this issue to me so that we don't end up with duplicate code but I can't guarantee that I will be able to provide a patch before the 29th as I am still on holidays in Spain and the Internet connection is really lousy here.

I did a proof of concept of a possible strategy for administering a site while mobile (using admin menu).

http://www.youtube.com/watch?v=JfNhhVjVbks

This video is using a fork of a library called tinynav.js (implemented via this module Tiny nav). It uses a media query to convert the admin drop down menus to a <select> field. It then uses "--" to indent based on the level of the hierarchy that the navigation previously was listed under.

Have you seen tarekdj's Responsive admin menu for Drupal 8?

There's also the entire redesigned Toolbar in D8 core now: #1137920: Fix toolbar on small screen sizes and redesign toolbar for desktop

Since it is (sadly) unlikely that the core toolbar will work as a replacement for admin_menu (see #1847370: Why did I install admin_menu in favor of the Toolbar in Drupal 8?), I'd foresee the following battle plan:

1) Clean up and modernize admin_menu's CSS for CSS3 and modern browsers in general. (unrelated to this issue)

2) Check and analyze how the core toolbar was implemented.

3) Check and analyze how @tarekdj's implementation works.

4) Steal and use the best ideas of all implementations for admin_menu.

I think this is also an interesting approach for touch screens #1138844-13: Add touch support to contextual links

AdaptiveTheme recently added a Mobile Menu option which is really nice and works well with mobile, though I'm unsure how well it will work on large sites with admin_menu with lots and lots of menu items, would require lots of scrolling, though I really don't see any way around that without limiting the menu depth. It would be easier to use if the search was the first item revealed but obviously that creates a whole different layer that must be mobile-friendly as well, unless the results simply dropped down and slid the other items down further like AdaptiveTheme's Mobile Menu. Please note this is not Superfish's mobile menu option that was also recently added as it only turns the menu into a form dropdown.

The AdaptiveTheme Mobile Menu changes the menu to this Mobile Menu when it reaches a user-specified width, and that Mobile Menu is then just the title of the menu, then when clicked or touched/tapped, it expands down vertically to nice vertically sliding menus and upon hover, vertically sliding down submenus.

I think Jeff Burnz might have the right idea moving forward for all dropdown menus that change to mobile-friendly alternatives. Keeps it stylable and feels nice from an interactivity standpoint. My experience with the AdaptiveTheme Mobile Menu option is with a Superfish menu that uses the AdaptiveTheme Mobile Menu (not Superfish's).

http://drupal.org/project/adaptivetheme

Would very much love to see a D7 solution for this, as we're starting to do a lot of responsive stuff. What would it take to backport that sandbox project? Is there any part of the javascript/css that could be reused without a total rewrite of admin_menu?

@seanr take a look at the navbar module for a responsive menu that is ready to go.

How about adding on the admin page where users can just add classes to the div's and li's? Some themes (like Bootstrap) use classes to trigger responsiveness. I do see in the .module file that you are creating the main div class dynamically.

I'll experiment a little an see if I can hack something together soon.

Just noting how Backdrop has basically converted admin_menu to a responsive solution: https://github.com/backdrop/backdrop-issues/issues/189 and https://gist.github.com/quicksketch/fffaaa941a3f0ab926c8

I have test it out the backdrop admin_menu version and it works very nice. I think this is something we should consider implementing on the admin_menu.

In the meantime for those user that wants to have that admin_menu and a responsive solution. I created a small module that combine the admin_menu and the navbar menu called admin_menu_navbar.

@darol100 Yes, the admin_menu_navbar module combining admin_menu and navbar is a good solution. It requires the library dependencies for navbar of underscore, backbone and modernizr but these keep cropping up for other things anyway. It's a great example of using mobile_detect module. Thanks.

Just came across this one https://www.drupal.org/project/admin_toolbar

Very very nice the admin_toolbar. I have not try it out but just by looking at the gif.

Using that module and this one https://www.drupal.org/project/commandbar

I think there is pretty much a usable solution for D8 with these three modules (Core toolbar, Admin Toolbar and Command Bar) that is feature parity with D7 Admin Menu.

I liked the admin_toolbar.

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! :)

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! :)