Urgent help needed with CSS drop down menu

**DarkArcher** · 03-09-2008, 02:58 PM

Here's my website: Click

I really need some help trying to make a drop down menu. From what I've read all over the place, a nested <ul> is the best option. What I want is to create a drop down menu only for the "Pen Modifications" button.

Can anyone help me? ***This is a little different as I'm not linking between pages but between div layers. I've already got a javascript to manage that ability, and the drop down requires another from what I gather... can both operate together? What should I do?

Ps. If you're kind enough to offer me some "live" help, please PM me your MSN email, thanks so much. =)

**Rayzur** · 03-09-2008, 04:54 PM

Have a look at this suckerfish menu. There is a horizontal and vertical example. It is a 4 level deep menu but you can cut the code out and get less drop levels if you don't need 4.
View the source code on the demo page to see how it is coded in the html.

**DarkArcher** · 03-10-2008, 09:36 AM

Hi, I've tried the sucker fish method, but it just doesn't seem to work. The hover doesn't work even though I've used the javascript to enable it to work in IE.

Is my div switching javascript in the way? I need the drop down menu links to actually switch content within the page between div layers without a page refresh.

I hope there'll be a solution to this soon, I have been trying this for some time.

Thanks,
DarkArcher

**molendijk** · 03-10-2008, 01:30 PM

Darkarcher,
This script works all right. I'll give you the whole page. I think brothercake won't mind, since the page where the script originally featured has gone.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Simple website menu</title>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<!-- menu stylesheets -->
	

<style type="text/css">

ul.vertical, ul.vertical li {
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:100%;
	}

ul.vertical {
	position:absolute;
	z-index:1000;
	cursor:default;
	width:8em;
	left:1em;
	top:4.05em;
	}

ul.vertical li {
	position:relative;
	text-align:left;
	cursor:pointer;
	cursor:hand;
	width:8em;
	margin:-1px 0 0 0;
	}

ul.vertical ul {
	z-index:1020;
	cursor:default;
	position:absolute;
	width:8.2em;
	margin:-0.5em 0 0 7.5em;
	top:-100em;
	left:-1px;
	padding:1px 0 0 0;
	}
	
ul.vertical ul li {
	width:8.2em;
	}

ul.vertical ul ul {
	margin:-0.5em 0 0 7.7em;
	}

@media Screen, Projection { 
	ul.vertical li:hover > ul { top:0; }
	}

ul.vertical a, ul.vertical a:visited {
	display:block;
	cursor:pointer;
	cursor:hand;
	background:#ffc;
	border:1px solid #edbb85;
	padding:5px 7px;
	font:normal normal bold 0.7em tahoma, verdana, sans-serif;
	color:#008000;
	text-decoration:none;
	letter-spacing:1px;
	}
	
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
	background:#ffefcf;
	color:#806020;
	}



@media screen, projection {
	* html ul.vertical li {
		display:inline; 
		f\loat:left; 
		background:#ffffff; 
		}
	}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }

ul.horizontal, ul.horizontal li {
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:100%;
	}

ul.horizontal {
	position:absolute;
	left:0;
	width:100%;
	cursor:default;
	z-index:2000;
	top:1.05em;
	}

ul.horizontal li {
	width:auto;
	float:left;
	position:relative;
	cursor:pointer;
	cursor:hand;
	text-align:left;
	left:10.55em;
	margin:0 0 0 -1px;
	}
	
* html ul.horizontal li {
	margin:0 -10.55em 0 10.5em;
	}

ul[class^="horizontal"] li {
	margin:0 -10.55em 0 10.45em;
	left:0.05em;
	}

ul.horizontal ul {
	z-index:2020;
	padding:0;
	cursor:default;
	position:absolute;
	top:auto;
	width:8.2em;
	margin:0 0 0 0;
	left:-10000px;
	}
	
ul.horizontal ul li {
	width:8.2em;
	left:auto;
	margin:-1px 0 0 0;
	}

ul.horizontal ul.wider, ul.horizontal ul.wider li {
	width:12.2em;
	}

ul.horizontal ul ul {
	margin:-0.45em 0 0 7.65em;
	}

@media Screen, Projection { 
	ul.horizontal li:hover > ul { left:auto; }
	ul.horizontal ul li:hover > ul { top:0; }
	}

ul.horizontal a, ul.horizontal a:visited {
	display:block;
	cursor:pointer;
	cursor:hand;
	background:#ffc;
	border:1px solid #edbb85;
	padding:5px 7px;
	font:normal normal bold 0.7em tahoma, verdana, sans-serif;
	color:#008000;
	text-decoration:none;
	letter-spacing:1px;
	}
	
ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a.rollover, ul.horizontal a.rollover:visited {
	background:#ffefcf;
	color:#806020;
	}



ul.horizontal a { float:left; }
@media Screen, Projection { ul.horizontal a { float:none; } }
ul.horizontal a:not(:nth-child(n)) { float:left; }
ul.horizontal ul a { float:none !important; }
@media screen, projection {
	* html ul.horizontal li {
		display:inline; 
		f\loat:left; 
		background:#ffffff; 
		}
	}
* html ul.horizontal li { position:static; }
* html ul.horizontal a { position:relative; }
ul[class^="horizontal"] ul { display:none; }
ul[class^="horizontal"] ul { displa\y:block; }

</style>


<script type="text/javascript">

/*
SWIM2.0 :: Simple website menu
DOM scripting by brothercake -- http://www.brothercake.com/
Licensed under GPL -- http://www.gnu.org/copyleft/gpl.html
For professional menu solutions visit -- http://www.udm4.com/ 
*/

window.onload = function()
{var verticals = new simpleMenu('menu-v', 'vertical');var horizontals = new simpleMenu('menu-h', 'horizontal');
var horizontals1 = new simpleMenu('menu-h1', 'horizontal');
};

function simpleMenu(navid, orient){if(typeof document.getElementById == 'undefined' || /opera[\/ ][56]/i.test(navigator.userAgent)) { return; }this.iskde = navigator.vendor == 'KDE';this.isie = typeof document.all != 'undefined' && typeof window.opera == 'undefined' && !this.iskde;this.isoldsaf = navigator.vendor == 'Apple Computer, Inc.' && typeof XMLHttpRequest == 'undefined';this.tree = document.getElementById(navid);if(this.tree != null){this.items = this.tree.getElementsByTagName('li');this.itemsLen = this.items.length;var i = 0; do{this.init(this.items[i], this.isie, this.isoldsaf, this.iskde, navid, orient);}while (++i < this.itemsLen);}}simpleMenu.prototype.init = function(trigger, isie, isoldsaf, iskde, navid, ishoriz){trigger.menu = trigger.getElementsByTagName('ul').length > 0 ? trigger.getElementsByTagName('ul')[0] : null;trigger.link = trigger.getElementsByTagName('a')[0];trigger.issub = trigger.parentNode.id == navid;trigger.ishoriz = ishoriz == 'horizontal';this.openers = { 'm' : 'onmouseover', 'k' : (isie ? 'onactivate' : 'onfocus') };for(var i in this.openers){trigger[this.openers[i]] = function(e){if(!iskde) { trigger.link.className += (trigger.link.className == '' ? '' : ' ') + 'rollover'; }if(trigger.menu != null){if(trigger.ishoriz) { trigger.menu.style.left = (isie || isoldsaf) ? trigger.offsetLeft + 'px' : 'auto'; }trigger.menu.style.top = (trigger.ishoriz && trigger.issub) ? (isie || (trigger.ishoriz && isoldsaf)) ? trigger.link.offsetHeight + 'px' : 'auto' : (isie || (trigger.ishoriz && isoldsaf)) ? trigger.offsetTop + 'px' : '0';}};}this.closers = { 'm' : 'onmouseout', 'k' : (isie ? 'ondeactivate' : 'onblur') };for(i in this.closers){trigger[this.closers[i]] = function(e){this.related = (!e) ? window.event.toElement : e.relatedTarget;if(!this.contains(this.related)){if(!iskde) { trigger.link.className = trigger.link.className.replace(/[ ]?rollover/g, ''); }if(trigger.menu != null){trigger.menu.style[(trigger.ishoriz ? 'left' : 'top')] = trigger.ishoriz ? '-10000px' : '-100em';}}};}if(!isie){trigger.contains = function(node){if (node == null) { return false; }if (node == this) { return true; }else { return this.contains(node.parentNode); }};}}
</script>

