Responsive primary menu

you could restyle the menu in one of your responsive css. i think they use js here because what they do would require changing the html markup. with some responsive js trick. you could take a look at the site code.

Check these out:
http://css-tricks.com/convert-menu-to-dropdown/
http://mattkersley.com/demos/responsive_menu/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniq...

Also another way (non js) is to load your second menu and hide it on certain widths and show on others. I tend to do this by replacing my larger superfish menus with an easy and shortened menu list and just use css to show/hide as needed. The extra menu doesn't use much bandwidth at all

Just a quick, totally non-js way to do it.

If you look at the markup, there is a Main Menu in a hidden h2. So, in my global.css, I make it display block, make the ul li display:block,

The whole thing is wrapped in a div or something, so css looks kinda like this

div h2 { display:block; }
div ul ( display: none; }
div:hover ul { display:block; }
div ul li { display:block; }

Now you have a tap friendly drop down that looks like it is triggered by the h2.

You just have to go back and over ride everything in default.css to get your horizontal menu back.

I actually got here because of my own problem. I am using Nice Menu for a drop down on the desktop version of the site, however, I can't find a great way to disable it on the mobile version. It seems to over ride all my style rules.

I really wish Omega just supported second level menu items on the primary menu instead of requiring a module...

Still, the guys did a terrific job :)

Thanks,
I used the code from http://mattkersley.com/demos/responsive_menu/ and it works very well. Just be sure to remove the two "console.log" in the jQuery plugin, otherwise, it won't works widows phones.

Just thought I should update you all on the work I'm doing in my sandbox. It is working to implement this technique (as linked above) for Drupal. It is not done yet... see the todo list on the project page for my agenda. I may make it into a full project once those items are taken care of.

The css to add to accomplish the desired affect is going to be similar to what Scott posted above, though a little cleaner in my opinion...

In global.css:

#block-menu-block-<id> ul.menu {
  display:none;
}
#block-menu-block-<id> form {
  display:block;
}

Where ever you want the to toggle that, put that in an @media style sheet. I would advise YOURTHEME-alpha-default-normal.css unless you've changed the settings extensively from the defaults. Include something like the below there.

#block-menu-block-<id> ul.menu {
  display:block;
}
#block-menu-block-<id> form {
  display:none;
}

Disclaimer: I've not tested this yet, so I don't know if display:block is the appropriate setting to use.

Currently, when an item is selected, it will display a button to push to initiate the redirect, and it only displays items from the first level of the menu.

And lastly the link to the sandbox: menu select

Make sure to check out: http://bradfrostweb.com/blog/web/responsive-nav-patterns/

He gives a nice overview of the most common ways to add a responsive menu.

Greetz!

hello, when i should put the js on drupal?? on libraries to work with the menu responsive??

#9 what exactly do you want to achive? To add custom js to youre theme, you can use a preprocess function:

function mytheme_preprocess_page(&$variables) {
    drupal_add_js(path_to_theme() . '/js/custom_script.js');
}

Any idea why the jquery.mobilemenu.js technic isn't working on a page that load a video from Youtube with the mediafront module? Just to make sure I also tested with the premium Responsive theme /project/responsive because it's using the same technic and it's still not working.

I've written a little tutorial on how to implement a responsive toggle menu in Omega here:
http://scottpinkelman.com/blog/responsive-toggle-menu-omega

You can use the Superfish module to accomplish this.

There is a module for this. Check out Responsive Menus

RTBC