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>
Posting Permissions
Bookmarks