How To: Create a Simple Drawer UI In jQuery

Posted on 11 December 2013 under tutorial javascript jquery
Update 19/12/2013: Demo now available



About


If you open the Facebook app on your iPhone/Android/Lumia phone you'll notice there's a menu panel displayed if you swipe with your finger from left to right, or click the little icon with the three lines. This is called a Drawer. It can be very helpful if you want to clean up your website from distractions when visited from a mobile device, or even from the desktop.

Using jQuery, you can easily create a Drawer element. This is how:

Step 1: Create your main page (HTML)


First step is to create your main HTML page. For simplicity, the page only contains 2 divs, one for our main page (called main_page) and one for the drawer (called drawer_element). This is how it looks like:



Step 2: Import jQuery to your page


Next step is to import jQuery to your page. To do this, paste the line below anywhere between your head tags:



So that now it would look something like this:



Step 3: Style your page (CSS)


Now it's time to implement some CSS. We will be hiding the drawer element so that it appears only after the user clicks on a link (which we'll create later).

This is how our CSS looks like:



Firstly, we have set "position" to "absolute" for our drawer, so that it won't be affected by other elements of our page.

Then we've set "top" and "left" to 0px so that it's original position is at the top-left corner of the screen.

We've set the width to 300px (you can set it to whatever you like) and the height to 100%, so that our drawer will vertically fill the screen when it appears.

Finally and most importantly, we are setting "margin-left" to -300px (which is the negative value of the drawer's width) so that it disappears from the screen. We will be manipulating "margin-left" to appear and disappear the drawer throughout this tutorial.

After you're done with your .css file, link it to your page by adding this line in your head tag:



where style.css is the name of your CSS file.

Step 4: The Javascript and jQuery


Now for the magic. Create a new file with a .js extension (preferable drawer.js). This file will contain all the Javascript and jQuery code for your drawer's functionality.

Firstly, create a variable and call it drawerIsOpen. This is a boolean variable that will indicate whether your drawer is open or not.



Next, create a function called openDrawer(). This function will be responsible for opening your drawer (obviously).



The function will use jQuery's animate() function to set the margin-left of your drawer to 0px (so that it will appear on the left corner) and your main_page to 300px (so that it will move aside for the drawer). Optionally you can set the "overflow" attribute of your main_page to hidden.

Next step, create a new function called closeDrawer(). This function will of course be responsible for closing the drawer.



This method sets the margin-left attribute of the drawer back to -300px (so that it will disappear) and the main_page back to 0px, it's initial position.

Now we will combine the two functions in a function called toggleDrawer(). This function will use the drawerIsOpen variable we defined to decide whether the drawer will open or close:



And this completes our drawer.js file:



In your main HTML, paste this line to link it to your .js file:



(change the name of the .js file as needed)

Step 5: Add a link to your main_page to run the drawer


Last but not least, add a link to your page and have it call the toggleDrawer() function from your .js file:



Test!


Now you can test your code! Make sure everything is correctly placed and coded. Of course you can style each of your elements as you wish using your .css file.

Did the tutorial work for you? Did something go wrong? Did I forget something? Let me know in the comments!

My App

Apart from writing these blog posts, I also build apps for Android. Check out my latest app, Gradester!

Comments

comments powered by Disqus

About Sav

Popular Tags

Follow Sav's Blog