11 comments found.

No, this is a touch friendly version. It has a similar effect but is quite different in execution. If you check out the demo you can see this by using the mouse to slide the menu open and closed. I did utilize the menu text animation css from that tutorial as it was perfect but the open, close and touch functionality are completely different. I couldn’t quite find what I needed for an app I was working on so I built this. Thanks for asking. I love the stuff from codrops.


Can you load external file instead of the menu, using jquery load() method as an example ?


you can give the menu items an id and then auto load content into the content section something like this.




then on the menu button you would need to be <button id=”menuid”>Menu Item</button>

Hope that helps.

Thnaks, will give it a try.

can this work just like any webpage online ???

It’s standard javascript and some css3 so it’s pretty modern web standard. However IMO I think this particular panel is really geared towards mobile. If you have a particular implementation in mind then I’d be happy to discuss.

I need to link to 5 external urls non internal.

1 http://app.redessanmiguel.com/ 2 http://redsocial.redessanmiguel.com/ 3 http://app.redessanmiguel.com/ 4 http://tv.redessanmiguel.com/social.php 5 http://gutierrezpalcon.org

This inside of a webview app.

can you help me with the script example using the cod not on android but on a weburl.

or how much for an app with this menu?

I built this code for an IOS phonegap application I’m working on. To load the specific pages you’re using you could extend the menu items and code something like this:

On the buttons and a data attribute for the url you are trying to load:

<button class="button" data-url="http://app.redessanmiguel.com/">
    Menu 1

then in the code in main.js for the buttons:

$('.outer-nav .button').on('click',function(event){



     mySwiper.swipeTo(1, 700, true); //Close the swiper


Hope this helps.

Hi, This is hybrid web? This can be registered app store for ios and android?

I’m writing a phone gap app right now to use it for the ios app store. It compiles and works fine on my iphone 4s

Works with PhoneGap ?

I built this for one of my phonegap apps. The one thing I had to do was set the parent wrapper display none/block on app pause and resume. Webview was a bit buggy on resume with the 3d translation.

I want Menu Layout.
--—(down scroll)


I want scroll menu.

should be possible. You’ll need to wrap the menu in a div with a fixed height and an overflow:auto;


Thanks for your code. The menu is very great ! I may observe a bug with the menu. The menu doesn’t display well when you rotate the mobile. Could you confirm me this problem please?

May I also have some help please? Could you put the menu on the right ? and how to disable the animation when the page finishes to load.

Thanks in advance.

I’ve always used the menu locked in portrait mode for my phonegap apps. I’ll do some testing to see if I can work out a solution for the rotation. I’ll also try to work up a template for putting the menu on the right as well. That might take until the next release when I update some of the code to newer versions.



I have a website that uses tinynav for the mobile menu (on bootstrap). Here it is:


Will you help me transform it into a responsive nav menu, such as your Responsive Menu? Thanks!

Hey mate! I must say, awesome file! I want to purchase an extended license, and use the menu as a component for a ThemeForest product. Is that okay? :)

That works for me. Let me know what you build. I’d love to see it.

Perfect! I’ll give credit for the navigation, that’s a fact! I do have a question for you, as you’re the creator, it’s gonna be a breze to answer! Can I make the content and the sidebar scrollable ( oveflow:scroll ), as I see now, adding a lot of content to either the sidebar or the content box will keep the overflow hidden, and will not allow scrolling! Other than that, I want it! :D

I would accomplish that by placing an inner div with a width and height of 100% and enable the scroll for that div. Good luck.