CSS Main Menu Styling

HTML & CSS
1

Hi,

I am trying to design a horizontal drop down navigation bar using pure CSS. I have found and pasted into Dreamweaver CS5 the coding at Pure CSS Drop Down Menu Example 1 CSS

This is what I am looking for except I want the horizontal navigation to appear in boxes, the same boxes that appear/drop-down when you hover the mouse-pointer over the links. The basic text links do not look as professional as the drop-down boxes do!

Can I do this with code? I do not want to use images; if CSS can design the drop-down boxes there should not be a problem with designing boxes for the main links??!?

Please help,

Matthew.

2

If I design with PURE CSS navigation it will work with all but IE6, right?

And if I use JavaScript, like the example in the web site you suggested to me, what could the limitations be?

What is the best method? Lose IE6 users or lose users not enabling/without JavaScript?

I am thinking if I use the PURE CSS then IE6 will see the main navigation but it wont drop down. Is this correct? Can you convince me that JavaScript will give a similar result whereby users will see the navigation but if JavaScript is disabled it will not drop down?

Matthew.

3

Bit hard to understand what you mean by “boxes”. Do you have a working example to show us, and perhaps a picture of what you want it to look like? “I want the horizontal navigation to appear in boxes” could mean anything without a picture to go by. Nevertheless, I expect what you want to achieve is doable with CSS.

4

The link to the coding is at the link in the first comment I added.

Or here:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Drop Down Menu</title>
<style type="text/css">
/* -------------------- Main body tag styling  ---------------------- */
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
}

/* -------------------- What the entire dropdown backround will look like and its positioning  ---------------------- */
ul {
    margin:0;
    padding:0;
}
.dc{
    display:inline;
    position: relative;
    z-index: 0;
    margin:0;
    padding:0;
}
.dc:hover{
    background-color: transparent;
    z-index: 50;
}
.dc ul{ 
    position: absolute;
    width:120px;
    background-color: #999;
    left: -1000px;
    list-style-type:none;
    visibility: hidden;
}
.dc:hover ul{ 
    visibility: visible;
    top: 16px;
    left:0px;
}
/* -------------------- What the list items will look like inside the dropdown  ---------------------- */
.dc ul li{
    margin:0;
    padding:0;
    background-color: #EBEBEB;
    margin:1px;
}
.dc ul li:hover {
    background-color: #FFF;
    margin:1px;
}
/* -------------------- What the links look like inside the dropdown  ---------------------- */
.dc ul li a {
    display:block;
    padding:4px;
    font-size:12px;
}
.dc ul li a:link {
    color: #333;
    text-decoration: none;
}
.dc ul li a:visited {
    text-decoration: none;
    color: #000;
}
.dc ul li a:hover {
    text-decoration: none;
    color: #333;
}
.dc ul li a:active {
    text-decoration: none;
    color: #333;
}
/*      END PURE CSS DROP MENU        */
</style>
</head>
<body>
<div class="dc">
<a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="dc">
<a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
</body>
</html>
5

Yeah, but that’s just a boring page of code. I’m talking about your working example of this. To me, just showing the code is like saying “Do you like this new tune I’ve composed? Here’s the sheet music …”

Anyhow, the more important question is, What do you mean by “I want the horizontal navigation to appear in boxes”? I can guess at what that means, but it’s better not to be guessing, as a lot of time can be wasted on a misinterpretation.

6

Unfortunately I have only just bought Dreamweaver CS 5 so it is just on my computer!

Basically the problem, as I see it, with the code is that it styles only what happens when the link is hovered over. There is ZERO styling on the actual horizontal navigation bar! So in short: It is a horizontal list of text links whereby the CSS styling is only applied when hovering over these text links.

How do I style the text links to appear identical to the styling of what appears when the link is hovered over??

If this is not enough info. I’ll have to get something uploaded somewhere.

Matthew,

7

OK, try something like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pure CSS Drop Down Menu</title>

