Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

Search
Use this search form to find what you are looking for.
Tutorials Search

Tutorials Forum Authors Contact Advertise

Tutorial > JavaScript Sponsored links Navigation

Added: 15 August, 2007 3D studio max

Group: JavaScript Most Popular in Last 7 days
Drop-Down Menu Tutorial Photoshop
Group: Photoshop
Author: Mary
Photo retouch add makeup Maya
GO to: Page 1 : Drop Down Menu Tut
and create clear face in
Photoshop CSS
Hits: 990
page: 1 PHP
Drop Down Menu Tut Group: Windows
Windows
Sort your drop down menu out. Get everything together. Customize it for your own demands. Setting up FTP in windows XP
Hits: 923
Enter here to see how it’s made. Cinema 4D
Automated Ajax Testing Flash
Automated functional testing for Ajax/Web 2.0 Group: 3D studio max JavaScript
applications-Free Eval Create low poly house
www.parasoft.com Hits: 739 Poser

FPGA Textbooks
Verilog & VHDL Digital Design Texts using Digilent Group: Flash Join our RSS feed
FPGA kits. Low cost. Creating a Flash Photo
www.digilentinc.com Slideshow Tutorial Join our RSS feed
Hits: 638 Use our RSS feed to get the
latest published tutorials directly
to your news reader.
PayPal Shopping Cart
Start taking PayPal payments. Without a PayPal
Weekly newsletter
account. Join our weekly newsletter and stay informed
www.swreg.org
about our best new tutorials published online. XHTML/CSS coding service
BMW images
[ email ]
1. First off, to get working with this kind of code, it’s really nice – and I really mean it – to get
a nice editor like Notepad ++. It has tabs, syntax highlighting, smart tabbing, and loads more
pizzazz. Subscribe Unsubscribe
Tutorials | Authors | Contact | Advertise
List to subscribe to: 3D studio max | Photoshop | Maya | CSS | PHP
Weekly newsletter | Windows | Cinema 4D | Flash | JavaScript |
Poser
submit All rights are reserved by TechTut.com Please
read our Privacy Policy

Enlarge Image

You can open multiple files at once

1 of 6 1/4/2010 6:02 AM
Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

Enlarge Image

Highlighting, and also tabs

2. Second, let me just clarify that to pass through this tutorial and understand what the heck
I’m saying, I really advise you to go learn HTML and CSS. Some basic programming and
JavaScript syntax wouldn’t hurt either. However, I will try to explain as much as I can.
Personally, I learned HTML at HTMLGoodies.com and CSS at Tizag.com. However, times
are changing, if you seem to have found a better resource, I would just suggest you go with
that.

3. Let’s start. For this simple drop-down menu, we are only going to need 2 files: index.html
and style.css. Create those files and then call the CSS file into the HTML file. (CSS would
be referred to as an external CSS file)

Enlarge Image

Now, create your 4 menu titles such as: ‘Home’, ‘Tutorials’, ‘Gallery’, and ‘About’. Then,
we’re going to add some colors, padding, etc with CSS.

Enlarge Image

Now, let me just say that we do want them on separate lines and let me introduce to you,
something called “block elements” and “inline elements”. Block elements are separated onto
different lines (vertical whitespace is added) and inline elements are not separated, they
stay on the same line. By default <b>,, etc are inline elements (if they weren’t, everything in
front and behind those tags would have vertical whitespace between them). <span> is also
an inline element while <div>,<p>, etc are block elements.

With the paragraph above in mind, to create the menu titles above, we are going to specify a

2 of 6 1/4/2010 6:02 AM
Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

<div> or <b>div</b>ision tag for each of the titles.

Enlarge Image

4. Because we are going to be changing all of their styles with CSS, we will be creating a
class so that they can all be changed at once. A class is like…a class. If you make changes
to a class, everything changes likewise that is a part of the same class. I gave them a class
name of menuTitles but it can be whatever will let you know what it is best.

Enlarge Image

Now save, and then go to the CSS file and let’s make some changes.

Enlarge Image

The simple code in the screenshot above is referring to all classes of “menuTitles” whether
they are <div> tags or not. FYI, we could have just said “div.menuTitles” too, and it would
have worked just fine. By not specifying anything however, we can change the <div> to <p>
tags and the code would still apply to it.

Now, add <b>background</b>, <b>color</b>, and <b>padding</b>. If we need anything

else later, we can add it later.

Enlarge Image

5. Every so often, it is a good idea to check your progress in an actual browser. Whether
you have Firefox, IE, Safari, Opera, etc open up your page in your browser. Once you have,
you will see that we have a little problem.

We only wanted the background to be, say, around 100px but it goes all the way across the
browser! We forgot to specify a width *hangs head in shame*.

3 of 6 1/4/2010 6:02 AM
Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

While we’re at it, let’s also add a height and text-align: center;

Enlarge Image

Save the CSS and then let’s refresh the page…Sweet, it works, it’s all good.

6. Now that we got that down, let’s pick up the pace and create all the menu content (in the
HTML file).

Enlarge Image

You should see the pattern by now…

By the way, add some breaks in because, not only is it good for the soul, but we want the
content to look like the stuff under “Home” and not like the stuff under “Tutorials” (check out
the screenshot below for what I mean).

Enlarge Image

7. Back to the CSS to specify properties for our content.

4 of 6 1/4/2010 6:02 AM
Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

Enlarge Image

Now, check THAT in the browser and you will see some dang ugly colors but at least there
are no problems.

By the way, one more thing. When the page first loads, we don’t want the content to be seen
so let’s add that code right now.

Enlarge Image

8. Save that CSS and then go back to the “index.html” file.

In the <head>…

Enlarge Image

Basically, what that does is create an array (or sometimes referred to as lists) with 4
elements (that’s how many titles we have on our menu) and then each element is equal to
“none”. That’s because each element (“display:none;”) is hidden currently.

Refresh that and you should still see the titles but not the content.

9. Finally for the code…

For each <div class=”menuTitles”>, add this:

onClick="javascript:if(state[1]=='none'){
document.getElementById('menuItem1').style.display='block';
state[1]='block';
}else{
document.getElementById('menuItem2').style.display='none';
state[1]='none';
}”

Basically, what that does is check the state and if it is ‘none’, then it sets the ‘display’
property of the menuItem# to ‘block’ and vice versa.

For each different menu title that you add it into for, remember to always change the number.
E.g. for the second menu title, change all the 1’s to 2’s.

10. Save and Refresh and hope that it works all good…and yes, it does.

Finished.

5 of 6 1/4/2010 6:02 AM
Drop Down Menu Tutorial JavaScript tutorial http://www.techtut.com/Tutorial/JavaScript/19-Drop-Down-Menu-Tutoria...

Cross Browser Testing

See how your website works & looks in all
browsers/OSs. Free trial!
CrossBrowserTesting.com

Backup Your Photos

Rest Easy, Your Data is Protected Unlimited
Backups, Only $4.95/Mo!
Mozy.com/Home

Thousands of 3D Models
Shop our vast library of pre-made royalty free 3D
Models
www.The3dStudio.com

GO to: Page 1 : Drop Down Menu Tut

TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited

and illegal. Translation or usage of any kind without author’s permission is illegal.

6 of 6 1/4/2010 6:02 AM