Mobile Menu Design

[statelizard]

I'm hoping someone can point me in the right direction here.

I'm currently using the Responsive wordpress theme that Cyberchimps took over from ThemeID. What I want to do is change the way the mobile menu works. Currently once the browser reaches a specified size the main navigation menu converts into a dropdown menu underneath the header.

What I want it to do is just show a mobile menu button to the right of the logo. When that button is clicked, the menu would expand. I don't even know if I'm explaining that right, so here's an example that does almost exactly what I'm looking to do. Metropolis Creative.

As you can see, when viewed in a normal size screen the menu is a normal nav menu in the right side of the header. When you resize the screen below a specified size the menu converts to the mobile menu button and when clicked it expands the menu and shifts the rest of the page to left.

I know I'll have to mess with the media queries and all that, but I'm struggling with how to change the default theme's mobile menu into this type of menu. Since I know a lot of people here work with this theme I'm hoping someone can point me in the direction of a tutorial or at least in the right direction so I can learn how to do this.

Thanks.

 

[statelizard]

Sorry for the double post, finally figured out the answer, but not before i ran out of edit time.

Figured it out. Well, at least what the action is. It's just a jquery pageslide for anyone interested in it. now I just have to get it working with the theme. Any pointers anyone has on that would still be helpful.

 

[SimplyDesigned]

heres coding and steps. hope it helps. Tutorial: Using the pageslide jQuery plugin - Design Tips, Design Tutorials, Design Inspiration

 

[microphone head]

That Metropolis Creative theme leaves unwanted stuff around for some reason. In Chrome if I 'windowize' my browser to a mobile phone size then maximize again it fucks the CSS up somehow and leave the side-menu up. Obviously this isn't going to be a problem in general but thought you'd like to know.

It kind of falls in line with a lot of responsive WP themes though.