Responsive Toggle Drop menu - add to subtheme [#1928614]

Hi Guys, can anyone shed some light please?
Basically, I'm trying to make my omega subtheme menus behave like "omega kickstart" and "commerce_kickstart_theme" also known as Toggle Drop responsive or Twitter Bootstrap menu.

So, 1. main menu is responsive to window size;
2. small size window triggers a toggle dropdown menu version.
3. user triggers navigation/main/sub trough navicon on mobile.

Using the commerce kickstart (oemga based) theme does exactly what I'm after (bar the CSS styling). But It's doing my head in as to how to either pull that customization out of commerce or how to build my own mobile toggle drop menu into my (non-commerce) omega subtheme.

so far i've only been able to get selectnav.js to work by adding the adjusted file to .info of my theme.

libraries[subtheme_script][name] = Use selectnav.js for compact menu
libraries[subtheme_script][description] = Some description.
libraries[subtheme_script][js][0][file] = selectnav.js
libraries[subtheme_script][js][0][options][scope] = footer
libraries[subtheme_script][js][0][options][group] = JS_THEME
libraries[subtheme_script][js][0][options][weight] = 1

but i had to add selectnav('main-menu'); into the end of selectnav.js as I couldn't get the menu name into it otherwise. Messy but allowed me to see it work for dropselect.

I would much rather have a trigger dropdown responsive than the select option. ~Worst case I'd like a better way to get the menu id to selectnav.js.

If someone has been able to get the commerce omega menu into a non-commerce omega, could you please help me in the right direction? Thanks

Comments

Comment #1

Heather51 CreditAttribution: Heather51 commented 3 March 2013 at 02:03

Hey there pietpomp

I was having the same issue. Just for a really rough start I have copied the omega_kickstart.js file from the js folder in the Omega quickstart theme and placed it in a newly created js folder in my non-commerce omega sub-theme. Then I edited mysubtheme.info
file and added the line 'scripts[] = js/omega_kickstart.js. I also copied any relevant menu css from the omega kickstart global.css and alpha-default.css to my subthemes corresponding css files.

So far I have the toggle appearing when the page is viewed in mobile. Just need to sort out the css for my particular menu and all should be ok. Will keep you posted on how it works out.

Comment #2

Heather51 CreditAttribution: Heather51 commented 3 March 2013 at 02:07

Adding to my last comment - to help with menu styling I also copied the region-menu.tpl file from the omega kickstart theme to the templates folder of my subtheme. Just at a glance I noticed that the template file adds some div classes to the menu which relate to the css in the omega_kickstart global.css and alpha-default.css.

Now I can simply edit the css colors and backgrounds to match my subtheme and I have a working mobile toggle menu in my non-commerce omega subtheme.

Comment #3

pietpomp CreditAttribution: pietpomp commented 12 April 2013 at 01:22

Yes Heather51, that a good idea. Sorry about the late reply, but that's in direction I took in the end, but got so involved I didn't get back to this thread.
I created a js based on the commerce one and called in my info file as you did. Worth noting was some changes I made in the js to suite my classes.-> main reason: no-script fall back.
Also got into the region--menu.tpl.php added a nojava class (for css styling) and then in the js used .removeClass('nojava').addClass( ' toggle' ) to get the toggle to kick in and remove nojava styling class. Also edited tags in the toggle function so it talks nicely with superfish.

So now I have the main menu managed by superfish, rendering managed omega media queries and css, and compact mobile menu trigger via media queries again but toggle through js PLUS a no js fall back across the board. May be a bit 'pedantic', but I still think no-js fallbacks are relevant and just had to find a reverse applied approach to make it work.
-Lemme know if need more info and thanks for the help offer

Comment #4

srhom CreditAttribution: srhom commented 12 April 2013 at 20:46

I used the technique that Heather51 used in #1 and #2. It's working great. I have a Superfish installation for the deskstop version of the menu, and the kickstart for my mobile version. I do have a question though. If anyone can solve this, I'd really appreciate it.

I'd like to display the child menu items on the mobile menu. Currently, the mobile kickstart menu only shows the parent items. The Twitter Bootstrap mobile menu displays a carrot on the parent item and then drops down to show the child items. I'd like to work the same way.

I've tried a few things, but no success. Anyone have an idea of how to do this?

Comment #5

Kristina Katalinic CreditAttribution: Kristina Katalinic commented 17 April 2013 at 22:32

I wrote a Tutorial on how to implement a responsive drop down and mobile toggle menu for Omega subtheme that doesn't require any modules, displays children on hover and turns into a toggle menu with children included on mobile devices.
http://www.webmar.com.au/blog/how-create-responsive-mobile-menu-omega-su...

Comment #6

MrPaulDriver CreditAttribution: MrPaulDriver commented 17 April 2013 at 23:04

Mobile Menu Toggle is what you need. See http://drupal.org/sandbox/kbasarab/1791874

In the case of Omega, this module hides and shows the menu region, where you should place your main menu. I have used it successfully with standard Drupal menus, Menu Block, Superfish and Accordion

The dev version only works with Omega, but the 7.x-1.x version promises cross theme compatibility.

It's a sandbox project, so you'll need to get the latest snapshot from the git repository.

Background reading.-.
http://www.mediacurrent.com/blog/responsive-design-mobile-menu-options

Background listening...
http://drupaleasy.com/podcast/2012/12/drupaleasy-podcast-94-michigan-min...

Comment #7

hildesheim CreditAttribution: hildesheim commented 26 April 2013 at 13:57

#5 Works!!
Using (testing) OpenPublic distributuion with OpenOmega theme.
Thanks Kristina

Comment #8

Anonymous (not verified) CreditAttribution: Anonymous commented 13 May 2014 at 23:38

Hi,
I found these posts as I also wanted to implement a toggle drop menu in my omega subtheme. If someone still reads this thread, I would be very happy if you could tell me what the disadvantages are of just using the omega kickstart theme as it is for a non-commerce site?
Thank you in advance!