<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
ul {
margin:0;
padding:0;
}
#menu {
list-style: none;	
}
#menu li a {display: block; border: 1px solid #eee;}
.dc{
float:left;
position: relative;
z-index: 0;
margin:0;
padding:0;
}
.dc:hover{
background-color: transparent;
z-index: 50;
}
.dc ul{
position: absolute;
width:120px;
/*background-color: #999;*/
left: -1000px;
list-style-type:none;
visibility: hidden;
}
.dc:hover ul{
visibility: visible;
top: 24px;
left:0px;
}
/* -------------------- What the list items will look like inside the dropdown ---------------------- */
.dc, .dc ul li{
margin:0;
padding:0;
background-color: #EBEBEB;
margin:1px;
}
.dc:hover, .dc ul li:hover {
background-color: #FFF;
margin:1px;
}
/* -------------------- What the links look like inside the dropdown ---------------------- */
.dc a, .dc ul li a {
display:block;
padding:4px;
font-size:12px;
}
.dc a:link, .dc ul li a:link {
color: #333;
text-decoration: none;
}
.dc ul li a:visited {
text-decoration: none;
color: #000;
}
.dc ul li a:hover {
text-decoration: none;
color: #333;
}
.dc ul li a:active {
text-decoration: none;
color: #333;
}
/* END PURE CSS DROP MENU */
</style>
</head>
<body>
<ul id="menu">
<li class="dc"><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>

<li class="dc"><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
</ul>
</body>
</html>

The best way to test that code is to paste it into a TextEdit/Notepad file and name it something.html and then double click that file to open it in a browser. (I’m not sure Dw’s live render will do it justice.)

I changed the main menu divs to LIs, as this is a better way to do menus. (They are, after all, a list of links.)

This is a rough recode, but see if that helps. :slight_smile:

8

I’m going to be horribly honest: that dropdown code is crap.

This is good news, it means you don’t have to learn how to style it.

I believe the dropdown code and tuts at HTMLdog are pretty decent.
The famous “Sons of Suckerfish” dropdown menus

If you are not supporting IE6, you can leave the Javascript out entirely. The nasty code you posted above was leaving IE6 in the dust anyway: you can hover on divs in all other browsers, but not IE6, so that wouldn’t have worked.

A note about DreamWeaver: if you got it because you need to get a site up quickly and easily, fine. If you got it because you’re interested in learning to do front-end code, uninstall it and lock the installation disc in a box somewhere. I won’t say “throw it away” because if you bought it, you paid a lot for it.

Instead, I’ll say find a simple, plain and no-compromise text editor (there are gazillions, but basically it should handle UTF-8, not save with a BOM, do syntax highlighting and NO word-processing stuff… and I’d even say, no code completion or auto-indent either… notepad++ is I believe free for Windows and anything that’s like that will do, though there are better editors).

Years later, after you’re all grizzled and crusty and can code most of a website out on a napkin, you can get DreamWeaver out again, turn off all its “helpful” junk, and use it as an advanced text editor that does lots of neat-o stuff that saves you time.

It’s not a bad editor, but not a good idea to be learning on it if that’s what you plan.

If you have any questions on the Suckerfish (or similar style) menus, ask! You can try out just copying their code and then playing with the styles, and if you get stuck you can post your stuck version (just wrap it in

 tags) here and we can help.
9

Yes — that’s what I was looking for. The immediate issue now is the width of the boxes. Can each MAIN box width be different? And can the boxes that appear BELOW be exactly the same width of the MAIN boxes.

Does this get complicated, as we are only styling for the complete menu. Is it a problem breaking up the code for each one separately?

You helped with my main problem - thanks again. Any ideas on this width issue?

Matthew.

10

Can each MAIN box width be different? And can the boxes that appear BELOW be exactly the same width of the MAIN boxes.

Yes. If you want the widths to equal the width of the text inside, then generally just floating the li’s with “width: auto” (gets around the Opera bug) would do that (the width would collapse to the width of the content inside). Then if the sub ul’s are “width: 100%;” that should be 100% of their parent, the li.

Ralph’s code should already let the li’s be whatever widths… and for the submenus he’s got
width: 120px which you could change to width: 100%;

IE6 as usual has other ideas, but not sure if you’re supporting.

11

Hi Stomme poes,

Thanks for the heads up on the better navigation bar. I’ve had a look and will try it out!

I was looking to avoid the use of JavaScript in the web site. I have heard that using JavaScript can cause problems with some browsers! I guess you are promoting the use of JavaScript!?! I thought using a Pure CSS navigation bar would be the answer to any potential problems with JavaScript! Do you disagree with my prior reasoning?

