Pure CSS Drop Down Menu
First of all, we all owe a BIG "THANK YOU!" to Steve Gibson of Gibson Research (GRC.com) for
making the pure CSS drop down menu stylesheet public domain. Thank you Steve!
To get the full picture of what this menu is capable of doing, you can view Steve's comments on the GRC's
Script-Free Pure-CSS Menuing System page.
I personally found the links he points to a bit confusing. While I tried to adapt many of them to our website, I was unsuccessful. As you all know,
I don't speak "geek" or "technical" talk and it seems that tutorial sites make some assumptions that we all clearly understand what
they are saying. Unfortunately, some of us don't!
This tutorial should be handy for those of you who are what I call, "Copy and Paste" coders. That is, you see something you like and
hijack the code by copying and pasting. Been there, done that myself! (GRIN)
So, without further chatter, let's get started on understanding Steve's code.
Addition/Corrections: I've updated this page to reflect some corrections I've had to make in my directions.
First Things First
There are three things you will need to do first.
- Download Steve's Stylesheet for the menu here: www.grc.com/mainmenu.css
- Save the source code to his intro page by going to www.grc.com/intro.htm,
right click on the black part of the page (so you're not over a graphic), select: View Page Source (in FireFox) or View Source (in IE), and
then save it as a text file.
- Create graphics for your drop down menu buttons.
As for your graphics....
It doesn't matter what size width they are, nor height. You just have to make sure that when you add the entire width they will fit within the
area of your page that you want to put them.
For example, our page width is 700 pixels. Therefore, the total width of our graphic buttons could not exceed 700px. Our home button is
49 px wide, the courses button is 79 px wide, and so on across the top. But when we added them all up, they did not exceed the 700 pixel
width we needed.
Also, plan out what titles you will use, how many, and the particulars of your menu. The pre-planning you do here will save you having to
add and/or tweak this later on!
So keep that in mind when you are designing your graphic buttons.
After you have completed your graphics, upload them to your website in the appropriate folder or directory.
Next Step: Prepare the Page
If you look at the very top of GRC's intro page, you will see two lines of
code that appears before the head tag (<head>).
Specifically, these two lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
You MUST place those above your head tag in your html page EXACTLY the way they appear here or copy and paste
them from your text document of the GRC intro page.
Next, you need to add the reference to the stylesheet you'll use for the menu.
Specifically, this code:
<link rel="stylesheet" media="all" type="text/css" href="/mainmenu.css" />
I placed this immediately below our current mice stylesheet. You can see that in our page source code if you'd like to
check.
Now, upload the mainmenu.css to your website.
If you are working on a page that refers to the base page as we do, you may have to upload this
several times as you make adjustments. If you can work offline so to speak, you don't need to
upload it until you're done.
Now you are ready to understand the code, place it in your document and tweak the stylesheet a bit.
Calculations & Minor Tweaks First
Referring to the mainmenu.css, in the class called: .menuminwidth0, you will see a
line that states:
height:55px; /* 36px masthead height + 18px button height + 1px lower border*/
This is where you have to tweak the height for your specific masthead graphic area.
For example, the mice masthead image you see on this page measures 690 pixels wide and 97 pixels high.
Our buttons are varying widths but are all 13 pixels high. We also chose a 2 px lower border. So, our
calculation here is 97 + 13 + 2 for a total height of 112px.
You will need to adjust your height setting to fit your needs.
The next line beneath the height is the setting for the minimum width.
min-width:560px;
Because our masthead graphic is 690 pixels wide, I had to adjust this minimum width to 700px.
Adjust this to fit your needs.
The next item is really not a calculation. There is a typo in the style sheet. You need to remove the
backslash ( \ ) from the word display in the next section for the printing media. Specifically, this line:
@media print, projection { .menuminwidth0 { d\isplay:none; } }
Should read:
@media print, projection { .menuminwidth0 { display:none; } }
Under the next set of classes under * html .menuminwidth1 and * html .menuminwidth2, I also had to
adjust the minimum width to fit our specific masthead graphic and I moved it out to 600px and -600px.
That seemed to work.
In the #masthead section, I needed to adjust the size of the overall menu height above the new menu-bar, and we didn't want
a grey background. So I needed to change these two values:
height:36px; /* set the overall height above the menu-bar */
background:#F3F3F3; /* a very light shade of grey */
Since our masthead graphic is 97px high, I wanted the masthead to appear 97px above the new menu-bar so we changed the
height to 97px and the color to our mice green.
I left the focus, search, text, and Yah as it is because I didn't use them in our page layout.
That leads me to the next portion of the stylesheet which deals with the top menu cascade. There are just a few more minor tweaks
here and we're done with that for now.
Under the section or class called .menu, you'll need to adjust the line that reads:
height:18px; /* the menu's overall height */
The height should be equal to the height of your graphic images you will be using.
The other line in this section you may want to change is the background for the menu. Steve has his set to grey.
background:#f3f3f3;
Scrolling down the mainmenu.css sheet a little further, there is another typo you need to clear out.
Under the section or class: .menu ul li table and specifically, this line:
m\argin:0; /* re-zero the table margins for everyone but IE5 */
Remove the backslash between the m and the a so the line reads:
margin:0; /* re-zero the table margins for everyone but IE5 */
Now, there is another line you need to scroll down and look for in order to change the background in the
drop down portion of the menu. Find the line that reads:
.menu ul li a:hover ul li a { /* 2nd level unselected items */
Beneath that section or class is the background color for the menu. You will need to change this line to the
background color of your choice:
background:#d8d8d8; /* this sets the drop-down menu background color */
Then, scrolling down to the section under 3RD LEVEL MENU DEFINITIONS, you'll need to change the background
under the section or class code: .menu ul li:hover ul li:hover ul li a to fit your color needs. This is for the
background of the sub-sub menu boxes.
background:#d8d8d8;
Updated Section: I don't know if you noticed it, but our menu was acting really "quirky"
and you really had to almost fight with it to get to the sub-menus! Well, I finally figured it out after walking
myself through each line of the style sheet.
The drop downs work in CSS because of the hover property. Steve mentions it on his css page, and of course, I
was in a hurry and just brushed over it. But it's VERY IMPORTANT!
The reason our menus were acting the way they were is because I failed to put in the height of our graphics in
the hover properties. Specifically, the height under the TOP LEVEL MENU DEFINITIONS, these two sections or classes:
.menu ul li a:visited { /* unselected top-level menu items */
.menu ul li a:hover { /* selected top-level menu items */
Once I changed the height to our 13px height, the menu worked to allow us access to the sub-menus.
Now, save your file and we're ready to begin setting up your html page.
There will be one more section we may need to deal with in the mainmenu.css, but we won't know that
until we start adding your code and graphics into the page.
Putting It into Your HTML
If you look at GRC's intro or default page source, you'll see that he's sectioned off
the portion of the page that deals with the menu specifics.
And if you look really close at that portion, you can see the pattern in the code that creates the
actual drop down menu.
But let's take it step-by-step.
The first thing I did was add the first three lines of code from Steve's page to start the section
of our masthead going. Specifically, I added these three lines:
<!-- ################### GRC Masthead Menu ################### -->
<div class="menuminwidth0"><div class="menuminwidth1"><div class="menuminwidth2">
<div id="masthead">
I placed this code directly above our image tag for our masthead so that the image tag followed immediately
after the last line of code. This creates the start of the drop down menu area and allows for the menu
to fall immediately below your masthead image. Given that your height sizes are correct in your tweaks that is!
Immediately following the masthead image, Steve has some stuff going on in his code with a focus button and
the search which we didn't want in ours. So, I can't help you on that section. I can honestly admit I didn't
understand what was being accomplished there other than putting in the search button and the text box.
If you are wishing to do the same as we've done here, you will close out the masthead division tag after you
insert your graphic by using the </div> tag.
So, to illustrate, the start of our code looks like this:
Okay, now that the above image totally skewed our own page layout! (GRIN) Let's proceed.
The next step is to place your own graphics and sub-menu items into the code after setting up
the section or CSS class for it. The <div class="menu"> is what starts the entire menu, but it
will not work without the prior code in the masthead section. So don't think that you can by-pass
that step because you can't. These classes all work together to form the whole.
Each main section of the menu and its subsequent sub-menu items starts with the unordered list tag (<ul>) and
closes the section with the end unordered list tag (</ul>).
If you look at Steve's page that you saved as a text, you'll see that the first unordered list is the link and
image code for the button. There is also some odd looking code that has to be included so that incompatible browsers
will adopt to this code. Do not leave that code out!
What I did to enable our CSS menu here, is I copied and pasted Steve's code into our page and adjusted the link
references and image codes to fit ours. I suggest you do the same so you don't leave anything out. It also saves
you a ton of typing time too!
There is one distinct difference between the very first button and the next when it comes to the start of the drop
down menu. That difference is a class code at the beginning of the unordereed list. I took a screen shot of my textpad
document where I show you the code for the first two buttons. Where you see the blue arrows marks where the drop down menu
starts for of the first two buttons. Notice that the first button has the class "leftbutton" in the code but the drop down
menu on the second button does not.
The "leftbutton" class on the first drop down relates back to the mainmenu.css code created to
prevent the first button from getting skewed. Specifically, this code:
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
The remaining buttons do not use it.
The next major portion of this menu is a button that contains a sub-menu. This is used on Steve's page under the Freeware
button. I've formatted my copy of the GRC default text page to show you the sections of that code and highlighted with a
blue arrow the "skinny" class for the sub-menu categories. My division of the sections are put in the brackets to make it
easier for you to follow the flow of the code.
The skinny class code is also in the mainmenu.css just below the leftbutton code in the section for the 2nd level
menu definitions. This tightens up the sub-menu list so that it doesn't take more space then it should.
So what you should be seeing here is that you can easily copy and paste the appropriate code to fit your buttons - either with a
single set of drop down menu items, or a sub-menu drop down with a list associated to the sub-menu - as long as you remember to
use the "leftbutton" class code for the very first button and the "skinny" class code for any sub-menu type
drop downs.
Now that brings us to the FINAL button and the associated code.
I must admit, I had quite a hard time with this one! But with enough playing around with our own
page code (outside of Steve's CSS), I was able to get it to work in both IE 7 and Firefox. The only difference between the
two is that Firefox centers the menu and IE justifies it left. But I'm not arguing! (SMILE)
If you look at Steve's code for the final button labeled "Research", you'll notice that
he's using the class code by the same name. Specifically, this code:
<li id="research">
This class relates back to the mainmenu.css class by the same name and what it is supposed to do is place the last button
into a permanent left position so that the button does not overlap or hide in some browsers. There's a comment in the css file
that relates to Opera, but I'm not sure what that refers to either.
When I tried to use this class myself, it worked perfectly in IE 7 and I believe at one point, where I had the number lower
than it should have been, the button did slide under the home button. However, in Firefox, it caused our help button to cover
most of the shop button and unless you knew the shop button was there, you'd miss it! When I eliminated the use of the class
in the final button, everything finally fit into place after a few minor adjustments to our own margin codes in the mice.css that
was also affecting this area.
Perhaps this code is necessary in Steve's layout and is somehow related to his focus button or search layout? I don't know.
I've done my best to illustrate the steps I took to use this code as well as try to teach you a few things along the way (if you happen
to be one of those copy and pasters I mentioned!). I hope you will benefit from this tutorial.
With mixing and matching these codes that Steve provided us with, you can create a customized drop down menu in Pure CSS.
Again, a special and BIG "THANK YOU" to Steve Gibson at Gibson Research for providing the CSS code for public domain use.
You're awesome STEVE!
|
