microsoft's menu

**mh8759** · Jun 28, 2001, 13:38

Hi,

I believe some of you already seen the left menu of microsoft.com. Does anyone maybe know how do they achieve this effect(box and grayed background when mouseover)? I know it is achieved with CSS but since we can't see their .css files, maybe someone could explain how is it done.

Thanks
Mare

**seanf** · Jun 28, 2001, 13:46

You can see their .css files, here is the default one :

http://www.microsoft.com/library/flyoutmenu/default.css

Sean

**shane** · Jun 28, 2001, 15:29

Mare,

If you look in the css file that Sean linked to you'll see that for the class flyoutMenu theres a behaviour attribute which is a link to an htc file which contains some javascript. The script has a funtion which seems to assign various events to different document elements, when the page loads. (I think because of this there's no javascript in the page html for the menu items).

The script assigns onmouse and onmouseover events to the menu elements. If you look in the script theres a couple of functions, item_onmouseout and item_onmouseover, part of which deal with changing the borders and backgrounds of the elements.

This all kind of puzzled me last week so I tried to do something simpler that didn't rely on 'behaviours' (I think they're IE specific).

The code I came up with is below, the basics of which I got from http://hotwired.lycos.com/webmonkey/. I've got a feeling that it won't work on N6 and some additional code may be needed. You may want to ask in the scripting section for more help (I suck at js).

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title></title>
	<style>
		body {
			margin: 10px 0px 10px 10px;
			padding: 0px;
		}
		a:link, a:visited, a:active{
			font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size : 11px;
			font-weight : normal;
			text-decoration : none;
			color : #000000;
		}
		a:hover{
			font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-size : 11px;
			font-weight : normal;
			text-decoration : none;
			color : #FFFFFF;
		}
		div.menuBox {
			width: 150px;
			border-style: solid;
			border-width: 1px;
			border-color: Black;
			background-color: #F0F0E1;
			margin: 0px;
			text-align: center;
			padding: 4px 0px 4px 0px;
		}
		div.linkbox {
			width: 140px;
			padding: 0px 5px 0px 5px;
			height: 15px;
			border-style: solid;
			border-width: 1px 1px 1px 1px;
			border-color: #F0F0E1;
			background-color: transparent;
			margin: 0px 0px 0px 0px;
			text-align : left;
		}
	</style>
	<script language="JavaScript">
	<!--
	var BACKGROUND_COL_ON;
	var BACKGROUND_COL_OFF;
	var COLOR_OFF;
	var BORDER_COL_ON;
	var BORDER_COL_OFF;
	var COLOR_ON;
	
	BACKGROUND_COL_ON = "#657CB1";
	BORDER_COL_ON = "#333333";
	COLOR_ON = "#FFFFFF"
	
	//BACKGROUND_COL_OFF = "transparent";
	//BORDER_COL_OFF = "#F0F0E1";
	
	function styleOff(id) {
		if (document.all){
			if (id != null) {	
				document.all[id].style.backgroundColor = BACKGROUND_COL_OFF;
				document.all[id].style.borderColor = BORDER_COL_OFF;
				document.all[id].style.color = COLOR_OFF;
				//document.all[id].style.borderWidth = "1px";
			}
		}
		else if (document.getElementById){
			document.getElementById(id).style.backgroundColor = BACKGROUND_COL_OFF; 
			document.getElementById(id).style.borderColor = BORDER_COL_OFF;
			document.getElementById(id).style.color = BACKGROUND_COL_OFF;
		}
	}
	
	function styleOn(id) {
		if (document.all){
			//Get current styles
			BACKGROUND_COL_OFF = document.all[id].style.backgroundColor;
			BORDER_COL_OFF = document.all[id].style.borderColor;
			COLOR_OFF = document.all[id].style.color;
			
			document.all[id].style.backgroundColor = BACKGROUND_COL_ON;
			document.all[id].style.borderColor = BORDER_COL_ON;
			document.all[id].style.color = COLOR_ON;
			//document.all[id].style.borderWidth = "1px";
		}
		else if (document.getElementById){
			//Get current styles
			BACKGROUND_COL_OFF = document.getElementById(id).style.backgroundColor; 
			BORDER_COL_OFF = document.getElementById(id).style.borderColor;
			COLOR_OFF = document.getElementById(id).style.color;
			
			document.getElementById(id).style.backgroundColor = BACKGROUND_COL_ON; 
			document.getElementById(id).style.borderColor = BORDER_COL_ON;
			document.getElementById(id).style.color = COLOR_ON;
		}
	
	}
	// -->
	</script>
</head>

<body>

<div class="menuBox">
	
	<div class="linkbox" id="box1" onMouseOver="styleOn('box1')" onMouseOut="styleOff('box1')">
		<a href="#">box number 1</a>
	</div>
	
	<div class="linkbox" id="box2" onMouseOver="styleOn('box2')" onMouseOut="styleOff('box2')">
		<a href="#">box number 2</a>
	</div>
	
	<div class="linkbox" id="box3" onMouseOver="styleOn('box3')" onMouseOut="styleOff('box3')">
		<a href="#">box number 3</a>
	</div>
	
	<div class="linkbox" id="box4" onMouseOver="styleOn('box4')" onMouseOut="styleOff('box4')">
		<a href="#">box number 4</a>
	</div>
	
</div>

</body>
</html>

**mh8759** · Jul 1, 2001, 11:14

thanks for your feedback. I'll check your code shane as soon as I can. I believe it will probably work ok

Thanks
M

The SitePoint Forums have moved.

User Tag List

Thread: microsoft's menu

Thread Tools

Display

microsoft's menu

Bookmarks

Bookmarks

Posting Permissions