By Marc Bijl on

For my new website I'm looking for a module, code snippet or whatever, that changes the menu into a mobile friendly menu, for example a dropdown or accordion style menu. Ideally it would be something that looks like Bootstrap uses here: http://twitter.github.com/bootstrap (make the window small to see the effect).

I've been searching in the forums and found a discussion here:
- http://groups.drupal.org/node/213613

Then there are these modules, that I can't get to work:

TinyNav
- http://drupal.org/project/tinynav

Mobile Menu Toggle
- http://drupal.org/sandbox/kbasarab/1791874

I cannot imagine there's no simple, easy to use module for noobs like me...

Who can help me?

Very much appreciated ;-)

⋅ Categories: Drupal 7.x

Comments

Strutsagget’s picture

Strutsagget commented

I just got it working on AT-theme

Activated the module.

Added blocks.

Added primary links to header region.
Added menu toggle to header region.

Changed these files to use my id of the menu (#block-system-main-menu and not #zone-menu)

mobile_menu_toggle.js
mobile_menu_toggle.css
mobile_menu_toggle.tpl.php

And then added some css media queries to style the menu in different positions right.

//PiJa Media & Management AB din apputvecklare

Marc Bijl’s picture

Marc Bijl commented

Hi Niklas,

Thnx for the reply and help. After following your instructions there's at least something happening! I didn't know I had to replace #zone-menu...

However, it looks terrible. I really don't have a clue how to write css to get things right... I'm a designer, not a coder ;-)

Isn't it weird that a CMS like Drupal doesn't have a standard solution for mobile menus?

BTW
I looked at your site, and the mobile menu looks great! Did you use mobile_menu_toggle for this?

Strutsagget’s picture

Strutsagget commented

Hi!

Yeah i used mobile toggle(glad you think it looks ok!) did some more changes to the module file though(to add the objects i wanted, button with stripes and not just a plain link ) and then added my styles as i wanted it in the css.

you need to first hide the toggle link with display:none; and then display: block; within a media query

I do really recommend learning css even as a designer as its only layout and not really programming :) and you can do alot of stuff just changing the css of themes.

Heres some great books!

http://shop.oreilly.com/product/9780596527334.do
http://shop.oreilly.com/product/9780596155940.do?sortby=publicationDate
http://www.amazon.com/The-Book-CSS3-Developers-Future/dp/1593272863/ref=...

//PiJa Media & Management AB din apputvecklare

Marc Bijl’s picture

Marc Bijl commented

Hi Niklas,

Thnx for posting some extra hints, like hiding the toggle link and displaying as a block.
Nice suggestions, those books; great!

Btw
I know a bit about css and I can theme my own designs; however, the mobile menu looked so crap at first sight, that I didn't want to solve another puzzle. Sigh... I'm still wondering why a CMS like Drupal, with such a huge and great community, doesn't have a nice working module for menus at mobile devices. It's been five years since the iPhone was introduced...

Marc Bijl’s picture

Marc Bijl commented

Found this neat slider menu:
- http://www.tegdesign.com/tegansnyder-JQuery-Mobile-Slide-Menu

Code can be found here:
- https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu

Would be nice if someone can make a module of it... ;-)

Marc Bijl’s picture

Marc Bijl commented

Hi Niklas,

It seems like we're getting somewhere! :D

However, there's a situation where the menu doesn't work as planned.

Browse to your website, using a desktop browser at full size. There's the main menu. Then make the browser smaller, till you see the menu toggle. Now unfold and fold the menu again. Then make the browser full size again.

Do you see what I mean?

Marc Bijl’s picture

Marc Bijl commented

UPDATE

Posted some css here before, but sorry: I was wrong... Bugger!

Strutsagget’s picture

Strutsagget commented

Hi thx!

Yeah i noticed that earlier and as i happens i forgot to add !absolute to the css to force the menu visible on higher resolutions.

I have used the menu here also.

//PiJa Media & Management AB din apputvecklare

Marc Bijl’s picture

Marc Bijl commented

Got the whole damn thing working, using tinynav module!

danny englander’s picture

danny englander
(he/him)
commented

I've incorporated, a nice mobile menu into my theme, Bamboo:

http://drupal.org/project/bamboo and the demo: http://bamboo.themehuis.com/

You can have a look at the code and most likely retrofit the menu to any other theme. The mobile menu starts at widths below 768 px.

Danny Englander | Twitter | Instagram

Marc Bijl’s picture

Marc Bijl commented

Hi Danny,

Thnx for the reply, but I'm more a designer than a coder; don't have any clue how you implemented the mobile menu...

Jeff Burnz’s picture

Jeff Burnz commented

Adaptivetheme has this built into the latest dev version (at time of writing, eventually this will be the stable version), however you need to turn it on in the Extensions and save its settings. It will work for your small touch/smartphone breakpoints out of the box and you can enable it for your tablet breakpoints if you want. The Extension adds some wrapper markup and classes to the Primary and Secondary menu, and any block in the Menu Bar region, when the screen size is small or reduced the menu is hidden behind a toggle button.

In terms of theming its strait forward, simply add your CSS to the responsive styleshseets as per normal. Done. If you want it to overlay instead of sliding the content down just position it absolutely. Again, done.

Did I mention it works with Superfish menus also, of course it does :)

Its quite tricky how this works - warning developer speak commencing, you do not need to know this to use - however for developers this is interesting - AT adds the layout names and breakpoints to Drupal js settings, the menu toggle js grabs these settings and uses matchMedia and a callback to fire the slideToggle. This should immediately be clear to advanced theme developers that you can do this also, for example fire any JS for any breakpoint simply using Drupal js settings. If you change your breakpoint in the theme settings no need to update JS matchMedia etc, the new values are right there in the JS settings. FYI they are all in the adaptivetheme object, so you can get to them like this:

Drupal.settings['adaptivetheme']['my_theme']['menu_toggle_settings']['smalltouch_portrait']

Something like that, this will return the media query for that breakpoint.

See the menu-toggle.js in the core theme for one way you can do this.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Diane Bryan’s picture

Diane Bryan commented

Jeff, I'm so glad I found this thread... could you add an article to your blog on your site? This tiny feature is really a big one. Mobile menus just have to enter the mainstream conversation.

I tried it out on a local install, and it's so COOL! Works like a dream. And I can use CSS to change text into graphic, or style the link as a CSS button. Couldn't ask for more.

Thank you!
d

gerhardbaumeister’s picture

gerhardbaumeister commented

Hi Jeff,

with Panels Everywhere: as soon as activating the AT Panels Everywhere site template i get a white screen.
Tried on a clean install with AT Core 7.x-3.1+62-dev and AT Panels Everywhere 7.x-3.0-rc1 .

Can you confirm this behaviour? Or was it my mistake?

Without the site template, the menu toggle works great.

Best Regards,
Gerhard

Diane Bryan’s picture

Diane Bryan commented

Gerhard, I think you need to make a separate issue out of this in the Adaptive Theme issue queue, since it's not really an answer to the question that started the thread.

phpbits’s picture

phpbits commented

I've just created a new module that will make it easier to add mobile responsive menu or sliding content. Feel free to check it out here : http://goo.gl/VLPfvv

Cheers!