Credit Counseling - Problem Mortgage - Myspace Codes - Credit Counseling - Wii Store
PDA

View Full Version : CSS DropDown Menu Compatability

SEbasic
Nov 24th 2004, 6:26 am
OK.

I'm having some real problems with a bit of navigation I am working on for a client site.

I have never had to produce a site with drop down menu's (Personally, I hate them but this time it has to be done.)

I have been looking into CSS dropdown menu's, but none of them seem to work on ie.

I'm pulling my hair out here.

I've been trying to sort this out all day.

Basically, this is what I have so far...

#menubar a {
text-decoration: none;
font-weight: normal;
}

#menubar {
border-bottom: 2px solid #212463;
background-color: #fff;
color: #5161AC;
height: 18px;
padding-top: 3px;
}

.menu {
width: auto;
float: left;
padding: 0px 14px 0px 15px;
cursor: default;
}

.menu ul {
display: none;
position: absolute;
background-color: #fff;
list-style: none;
border: 1px solid #5161AC;
}

.menu ul li {
display: block;
padding: 5px;
}

div.menu:hover ul {
display: block;
margin: 0;
padding: 0;
}

div.menu ul li:hover {
display: block;
background-color: #fff;
}

And Here's the HTML...

<div id="menubar">
<div id="menu1" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu2" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu3" class="menu">
<a href="#">DROPDOWN</a>
<ul>
<li><a href="#">MenuItem</a></li>
<li><a href="#">MenuItem</a></li>
<li><a href="#">MenuItem</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu5" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu6" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu7" class="menu">
<a href="#">MenuItem</a>
</div>
<div id="menu8" class="menu">
<a href="#">MenuItem</a>
</div>
</div>

This works fine in Firefox, but when It comes to ie - no joy.

Does anyone know of a way to produce an SE friendly (preferably CSS but not essential) dropdown menu.

I took most of that Code from an example I found online (Stupidly I didn't check ie when I decided to use it... DUH!!!!).

Really, this is driving me nuts.
Cheers in advance

Oliver
Lever
Nov 24th 2004, 6:51 am
My knowledge of CSS is fairly limited but I know that the Suckerfish dropdown at ala (http://www.alistapart.com/articles/dropdowns/) works in IE - http://www.htmldog.com/articles/suckerfish/example/ you might be able to suss from there...?
mjewel
Nov 24th 2004, 6:51 am
Have you looked at NavStudio? opencube.com

It's not CSS, but is a DHTML Menu system that claims to be cross platform identical with ie, mozilla-firefox, opera, netscape, etc. It's used on the FedEX and Adobe websites.
SEbasic
Nov 24th 2004, 7:02 am
Thanks very much for the quick responses guys...

Man, I've gotta say that those guys at ALA really are sh1t hot...

I think I'll be going with that one thank you very much :D

Cheers Mirajewel, but I think that having had a Fully CSS'd up version offered, I might take that one.

Cheers guys.

Oliver
carowan
Jan 4th 2005, 5:15 pm
I have been contemplating redoing my site with CSS, and after reading the above post, I digested the Suckerfish article--excellent find!

A related article, Sons of Suckerfish, (http://www.htmldog.com/articles/suckerfish/), expands on the original article with both vertical and horizontal nav bars, with up to 4 tiers, and less code.
paulhiles
Jan 4th 2005, 6:50 pm
A great resource for creating SE friendly menus is the CSS Menu Generator (http://www.webmaster-toolkit.com/css-menu-generator.shtml).

If you need any further links Oliver, I have a few others that are easy to implement and more importantly free!! :)
J.D.
Jan 4th 2005, 9:46 pm
This works fine in Firefox, but when It comes to ie - no joy

IE doesn't support :hover on anything but <a>'s. The only way to make portable drop-down menus is with JavaScript (or something more hi-tech, like flash). For example:

<html><head>
<style type="text/css">
#menubar a {text-decoration: none; font-weight: normal;}
#menubar { border-bottom: 2px solid #212463; background-color: #fff; color: #5161AC; height: 18px; padding-top: 3px;}
.menu {width: auto; float: left; padding: 0px 14px 0px 15px; cursor: default;}
.menu ul { display: none; position: absolute; background-color: #fff; list-style: none; border: 1px solid #5161AC; padding: 0; margin: 0;}
.menu ul li { display: block; padding: 5px;}
</style>

<script type="text/javascript">
function show(elem) {elem.style.display = "block";}
function hide(elem) {elem.style.display = "none";}
</script>
</head>

<body>
<div id="menubar">
<div id="menu1" class="menu"><a href="#">MenuItem</a></div>
<div id="menu3" class="menu">
<a href="#" onMouseOver="show(document.getElementById('submenu1'))" onMouseOut="hide(document.getElementById('submenu1'))">DROPDOWN</a>
<ul id="submenu1">
<li><a href="#">MenuItem</a></li>
<li><a href="#">MenuItem</a></li>
<li><a href="#">MenuItem</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">MenuItem</a>
</div>
</div>
</body></html>

This is a simple example - there's still plenty of other things to worry about (positioning, making menus work if JS is disabled, etc).

J.D.
SEbasic
Jan 5th 2005, 2:14 am
Cheers guys, I actually ended up doing this with a script I found somewhere (I'll try and dig out the link)

Cheers for the links offer Paul. Unfortunatley, I royaly coc*ed up my entry for the comp and dropped out.

But thanks for the offer.
nevetS
Jan 5th 2005, 6:30 am
I'm building a css driven drop down menu now...

Got it to work in IE as well as firefox. IE won't handle images on the menus well at all though.

The trick was to use an htc file to get IE to work properly. pm me for sample site (still testing out the site, so I'd rather not post a public link yet.)

Actually, mine's more of a pull-out menu - link list on the side rather than along the top border.