1 of 2
1
CSS: Creating Drop Down Menu’s Tutorial
Posted: 07 December 2009 11:27 PM   [ Ignore ]
Newbie
Rank
Total Posts:  17
Joined  2009-12-07

A lot of people have actually struggled with figuring out how to code something like this, and have failed many times, always asking for help. Well, infact, drop down menu’s based purely oncss is very simple, a lot simpler then you though. Drop down menu’s with CSS use basic principles and commands such as the display command to cause a “action” to happen. In jQuery, it would say, slide down, but with CSS, it would just appear, doing the exact same thing minus the slide effect. Without further-ado, lets get into our tutorial.

In this tutorial, I am expecting that you have learned at least the basic principles of CSS and (X)HTML and can code to standards, that means no tables in your layout.

Setting up the HTML

This section will be the most easier of the two to do because all we need to do is set up a basic navigation (horizontal) using a couple UL tags. UL stands for un-ordered lists, which are more commonly used for menu’s and navigation bars. To start, open up your programming IDE, such as Dreamweaver, or if you don’t have an IDE, you can always use Notepad which is on every windows computer, and on the mac, it is the “Mac Notepad” which I do not think is installed when you get it, so soft32 has provided the free trial for us. Mac OSX Notepad Free Trial

On your editing software, either DW (Dreamweaver) or Notepad, or any other editing software, set up your document doc type, and all of your basic essentials. I always use XHTML 1.1 because it is the most up to date version and is the most strict on errors, which actually, makes you better. You could also use XHTML 1.0 Strict or Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">

<
head>
  <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <
title>Untitled Document</title>
</
head>

<
body>
</
body>
</
html>

Once you have inputed your code workup, save your file, this prevents you from say, closing it and losing your work. DO THIS FREQUENTLY to prevent lost data. From now on, unless specified, we will be putting all of our (X)HTML code inside the body tag, so I will not list the Head tag, Doctype ect etc. Now, we will set up our divs for our navigation and our basic list items. We gave our navigation a wrapper so that we can center everything like the way we want it.

<div id="wrapper">
  <
div id="navigation">
    <
ul>
      <
li><a href="#">Home</a></li>
      <
li><a href="#">About</a></li>
      <
li><a href="#">Downloads</a></li>
      <
li><a href="#">Support</a></li>
      <
li><a href="#">Forums</a></li>
    </
ul>
  </
div>
</
div>

So, looking back, we have set up our wrapper for centering our layout, our navigation div where we hold our navigation menu, and our list for the menu buttons. For the next step, we are going to have to edit one of our li items so that it will have a drop down menu inside of it. For my example, I will use the Forums list item. The “...” just means there is code there that we have not edited or is continuing from.

...
      <
li>
        <
a href="#">Forums</a>
        <
ul class="dropdownmenu">
          <
li><a href="#">Website Design</a></li>
          <
li><a href="#">Scripting</a></li>
          <
li><a href="#">Tutorials</a></li>
          <
li><a href="#">Report Abuse</a></li>
        </
ul>
      </
li>
...

We have completed our tutorial. A pat on the back for you.

But wait, what about the CSS? Oh yeah, I guess I should talk about that as well. First, create a new CSS page and save it right away as “layout.css” minus the quotes. Inside of our head tag on our (X)HTML page, put the following code.

<head>
  <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <
title>CSSCreating Drop Down Menus Tutorial</title>
  <
link rel="stylesheet" type="text/css" href="layout.css" />
</
head>

Make sure first that the CSS is in a easy place to find, possibly in the same directory. If you do not have a IDE like Dreamweaver, I have provided the proper code in the beginning of the css file.

@charset "utf-8";

/* Wrapper */

/* Navigation */

I have added a few comments to it so that I can seperate each area of my code. Lets start working on our wrapper so that we can align everything to the center. First, we would set a fixed width (this can also be fluid by using %, but in this example, I will only use a fixed width) so that the margin auto trick will work.

/* Wrapper */
#wrapper { margin: 0px auto; width: 800px; }

I myself am used to coding on 1 line, but you could of coded it like this if you find it easier.

/* Wrapper */
#wrapper { 
  margin0px auto
  
width800px
}

This will now make everything aligned to the center inside of that div. Save your CSS file and double click on your (X)HTML page to view it in your browser. If you have Dreamweaver, F12 is the hotkey to open up internet explorer unless otherwise specified. If you viewed your page, you probably would of noticed those nasty bullets, well with a easy command, we can get rid of them. Lets start working on the css of our
navigation bar. Re-open your CSS page if not already and add the following code.

/* Navigation */
#navigation {}
#navigation ul { list-style: none; }

If you refresh your page, you will see all bullets or any other form of the bullets have dissapeared. But, now we want to make a nice looking navigation bar, so lets do that. We can add some borders, and give it some color.

THIS PAGE WILL BE CONTINUED IN THE NEXT POST!

Profile
 
 
Posted: 08 December 2009 12:06 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  17
Joined  2009-12-07

/* Navigation */
#navigation { background-color: #353F66;  border: 1px solid #000; }
#navigation ul { color: #FFF; list-style: none; margin: 0px auto; width: 400px; }
#navigation ul li { }

