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>CSS: Creating Drop Down Menu's 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 {
margin: 0px auto;
width: 800px;
}
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!