</head>

<body style="margin-left:11em;margin-top:5em">

TEXT

<!-- vertical navbar -->
<ul id="menu-v" class="vertical" style="position:absolute;top:20%;left:3%;">
<li><a href="../contact/" title="Contact me">Contact</a></li>
	<li><a href="../resources/" title="Scripts, games and articles">Resources</a>
		<ul>
			<li><a href="../resources/scripts/" title="Scripts and widgets for your website">Scripts</a>
				<ul>
					<li><a href="../resources/scripts/tooltips/">Onfocus tooltips</a>


<ul >
<li style="position:relative;top:-40px"><a href='javascript:'>nog wat erbij</a>
<li style="position:relative;top:-40px"><a href='javascript:'>en nog wat erbij</a>
</ul></li>

					<li><a href="../resources/scripts/barreltimer/">Barrel timer</a></li>
					<li><a href="../resources/scripts/onload/">Generic onload</a></li>
					<li><a href="../resources/scripts/sniffer/">Client sniffer</a></li>
				</ul>
			</li>
			<li><a href="../resources/games/" title="Games and puzzles suitable for all ages">Games</a>
				<ul>
					<li><a href="../resources/games/zenblocks/">Zen Blocks</a></li>
					<li><a href="../resources/games/frogger/">Frogger</a></li>
					<li><a href="../resources/games/chess/">Chess Player</a></li>
					<li><a href="../resources/games/fishrace/">Fish Race</a></li>
					<li><a href="../resources/games/hangman/">Hangman</a></li>
					<li><a href="../resources/games/mastermind/">Mastermind</a></li>
				</ul>
			</li>
			<li><a href="../resources/terms/" title="Please read the terms before downloading anything">Terms of use</a></li>
			<li><a href="../resources/mailings/" title="Subscribe to brothercake's newsletters">Mailing list</a></li>
		</ul>
	</li>

</ul>





<div style="position:absolute;top:7%;left:10%;width:90%;z-index:0">
<!-- horizontal navbar -->
<ul id="menu-h1" class="horizontal">
	<!-- mac/ie5 needs an empty span (or other element)
	     somewhere inside each horizontal navbar link
	     to avoid a rendering bug -->
<li><a href="../contact/" title="Contact me"><span></span>Contact</a>
	<!-- os9/ie5 needs at least one tab, space or line-break
	     between the </a> and </li> of each horizontal navbar item
	     to avoid a bizarre rendering bug -->
	</li>
	<li><a href="../resources/" title="Scripts, games and articles"><span></span>Resources</a>
		<ul>
			<li><a href="../resources/scripts/" title="Scripts and widgets for your website">Scripts</a></li>
			<li><a href="../resources/games/" title="Games and puzzles suitable for all ages">Games</a></li>
			<li><a href="../resources/terms/" title="Please read the terms before downloading anything">Terms of use</a></li>
			<li><a href="../resources/mailings/" title="Subscribe to brothercake's newsletters">Mailing list</a></li>
		</ul>
	</li>

</ul>
</div>


</body>
</html>

Arie Molendijk.

**NXArmada** · 03-10-2008, 05:18 PM

Try this Dark

http://qrayg.com/learn/code/cssmenus/

Thread: Urgent help needed with CSS drop down menu

Thread Tools

Search Thread

Urgent help needed with CSS drop down menu

Brothercake-menu

Bookmarks

Bookmarks

Posting Permissions