实现类似土豆网上顶部菜单栏的效果,200分

[swordman123]

关于鼠标经过,显示层这里不清楚:
1:鼠标经过频道,显示选项
2:鼠标经过视频，弹出选项

www.tudou.com

[Jermaine]

菜单栏效果很多js都可以做，菜单的内容可以用ajax请求，给出几个选项吧，ext，dojo都可以比较容易的实现这种类似的菜单，而至于鼠标经过。。。仅仅是事件罢了，onmouseover。。另外，鼠标悬停在某菜单项上的效果可以通过js做，也可以通过css的hover伪类来做

[summer0214]

2:鼠标经过视频，弹出选项 ----这个没看到

鼠标经过菜单，显示二级菜单如下：
CSS代码
body{
font-size:12px;
margin:0px;
padding:0px;
text-align:center;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
}
.list a:link, .list a:visited{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
.list a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
.list a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
margin-left:100px;
margin-top:20px;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
DIV代码
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
<div class="list">
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="list">
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>

[一把编程的菜刀]

这个效果就只是显示和隐藏层

不是很麻烦

就只是设置层的display为none就是隐藏了

要效果好看，就慢慢调试样式

[swordman123]

回楼上,我描述错了，鼠标点击菜单栏上的视频按钮,弹出垂直居中的选项.

垂直居中这里是用哪个属性?

不过，土豆的页面上没有看到直接的js.

[lupanlupan]

恩
我顶

[yifeng7956]

鼠标经过显示图片 这个是鼠标经过的事件 onmouseover
鼠标离开也是事件 onmouseout
显示层内容 可以用 getElementById(divName).style.display="block";
隐藏的话 就是none; 把这内容加事件里就可以了

[yifeng7956]

居中垂直 最简单的办法
<style type="text/css">
.lanrentuku {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px;
}

.lanrentuku img {
margin-top: e­xpression(( 150 - this.height ) / 2);
}
</style>

[SilverNet]

[Quote=引用 3 楼 chinmo 的回复:]
这个效果就只是显示和隐藏层

不是很麻烦

就只是设置层的display为none就是隐藏了

要效果好看，就慢慢调试样式
[/Quote]

学习