cnnfn.com menu

**kamakazi** · 09-29-2006, 02:01 PM

Hi, I need to use the menu like the one on cnnfn.com, only with multiple levels. Is this possible. I need my top level menu to be in a table like cnnfn.com

Kindly please help me.

Thanking you in advance.

**mburt** · 09-29-2006, 02:15 PM

Well I can tell you up front: We're not just going to make a multi-level menu out of thin air, mainly because there are multi-level menus out there. There's a couple on DD even.
Please try looking around a bit before asking us to do it.

**kamakazi** · 09-29-2006, 02:28 PM

Sorry, I didn't mean to upset you. I am new to javascript so all the multi level menus that I have seen so far are using <Li> and <lu> so I didn't know how to past that in to a table. I am sorry again.

**mburt** · 09-29-2006, 02:43 PM

No, no, no. I didn't mean to be er... upset with you. I was just trying to say that there are menus out there that you can get. And I am sorry if I was a little rude.

Okay. For one, that site isn't using tables. Their using some sort of container, most likely a <div> tag.

I'll try to implement a menu similar to one on that site

**mburt** · 09-29-2006, 03:20 PM

Okay. I have a short implentation of it:

http://mburt.mb.funpic.org/test/cnn_menu.htm

The only difference is that it doesn't delay the onmouseout feature.

Save the following as "menu.js"

Code:

function showmenu(orig,elem) {
var obj = document.getElementById(elem)
var padding = 1
if (navigator.appName == "Netscape") {
	padding = -5
	}
obj.style.display = "block"
obj.style.left = orig.offsetLeft
obj.style.top = orig.offsetTop + orig.offsetHeight - padding
obj.onmouseover = function() {
	obj.style.display = "block"
	}
obj.onmouseout = function(e) {
	var ev = event || e
	document.onmousemove = function() {
		if (ev.clientY > (obj.offsetTop + obj.offsetHeight) + 50) {
			obj.style.display = "none"
			}
		if (ev.clientX < obj.offsetLeft || ev.clientX > (obj.offsetLeft + obj.offsetWidth)) {
			obj.style.display = "none"
			}
		}
	}
orig.onmouseout = function() {
	obj.style.display = "none"
	}
}

This will be your HTML document

Code:

<html>
<head>
<style type="text/css">
.menuheader {
display:inline;
margin:0px
}
.menuheader a {
padding:7px;
border:1px solid rgb(73,148,205);
font:10px arial;
font-weight:bold;
color:white;
text-decoration:none;
background:url('gradient.png')
}
.menu {
border:1px solid rgb(73,148,205);
background:rgb(238,238,238);
width:177px;
position:absolute;
display:none
}
.menu a {
color:rgb(52,102,153);
text-decoration:none;
display:block;
font:12px arial;
padding-left:4px;
padding-right:4px;
padding-top:2px;
padding-bottom:2px
}
.menu a:hover {
background:rgb(52,102,153);
color:white
}
</style>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div class="menuheader" onmouseover="showmenu(this,'news')">
<a href="#">NEWS</a>
</div>
<div class="menu" id="news">
<a href="#">Main</a>
<a href="#">Companies</a>
<a href="#">Economies</a>
<a href="#">World Business</a>
<a href="#">News Makers</a>
<a href="#">Fun Money</a>
<a href="#">Corrections</a>
</div>
<div class="menuheader" onmouseover="showmenu(this,'news2')">
<a href="#">NEWS 2</a>
</div>
<div class="menu" id="news2">
<a href="#">Main</a>
<a href="#">Companies</a>
<a href="#">Economies</a>
<a href="#">World Business</a>
<a href="#">News Makers</a>
<a href="#">Fun Money</a>
<a href="#">Corrections</a>
</div>
</body>
</html>

Make a division for the header:

Code:

<div class="menuheader" onmouseover="showmenu(this,'newmenu')">BLAH</div>

The second parameter is the menu's id. Make the menu using a div again, and give it links:

Code:

<div class="menu" id="newmenu">
<a href="#">Site 1</a>
<a href="#">Site 2</a>
<a href="#">Etc.</a>
</div>

You have to save this image:
http://mburt.mb.funpic.org/test/gradient.png

**kamakazi** · 09-29-2006, 03:35 PM

Thank you so much. I really appriciate your help. I will try it right away.

Thanks again.

**mburt** · 09-29-2006, 03:38 PM

It seems to be malfunctioning in FF... I'll work it out.

**mburt** · 09-29-2006, 03:41 PM

Okay. It's fixed. It should work.

**kamakazi** · 09-29-2006, 03:57 PM

It is not multi level. I tried to add the 3rd level but the positioning is wrong and on mouse out it doesn't close the parent. I tried to do the cnnfn.com and I got the same problem. I can only show the second level properly.

-Thanks

**mburt** · 09-29-2006, 04:00 PM

I'll make a different function for a third-level. Is that okay?

Thread: cnnfn.com menu

Thread Tools

Search Thread

cnnfn.com menu

Bookmarks

Bookmarks

Posting Permissions