All comments welcome,

Matthew.

12

Not really. It’s just better not to rely on it, as some people will have it turned off or some browsers won’t support it at all … though that’s rare.

The main point is that IE6 doesn’t support hover on elements other than <a>s, so you need a little JS help to get a CSS drop menu to work there. However, IE is over 100 years old in web years, so you can pretty safely ignore it now. (Ducks and braces himself for flame throwers. :smiley: )

Here is a slightly re-hacked version of the code above to show how equal widths could be set. As Stomme said, this ain’t beautiful code, and my tweaks could be made a lot more efficient, but it’s my bed time. :wink:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Impure CSS Drop Down Menu</title>

<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
ul {
margin:0;
padding:0;
}
#menu {
list-style: none;	
}
#menu li a {display: block; border: 1px solid #eee;}
.dc{
float:left;
position: relative;
z-index: 0;
margin:0;
padding:0;
}
.dc:hover{
background-color: transparent;
z-index: 50;
}
.dc ul{
position: absolute;
left: -1000px;
list-style-type:none;
visibility: hidden;
}
.dc:hover ul{
visibility: visible;
top: 24px;
left:-1px;
}
/* -------------------- What the list items will look like inside the dropdown ---------------------- */
.dc, .dc ul li{
margin:0;
padding:0;
background-color: #EBEBEB;
margin:1px;
}
.dc:hover, .dc ul li:hover {
background-color: #FFF;
margin:1px;
}
/* -------------------- What the links look like inside the dropdown ---------------------- */
.dc a, .dc ul li a {
display:block;
padding:4px;
font-size:12px;
}
.dc a:link, .dc ul li a:link {
color: #333;
text-decoration: none;
}
.dc ul li a:visited {
text-decoration: none;
color: #000;
}
.dc ul li a:hover {
text-decoration: none;
color: #333;
}
.dc ul li a:active {
text-decoration: none;
color: #333;
}

.first, .first ul li {width: 100px;}
.second, .second ul li {width: 200px;}

/* END PURE CSS DROP MENU */
</style>
</head>
<body>
<ul id="menu">
<li class="dc first"><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>

<li class="dc second"><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
</ul>
</body>
</html>
13

Regarding JavaScript the web site I am redesigning currently uses a JavaScript shopping basket system called JShop. Some of our customers have called us saying “the prices at your web site appear as ‘undefined’” and this is due to JavaScript. So they could not purchase online!

Is JavaScript less of an issue with navigation bars? I dont want to design a navigation bar that says ‘undefined’ because I am using JavaScript? Could this be the case?

Matthew.

14

I was looking to avoid the use of JavaScript in the web site. I have heard that using JavaScript can cause problems with some browsers!

Yes, it can.

I guess you are promoting the use of JavaScript!?!

Oh hell no! : ) Heh, I’m kinda known around here as the anti-JS nazi, though really my only problem with it is when devs use it as a crutch for their poor HTML/CSS skills : )

I thought using a Pure CSS navigation bar would be the answer to any potential problems with JavaScript! Do you disagree with my prior reasoning?

Nope, a “pure CSS” nav bar is preferred (though be aware, there are usability issues with dropdowns for some folks either way).

As Ralph said, IE6 can’t properly use one… however, they are not necessarily the ONLY folks having similar trouble with a CSS nav bar! (what do people using a touch device do, if they have no :hover??)

The way around this issue is to have your main-level menu items be clickable to somewhere that has all the sub-menu links in plain view somewhere. Because most users will be desktop users with a mouse, CSS and JS on, they won’t notice a redundant page. Users without mice, or using touch devices, or IE6 without Javascript will still have a way to reach your submenu links.

I actually use a bit of Javascript in my dropdowns nowadays:
I sometimes add a slight onmouseoff delay so that users with shaky hands don’t get deep into a menu and then lose it all because the mouse wandered off the submenu for a nano-second (though the deeper the menu, the less usable it becomes and the more usability/accessibility problems you run into, because they are delicate things).
I also add in some Javascript to bring the submenus onscreen for keyboarders (with pure CSS you can get the actual submenu item onscreen, but you can’t keep the other menu items onscreen at the same time).

If you’d like to see the effects of Javascript on a dropdown menu, check out this page with Javascript disabled, and then enable it (be sure to tab through the menu with JS off, and then JS on, to see the difference).

However, IE is over 100 years old in web years, so you can pretty safely ignore it now. (Ducks and braces himself for flame throwers.

FLAMES!!!1

Since I’m going ahead and supporting the .000005% of my users who may be blind and using a screen reader, I’m sure as heck going to support those who cannot upgrade their IE or use another browser (and I have almost 20% of these people, not ignorable).

Regarding JavaScript the web site I am redesigning currently uses a JavaScript shopping basket system called JShop. Some of our customers have called us saying “the prices at your web site appear as ‘undefined’” and this is due to JavaScript. So they could not purchase online!

Yes, Magento I find especially guilty. All communication with the server should be done via forms with submits and POSTs. If you want schmancy with that, you use a technique known as “Hijax”: Javascript, if enabled, stops the form submission and replaces it with some Javascript version instead. Users with JS on get the whatever-is-better-about-it experience… users without still get working forms. I can order stuff on Amazon.com without Javascript.

Is JavaScript less of an issue with navigation bars? I dont want to design a navigation bar that says ‘undefined’ because I am using JavaScript? Could this be the case?

It won’t say undefined, it just won’t drop down if it requires JS to drop down.

The bad menus have href=“#” in the top-level items, so without JS you don’t get anywhere : (

15

Yes if done correctly.

And if I use JavaScript, like the example in the web site you suggested to me, what could the limitations be?

In that example Javascript is used to enhance the user experience not to replace the css function. The menu still works in all except IE6 when js is off.

What is the best method? Lose IE6 users or lose users not enabling/without JavaScript?

As Stomme said just make the top level link go to an intermediate page where the vistor can then select further options from a static submenu.

I am thinking if I use the PURE CSS then IE6 will see the main navigation but it wont drop down. Is this correct?

Yes.

Can you convince me that JavaScript will give a similar result whereby users will see the navigation but if JavaScript is disabled it will not drop down?

It depends whether the javascript is layered on top of the css or not. If all the hiding and showing are done with javascript and there is no css hover functions added then it will not drop down. No one should be building a site like that these days though.

You can use the superfish menu which builds on top of the basic suckerfish menus that were linked to somewhere above.

Note that in Ralphs code above you need a fix for IE7.


.dc ul {
    position: absolute;
    left: -1000px;
    list-style-type:none;
    visibility: hidden;
 [B]   background:#fff;[/B]/* ie7 fix*/
}
16

Hey Paul doesn’t the non-existent image trick work too?

background: url(“#”);
?

17

I have found an article at Creating Search Engine Friendly Drop-down Menus using CSS | Antezeta Web Marketing

that says for Search Engine Optimisation it is best to use CSS only navigation bars, as JavaScript can cause pages to be missed when ranking!

It also says towards the end something about creating a separate file for ie6 so that the navigation bar will work with ie6. Would you recommend adding such a file (that only executes with ie6) or would I be better off ignoring the ie6 browser whereby the user will see the navigation bar but wont experience the drop down effect?

Matt.

18

There are many valid arguments (such as this) against using CSS-only dropdowns. As mentioned already, JavaScript solutions are only a problem if the menu depends on JavaScript, but that’s only the case in bad web design. A well-designed menu that is enhanced with JavaScript will be as search engine friendly as any other menu. The JavaScript aspect is then irrelevant to the search engine.

19

Yep that would work also :slight_smile:

That only applies to old fashioned javascript menus that contain the sumbenus in javascript and not on the page like the examples we have shown you.

it also says towards the end something about creating a separate file for ie6 so that the navigation bar will work with ie6.

I think we have all said the same thing about three times now and you make the top menu links link to an intermediate page so that the site can still be navigated when css is off.

If you want to be 100% safe then use a persistent dropline menu that shows the sub menus by default. It’s only suitable when you don’t have loads of sub menu links. Here’s a very old example.

20

The file it suggests adding is a an htc file and again the code within that file will only work if javascript is enabled.

Whether you support IE6 or not is a decision you have to make based on your sites statistics or target audience.