1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS DropDown Menu Compatability

Discussion in 'CSS' started by SEbasic, Nov 24, 2004.

0
  1. #1
    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;
}
    Code (markup):
    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>
    Code (markup):
    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
     
    SEbasic, Nov 24, 2004 IP
  2. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #2
    Lever, Nov 24, 2004 IP
  3. mjewel

    mjewel Prominent Member

    Messages:
    6,693
    Likes Received:
    514
    Best Answers:
    0
    Trophy Points:
    310
    #3
    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.
     
    mjewel, Nov 24, 2004 IP
  4. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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
     
    SEbasic, Nov 24, 2004 IP
  5. carowan

    carowan Peon

    Messages:
    473
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    carowan, Jan 4, 2005 IP
  6. paulhiles

    paulhiles Guest

    Messages:
    18
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    A great resource for creating SE friendly menus is the CSS Menu Generator.

    If you need any further links Oliver, I have a few others that are easy to implement and more importantly free!! :)
     
    paulhiles, Jan 4, 2005 IP
  7. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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>
    Code (markup):
    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.
     
    J.D., Jan 4, 2005 IP
  8. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    SEbasic, Jan 5, 2005 IP
  9. nevetS

    nevetS Evolving Dragon

    Messages:
    2,544
    Likes Received:
    211
    Best Answers:
    0
    Trophy Points:
    135
    #9
    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.
     
    nevetS, Jan 5, 2005 IP