SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: microsoft's menu
-
Jun 28, 2001, 13:38 #1
- 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
-
Jun 28, 2001, 13:46 #2
You can see their .css files, here is the default one :
http://www.microsoft.com/library/flyoutmenu/default.css
Sean
-
Jun 28, 2001, 15:29 #3
- 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 15:33.
-
Jul 1, 2001, 11:14 #4
- 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