SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mh8759's Avatar
    Join Date
    Jun 2000
    Location
    Slovenia, Europe
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    microsoft's menu

    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

  2. #2
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can see their .css files, here is the default one :

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

    Sean

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by shane; Jun 28, 2001 at 14:33.

  4. #4
    SitePoint Addict mh8759's Avatar
    Join Date
    Jun 2000
    Location
    Slovenia, Europe
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your feedback. I'll check your code shane as soon as I can. I believe it will probably work ok

    Thanks
    M


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •