类似动网的那种类别下拉列表是怎么定位的

fxbird 2005-09-07 04:17:39

http://www.kantsuu.com/bbs/list.asp?boardid=23

当鼠标移到导航条的“日语学习”时，会生成该类别下的子类别的列表，这个好办，可以动态生成，当鼠标移过来时，显示即可，问题是，菜单的左侧，如何和大类别对齐，它的上面又如何保证在大类别的下面，就是如何定位的问题，这个不知如何解决啊。
肯定放在层里面的。但我放在一个层里，会占用空间，而像动网的那种不会，是飘在页面上的。

...全文

121 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

fxbird 2005-09-08

打赏
举报

to fantiny:
能否给node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace(" over", "");}这里解释一下。还有，你的代码在firefox里浏览的时候，下拉列表全变成横着的了。

fxbird 2005-09-08

打赏
举报

我改进了一下，先放置几个隐藏的层，然后当鼠标移到超链接的位置时，计算要显示层的单元格的坐标，然后设置给层显示，这在ie里好用，但在firefox里无效，可以得到单元格的坐标，但layer.style.left=x;这种写法不对，请问谁有解决办法？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>

<div id="lay1" style="position:absolute; left:82px; top:221px; width:237px; height:140px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000; ">此处显示
id "div1" 的内容<br>
此处显示 id "div1" 的内容<br>
此处显示 id "div1" 的内容<br>
此处显示 id "div1" 的内容</div>
<script type="text/javascript">
function showmenu(elem_id)
{
var elem= document.getElementById(elem_id);
var x=elem.offsetLeft;
var y=elem.offsetTop;
alert("x="+x+",y="+y);
var layer=document.getElementById("lay1");
layer.style.left=x;
layer.style.top=y;
layer.style.display="block";
}
function hide()
{
document.getElementById("lay1").style.display="none";
}

</script>
<table width="33%" border="0">
<tr>
<td width="10%">111</td>
<td width="45%"><div onMouseOver="showmenu('td1')">超链接题目</div></td>
<td width="45%" onMouseOver="showmenu('td2')">超链接２　</td>
</tr>
<tr>
<td>111</td>
<td id="td1"></td>
<td id="td2"></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>

fxbird 2005-09-08

打赏
举报

人家动网的分类是动态生成的，你无法判断该放在什么地方。

river6023 2005-09-07

打赏
举报

多放几个层啊,很容易实现的,用表格定位很准确的
应该不会出现不准确的问题,我用的也是显示隐藏层,没出现过问题啊,即使在不同分辨率下,照样定位准确

fantiny 2005-09-07

打赏
举报

<html>
<head>
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="SPAN") {
node.onmouseover=function() {this.className+=" over";}
node.onmouseout=function() {this.className=this.className.replace(" over", "");}
}
}
}
}
window.onload=startList;
</script>
<style>
body {
font: normal 11px verdana;
}
div#nav{
border-left: 1px solid #ccc;
}
span {
margin: 0px;
padding: 0px;
list-style: none;
width: 120px; /* Width of Menu Items */
position: relative;
border: 1px solid #ccc;
border-left: 0px;
}
span div span {
border: 1px solid #ccc;
border-top: 0px;
}
span div {
position: absolute;
left: -1px;
top: 24px; /* Set 1px less than menu width */
display: none;
}

/* Styles for Menu Items */
div span a {
width: 100%;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
}

div span a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

span div span a { padding: 2px 5px; } /* Sub Menu Styles */

span:hover div, span.over div { display: inline; } /* The magic */
</style>
</head>
<body>
<div id="nav">
<span><a href="#">Home</a>
<div>
</div>
</span>
<span><a href="#">About</a>
<div>
<span><a href="#">History</a></span>
<span><a href="#">Team</a></span>
<span><a href="#">Offices</a></span>
</div>
</span>
<span><a href="#">Services</a>
<div>
<span><a href="#">Web Design</a></span>
<span><a href="#">Internet Marketing</a></span>
<span><a href="#">Hosting</a></span>
<span><a href="#">Domain Names</a></span>
<span><a href="#">Broadband</a></span>
</div>
</span>
<span><a href="#">Contact Us</a>
<div>
<span><a href="#">United Kingdom</a></span>
<span><a href="#">France</a></span>
<span><a href="#">USA</a></span>
<span><a href="#">Austraspana</a></span>
</div>
</span>
</div>
</body>
</html>