You have now given the background a color, a border, but also probably noticed that the links are really ugly color. “But I thought we set the color of the links using the color command?”, Well, no, we set it for text, since links are handled differently than normal text, we need to set their color directly.

/* Navigation */
#navigation a { color: #FFF; text-decoration: none; }
#navigation { background-color: #353F66;  border: 1px solid #000; }
#navigation ul { color: #FFF; list-style: none; margin: 0px auto; width: 400px; }
#navigation ul li { }

I have also removed the underline because we want to show that its being hovered in the next part. So, lets work on its hover state, using the pseudo command :hover, we can have mouse events on the link (a).

/* Navigation */
#navigation a { color: #FFF; text-decoration: none; }
#navigation a:hover { text-decoration: underline; }
...

Yah, were done that part. Now, onto the next thing. Obviously everything is still in a vertical tone, so lets fix that by floating our navs list items (where the text is) to the left so that everything becomes horizontal.

...
#navigation ul li { float: left; width: 75px; }
...

Now, we have set our width of each list item, and floated it left to be horizontal. But, now there is a spacing problem, so a simple fix with some padding should do the trick.

MORE TO BE ADDED, I HAD TO GO!

Profile
 
 
Posted: 18 January 2010 11:16 PM   [ Ignore ]   [ # 2 ]
Newbie
Avatar
Rank
Total Posts:  3
Joined  2010-01-18

Awesome post Billy, thanks a lot!

Profile
 
 
Posted: 14 June 2010 11:54 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  17
Joined  2010-04-20

very nice post, i love this forum

_________________________________________________________
Home Improvement Tips, Business Finance Advice, Business Idea

Profile
 
 
Posted: 24 June 2010 10:46 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  10
Joined  2010-06-16

That’s a great help specially the beginners like me.

Background Check

Profile
 
 
Posted: 06 July 2010 11:50 AM   [ Ignore ]   [ # 5 ]
Jr. Member
RankRank
Total Posts:  35
Joined  2010-06-17

Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required!

_______________________
acne scars treatment | acne scar remedies | provillus

Profile
 
 
Posted: 27 July 2010 11:28 AM   [ Ignore ]   [ # 6 ]
Member
Avatar
RankRankRank
Total Posts:  94
Joined  2010-06-17
e-ticaret - 25 July 2010 04:28 PM

e-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticarete-ticaret

Seriously - you need to stop.  This just sucks for everyone.

Dave Davies
Beanstalk SEO

Profile
 
 
Posted: 03 November 2010 02:37 AM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-03

I really learn more about HTML and XHTML from your blog. It is very helpful for me and its tutorials are very helpful for me. Thanks for great work!!! Pool Remodel

Profile
 
 
Posted: 03 November 2010 02:48 AM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-03

I have been seen your blog its really very helpful for learner. I also a learner and i want to say thanks for this post. NYC Moving Companies

Profile
 
 
Posted: 03 November 2010 03:52 AM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-03

my knowledge just increased ten-fold due to your incredible and pragmatic knowledge and I will certainly bring this into my friendly discussions in the future. Freshersworld | IT jobs

Profile
 
 
Posted: 04 November 2010 03:10 AM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  2
Joined  2010-11-04

CSS is most important for us because its need is not only necessary for site representation but for search engine indexing !
Your all topic about CSS is very informative for us.

SEO Service

Profile
 
 
Posted: 08 November 2010 06:33 AM   [ Ignore ]   [ # 11 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-08

Determine the direction we will head in and create a written plan for our future. Success is Planned provides financial commentary on all things financial; whether directly or indirectly.  “Money is the root of all evil”, is common quote that I have determined to be completely false.

Profile
 
 
Posted: 09 November 2010 06:34 AM   [ Ignore ]   [ # 12 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-09

I just couldn’t leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. computer security information | holiday lingerie

Profile
 
 
Posted: 13 November 2010 08:24 AM   [ Ignore ]   [ # 13 ]
Newbie
Rank
Total Posts:  1
Joined  2010-11-13

Wow, i was always wanting to know how to create dropdown menus on simple HTML files, although this is not so much needed today, as we’ve got many CMS systems that take care of creating drop down menus easily. Nice post nevertheless!

Profile
 
 
Posted: 20 December 2010 02:13 PM   [ Ignore ]   [ # 14 ]
Newbie
Rank
Total Posts:  1
Joined  2010-12-16

Are this the code for making CSS dropdown menu replacing javascript for a lighter site loading?

Profile
 
 
Posted: 22 December 2010 02:46 PM   [ Ignore ]   [ # 15 ]
Newbie
Rank
Total Posts:  1
Joined  2010-12-22
TheLetterman - 20 December 2010 02:13 PM

Are this the code for making CSS dropdown menu replacing javascript for a lighter site loading?

Yes you can do exactly that,this will reduce ur page load tremendously .

Car DVD Player | Headrest DVD Player

Profile
 
 
   
1 of 2
1
 
‹‹ Separate CSS files!      Justin Feinberg ››