Discussion on Drawer | Sidebar Navigation for Mobiles & Tablets

19 comments found.

Congrats, looks really nice !

I was in doubt. I do not know how to put new content. If it is a link to a new page or an anchor for content. Even so, I do not know how to reference

This is simply a sidebar page. The page content goes inside the following code structure, it’s explained in the documentation and you can see a comented line in the code where to add it.

<div class="content">
    <div class="container">
        <!-- Add your content here --> 
    </div>
</div>
Simply duplicate the container div, you can also add the code bellow between the containers to create a decoration line!
<div class="decoration"><!--Nothing here--></div>

If it’s still to hard, we have an already coded template in our portfolio called The Drawer, the template uses this sidebar and it’s fully coded and packed with elements! The sidebar was put on CodeCanyon for everyone who wants to build from the ground up, as the description says! :) If there is anything else I can help you with, please send me a message through my profile and I will gladly assist you! :)

I may have missed it somewhere, but, Is there a way to keep the user from swiping the main page back to the left? Id like to limit it to that trigger button only.

iPhones do not allow disabling overflow-x, so that won’t work…

I just bought this, but dont know how to install into my wordpress web. try to install from plugin but can not. please guide me how to set this

Where does it say it’s a WordPress plugin? It’s a HTML template.

I thought you guys might want to see my implementation. We got the sidebar going on our responsive design for http://www.hueyandweprin.com. It’s even coded so that it is generated by Wordpress, so any changes made to the Wordpress menu is updated automatically on our mobile menu.

We have a 2 WordPress themes that use it! :P but great job nevertheless! :)

1. Would this plugin work with bootstrap? 2. How customizable is it?

It’s not a plugin.

Ok…however will it work without conflicts with bootstrap? Also wanted to know how customisable it is

Thank you very much for doing this!

Very glad you like it! Don’t forget to rate it 5 stars! It helps a lot! :)

there is an issue with browswers that does not support fixed postions ,

despite of all issues in the design dont matter , but an issue in input feilds , when trying to input a text the screen will go up and down , while you typing in android devices

hi, I recently purchased and am trying to close the drawer automatically when a user selects a menu item… can you help with the logic required to close when an item is selected… it looks like it is in the CSS… but we would need to trigger via click / javascript event? thanks,

It’s not CSS, it’s a JavaScript event. You can find them in custom.js! :)

This is pretty awesome, but it seems like there is quit a big flaw in this. If the user doesn’t click the drawer button, and just tries to slide the content or the nav left/right to close the menu, then it messes everything up. It makes the drawer stay where it is, and just messes up the positioning of everything. Can you please provide an update to fix this….

Here are two screenshots of this happening:

I’ve the same problem please Fix it!!!

«This is pretty awesome, but it seems like there is quit a big flaw in this. If the user doesn’t click the drawer button, and just tries to slide the content or the nav left/right to close the menu, then it messes everything up. It makes the drawer stay where it is, and just messes up the positioning of everything. Can you please provide an update to fix this….

Here are two screenshots of this happening: http://bluetide.pro/B2Ns/4V6mK9kn http://bluetide.pro/tSIC/2KVeWG3u”

You have changed the requirements after the purchase into demo is write: SCRIPT FEATURES Optimized code! Mobile Ready Tablet Ready Compatibile with Android 2.3.6 and higher Compatible with iOS 4 and higher Compatible with Windows Mobile 7.5 or higher Compatible with RIM 6 or higher Very simple installation!

If you look at the item, right sidebar, you will see the item was created on the 30th of May 2013 and was last updated on the 30th of May 2013. Nothing has changed since then.

I’m interested in this, looks good. Slightly concern regarding the last two comments though, will you be addressing these?

Thank you for your question. We don’t have any issue with the item as it works properly on the operating systems mentioned in the description. It’s not our fault the requirements are not read! :)

Requires iOS5 , Android 4.2, Windows Mobile 8, the latest RIM

Hi,

I want the drawer to close once a menu item is clicked, how would I get this to happen? What do I need to put into the custom.js?

Thanks

Just so you know I am using anchor links

Never mind I have figured it out. For anyone else who needs to do this you need to add a class to the menu items (only the anchor link items) of .hide-sidebar-link and add the following code to the custom.js:

$('.hide-sidebar-link').click(function(){
    $('.page-content').animate({
        left:'0px'
    }, 500, 'easeInOutExpo');
    $('.show-sidebar').show();
    $('.hide-sidebar').hide();
    return false
});

Haha! Glad you figured it out! All the best mate!

Not bad, but this should use css3d transforms. Its chunky on a web app using cordova. Also the images folder is verbose. It should be svg fonts. Font awesome or some other alternative.

Thank you for your suggestion! Much appreciated! Also, thanks for the purchase! :)

Does this sidebar work in IE+9, Firefox and Chrome?

If it works on mobiles, you can bet it works on desktops! It’s just a navigation template! :)

I love this nav menu a lot. Is there a way to make it open from the right instead of the left?

Check DuoDrawer! It has that feature. This item requirese code changes to make it open from the right.

Could this be implemented in jQuery mobile (Using Phonegap build via DW CC)?

Thanks for your purchase, yes it can, but we do not offer support for PhoneGap! Sorry for the late reply, we were on holidays for 10 days!

Hi i need the same thing as rdcrew3392 above. the drawer to close once a menu item is clicked But i didnt quite understood his solution. Any chance you can explain? I already added the code to the custom.js But how to make it work? Thanks

by
by
by
by
by
by