JQuery Tutorial: Create an iPhone Dropdown Menu Using Simple JQuery

When I built my portfolio site a year ago, I had the idea of housing my main content within what would look like an iPad positioned horizontally. Each element of my portfolio—wordpress blog, video, photography, Twitter stream—would be represented in the main section as an app icon you might see on an iPad or iPhone.

When a user clicks on a bundle of iPhone apps (this is the news apps bundle on my iPhone), a dropdown appears in a smooth transition with a crosshatched background and a triangular pointer.

I have been wanting to rebuild my portfolio site for a while now, but when I learned a few JQuery tricks, there was one last thing I wanted to try with my portfolio before I blew it up. Using JQuery to hide an element, I created a dropdown within my portfolio that mimics the behavior of an iPod when a user clicks on a group of apps bundled together (pictured right). I just can’t let go of this iPad/iPhone theme.

CLICK HERE TO VIEW THE DEMO.

STEP 1: Screengrab your iPhone Background

The first step in creating this effect in your portfolio or website is to get a picture of this action on your own iPhone (or steal it from my photo here). To take a picture of your iPhone screen, simply press the home button and the off button at the same time. Email the photo to yourself, save it and open it in Photoshop where we will begin building the background for your dropdown menu.

STEP 2: Creating a Background in Photoshop

To run you through the steps of creating the background for your iPhone dropdown div, I have put together a 5-minute tutorial video. This is my first time using Camtasia for screencapture and editing. It is very intuitive and easy to use. So I hope this video is easier to follow than 20 steps written out. We’ll pick up the HTML, CSS, and JQuery once you have your background created.

http://vimeo.com/30930408

STEP 3: Hiding an Element with JQuery

Using JQuery, you can create a container that can be toggled open or closed when a user clicks on an element on your page. This container is where we will use our iPhone background (in CSS), but before we do that, we want to add our JQuery and HTML markup into the HTML document.

This process is covered nicely in the new HTML5 Digital Classroom book. First, create the HTML page where you would like to place your expandable content. In your head section of your HTML page, you want to paste the following code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('#videodropdown').hide();
	$('a#triggervideodropdown').click(function() {
	$('#videodropdown').toggle('slow');
	e.preventDefault()
	});
});

</script>

Here’s a quick rundown of what that code is doing:

  • type=”text/javascipt” is defining the type of script we are using
  • src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” links out to Google’s publicly hosted jquery library
  • $(document).ready(function () { is the code that gets your HTML document ready to perform the JQuery: $ will always start a reference to JQuery, ready is the code that prepares your document and function defines the new fuction.
  • The next three lines of code define the elements on the page that will be manipulated using JQuery. #triggervideodropdown defines the div that a user will click to expand our hidden element, #videodropdown.

STEP 4: The HTML Markup

<a id="triggervideodropdown" href="#"><img src="video.png" border="0" /></a>
<div id="videodropdown">
<p><iframe src="http://player.vimeo.com/video/27660579?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="400" height="225" frameborder="2" webkitAllowFullScreen allowFullScreen></iframe></p>
</div> <!-- close twitterdropdown div -->

In my demonstration I’ve used this JQuery dropdown technique to display a video I created when a user clicks on the video icon in my iPad-like portfolio page. To do this, I created a link id #triggervideodropdown with an video icon image (img src=”video.png”) associated. This creates a video icon to correspond with the .click (function () javascript defined in our head section. When a user clicks that icon, our div—#videodropdown—is deployed. Our JQuery in the head section tells that div to “toggle (‘slow’);”. As you can see within the #videodropdown div, I’ve embedded my Vimeo video, which can be done in two quick steps:

  • Find a good Vimeo video. For example: http://vimeo.com/8191217
  • Click “embed” in the upper right of the video before it starts
  • Click “customize embed options”
  • Change the size of the player to fit the size of your div section
  • Copy the code in the box that says, “Get the embed code”

STEP 5:  The CSS

Now that we have our HTML and JQuery defined, we will come back to the iPhone background we built using Photoshop. We will create three sections in our CSS: #triggervideodropdown, #videodropdown, and #videodropdown p. Here is the code that I entered:

#triggervideodropdown {
	margin-left:10px;
}

#videodropdown {
	background-image:url(iphone-dropdown-background2.png);
	background-repeat:no-repeat;
	width:477px;
	height:361px;
	margin-left:10px;
	
	
}

#videodropdown p {
	margin-left:10px;
	padding-top:70px;
	padding-left:27px;
}

The #triggervideodropdown margin-left I entered is there to move my icon away from the left edge of my fake iPad.

In #videodropdown, we’ve defined the background with our iPhone background we built in Photoshop. I’ve named it iphone-dropdown-background2.png and have set it to not repeat. I’ve set the width and height of the background to match the pixel width and height of the background we created in Photoshop—477 pixels by 361 pixels.

Finally, in #videodropdown p, padding and margins allow the video, which is sized 400 pixels by 225 pixels to sit roughly in the middle of our background.

And that’s it. Here again is a look at the DEMO. Next up will be to learn how to use JQuery to fade out the other content when the icon is clicked—as you see in the iPhone photo above.

2 thoughts on “JQuery Tutorial: Create an iPhone Dropdown Menu Using Simple JQuery

  1. Nice job, I was looking to do this myself. So I google to see if anyone tried it.
    Thanks for the tut. You did a good job.

Leave a Reply

Your email address will not be published. Required fields are marked *