|
Posted by brian on 01/08/08 21:37
problems :
Menu is always flash when the mouse move over.and when expand one
menu,other menus positons is moved.I don't want to move the menus
positons when expanding some menu.
Thanks
my codes includes 3 files as the following:
<<a.html>>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<meta name="GENERATOR" content="IBM Software Development Platform" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="leftmenu2.css" />
<script type="text/javascript" src="leftmenu2.js"></script>
<title>MetaData</title>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="20">
<div class="menu1" onmouseover="showHide('submenu1')">menu1</div>
</td>
<td width="20">
<div class="menu1" onmouseover="showHide('submenu2')">menu2</div>
</td>
<td width="20">
<div class="menu1" onmouseover="showHide('submenu3')">menu3</div>
</td>
<td width="20">
<div class="menu1" onmouseover="showHide('submenu4')">menu4</div>
</td>
</tr>
<tr>
<td width="20">
<div id="submenu1" class="hide">
<a href="#" class="submenu">submenu1</a>
<a href="#" class="submenu">submenu2222</a>
<a href="#" class="submenu">submenu33333</a>
</div>
</td>
<td width="20">
<div id="submenu2" class="hide">
<a href="#" class="submenu">submenu1</a>
<a href="#" class="submenu">submenu2222</a>
<a href="#" class="submenu">submenu33333</a>
</div>
</td>
<td width="20">
<div id="submenu3" class="hide">
<a href="#" class="submenu">submenu1</a>
<a href="#" class="submenu">submenu2222</a>
<a href="#" class="submenu">submenu33333</a>
</div>
</td>
<td width="20">
<div id="submenu4" class="hide">
<a href="#" class="submenu">submenu1</a>
<a href="#" class="submenu">submenu2222</a>
<a href="#" class="submenu">submenu33333</a>
</div>
</td>
</tr>
</table>
</body>
</html>
<<leftmenu2.js>>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
}
<<leftmenu2.css>>
..submenu{
/*background-image: url(../images/white.jpg);*/
display: block;
height: 19px;
width:100px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}
..submenu:hover{
background-color: #5A8EC6;
}
..leftmenu{
/*background-image: url(../images/white.jpg);*/
display: block;
height: 19px;
margin-left: 38px;
width:100px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}
..leftmenu:hover{
/*background-image: url(../images/white.jpg);*/
background-color: #FFFFFF;
}
..hide{
display: none;
}
..show{
display: block;
}
[Back to original message]
|