标题:网易菜单实现(请教修改完善)
取消只看楼主
guixiaolan
Rank: 3Rank: 3
等 级:新手上路
威 望:6
帖 子:356
专家分:0
注 册:2006-4-20
 问题点数:0 回复次数:3 
网易菜单实现(请教修改完善)

<html>
<head>

<style type="text/css">
div.card div{background-color:#DDDDDD;float:left;padding:1px; padding-bottom:0; clear:both; width:405px;}
div.card a{color:black;font-size:13px;text-decoration:none;float:left;width:100px;text-align:center;background-color:white;margin-right:1px;}
div.card div.a a.a{font:normal normal bold 13px 宋体;background-color:#DDDDDD;}
div.card div.b a.b{font:normal normal bold 13px 宋体;background-color:#DDDDDD;}
div.card div.c a.c{font:normal normal bold 13px 宋体;background-color:#DDDDDD;}
div.card div.d a.d{font:normal normal bold 13px 宋体;background-color:#DDDDDD;}
div.card div.content{background-color:#DDDDDD; border:1px solid #DDDDDD; height:100px;}
</style>

<script language="javascript">
var shq={};
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
e.parentNode.nextSibling.innerHTML=e.innerHTML;
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
</script>
</head>
<body>
<div class="card">
<div onMouseOver="shq.cmenu(event)">
<a href="#" class="a">国家</a>
<a href="#" class="b">国际</a>
<a href="#" class="c">体育</a>
<a href="#" class="d">财经</a>
</div>
<div class="content">
</div>
</div>
</body>
</html>

需要改进的:
1.页面第一次打开时,显示第一个菜单项的内容
2.如何定位下面的层内容,即把鼠标放在哪显示哪一项的子菜单内容

大家帮忙啊!

[此贴子已经被作者于2007-6-2 12:41:01编辑过]

搜索更多相关主题的帖子: 网易 div 菜单 normal card 
2007-06-02 12:39
guixiaolan
Rank: 3Rank: 3
等 级:新手上路
威 望:6
帖 子:356
专家分:0
注 册:2006-4-20
得分:0 
我想知道怎么修改层的z-index属性
修改可见属性是下面的
document.getElementById(layName).style.visibility='visible';
那么修改z-index属性是什么呢

[url=http://www./]/sign/free.gif" target="_blank">http://ip./sign/free.gif[/url]
2007-06-02 15:12
guixiaolan
Rank: 3Rank: 3
等 级:新手上路
威 望:6
帖 子:356
专家分:0
注 册:2006-4-20
得分:0 

如何实现通用性呢?就是说,如果一个页面有好几个这样的菜单,那么怎么样做到不互相影响呢!
当我点击下面的菜单时,上面的菜单发生了变化!如何解决

[CODE]<html>
<head>
<style type="text/css">
div.card div{
background-color:#FFFFFF;
float:left;
padding:2px;
padding-bottom:0;
clear:both;
width:300px;
}
div.card a{
color:black;
font-size:13px;
text-decoration:none;
float:left;
text-align:center;
background-color:#EEEEEE;
margin-right:1px;
}
div.card div.a a.a{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.b a.b{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.c a.c{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.d a.d{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.content{
background-color:#FFFFFF;
height:200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
var shq={};
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
document.getElementById("a").style.visibility='hidden';
document.getElementById("b").style.visibility='hidden';
document.getElementById("c").style.visibility='hidden';
document.getElementById("d").style.visibility='hidden';
document.getElementById(e.className).style.visibility='visible';
//e.parentNode.nextSibling.innerHTML="guixiaolan";//fill(e.className);
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
</script>
<body>
<table width="740" align="center" cellpadding="0" cellspacing="4">
<tr>
<td width="300" valign="top" class="tr1">
<div class="card">
<div onMouseOver="shq.cmenu(event)" class="a">
<a href="#" class="a" style="width:70; ">国内</a>
<a href="#" class="b" style="width:70; ">国际</a>
<a href="#" class="c" style="width:70; ">体育</a>
<a href="#" class="d" style="width:70; ">财经</a>
</div>
<div class="content">
<div id="a" style="position:absolute; visibility:visible; width:295px">1</div>
<div id="b" style="position:absolute; visibility:hidden; width:295px">2</div>
<div id="c" style="position:absolute; visibility:hidden; width:295px">3</div>
<div id="d" style="position:absolute; visibility:hidden; width:295px">4</div>
<!--<script language="javascript">document.write(fill("a"));</script>-->
</div>
</div>
</td>
</tr>
</table>
<table width="740" align="center" cellpadding="0" cellspacing="4">
<tr>
<td width="300" valign="top" class="tr1">
<div class="card">
<div onMouseOver="shq.cmenu(event)" class="a">
<a href="#" class="a" style="width:70; ">国内</a>
<a href="#" class="b" style="width:70; ">国际</a>
<a href="#" class="c" style="width:70; ">体育</a>
<a href="#" class="d" style="width:70; ">财经</a>
</div>
<div class="content">
<div id="a" style="position:absolute; visibility:visible; width:295px">1</div>
<div id="b" style="position:absolute; visibility:hidden; width:295px">2</div>
<div id="c" style="position:absolute; visibility:hidden; width:295px">3</div>
<div id="d" style="position:absolute; visibility:hidden; width:295px">4</div>
<!--<script language="javascript">document.write(fill("a"));</script>-->
</div>
</div>
</td>
</tr>
</table>
</body>
</html[/CODE]>


[url=http://www./]/sign/free.gif" target="_blank">http://ip./sign/free.gif[/url]
2007-06-11 09:18
guixiaolan
Rank: 3Rank: 3
等 级:新手上路
威 望:6
帖 子:356
专家分:0
注 册:2006-4-20
得分:0 
感觉他那个函数写得太复杂!应该可以有比较简单的!

[url=http://www./]/sign/free.gif" target="_blank">http://ip./sign/free.gif[/url]
2007-06-11 17:23



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-144295-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.426611 second(s), 8 queries.
Copyright©2004-2025, BCCN.NET, All Rights Reserved