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

swordman123 2009-01-16 10:16:20

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

www.tudou.com

...全文

172 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

tantaiyizu 2009-01-18

打赏
举报

http://www.scriptlover.com/pages/notes.asp?texts=css

arjsyy 2009-01-17

打赏
举报

鼠标经过显示与隐藏层

Alien 2009-01-16

打赏
举报

帮你顶起来吧

街头小贩 2009-01-16

打赏
举报

MS有点像http://www.hulu.com/的布局

街头小贩 2009-01-16

打赏
举报

js,css都可以取到！LZ可以自已去扣

xiaolei1982 2009-01-16

打赏
举报

去看看源文件就行

sjmlsxp 2009-01-16

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

	<meta http-equiv="Content-Language" content="zh-CN"/>

	<title>土豆网 - 导航</title>

	<link type="text/css" href="nav.css" rel="stylesheet" media="all" />

</head>



<body>

				

<div class="navi" style="margin:50px 0;"><!--使用时将此处行内样式去除-->

<div class="nav_inner">

<div class="nav_primary">

<ul>

<li class="nav_first nav_current"><a href="http://www.tudou.com/">首页</a></li>

<li ><a href="http://www.tudou.com/top/">排行</a></li>

<li ><a href="http://www.tudou.com/playlist/list.do">豆单</a></li>

<li id="navChannel" class="nav_dropdown " ><a href="http://channels.tudou.com/" class="nav_dropdown_root">频道</a>

<div class="nav_sub shadow_box">

<div class="shadow_box_bg">

<ul class="shadow_box_inner">

<li class="nav_current"><a href="http://channels.tudou.com/">全部</a></li>

<li><a href="http://imake.tudou.com/">创作</a></li>

<li><a href="http://ent.tudou.com/">娱乐</a></li>

<li><a href="http://life.tudou.com/">生活</a></li>

<li><a href="http://fun.tudou.com/">搞笑</a></li>

<li><a href="http://cartoon.tudou.com/">动画</a></li>

<li><a href="http://game.tudou.com/">游戏</a></li>

<li><a href="http://lady.tudou.com/">女性</a></li>

<li><a href="http://shop.tudou.com/">商品</a></li>

<li><a href="http://music.tudou.com/">音乐</a></li>

<li><a href="http://sport.tudou.com/">体育</a></li>

<li><a href="http://edu.tudou.com/">科教</a></li>

<li><a href="http://movie.tudou.com/">影视</a></li>

<li><a href="http://etc.tudou.com/">其他</a></li>

</ul></div></div></li>

<li><a href="http://hd.tudou.com/">黑豆</a><span class="beta">beta</span></li>

</ul>

</div>

<div class="nav_secondary">

<ul>

<li class="nav_first nav_dropdown" id="navMy"><a href="http://www.tudou.com/my/setting/" class="nav_dropdown_root">我的</a>

<div class="nav_sub shadow_box">

<div class="shadow_box_bg">

<ul class="shadow_box_inner">

<li class="nav_current"><a href="http://www.tudou.com/my/setting/">我的主页</a></li>

<li ><a href="http://www.tudou.com/playlist/index.do?method=intro&list=imy">我的视频</a></li>

<li ><a href="http://www.tudou.com/playlist/index.do?method=intro">我的豆单</a></li>

<li><a href="http://www.tudou.com/my/sub/">我的订阅</a></li>

<li><a href="http://www.tudou.com/my/friends/">我的好友</a></li>

<li ><a href="http://dtag.tudou.com/mywiki.do?view_type=myupdate">我的标签</a></li>

<li><a href="http://www.tudou.com/my/album/">我的相册</a></li>

<li><a href="http://www.tudou.com/my/diarys/manage.php">我的日志</a></li>

<li><a href="http://www.tudou.com/my/soft/">我的软件</a></li>

</ul></div></div></li>

<li><a href="http://www.tudou.com/album/">相册</a></li>

<li><a href="http://www.tudou.com/groups/">小组</a></li>

<li><a href="http://www.tudou.com/community/">播客</a></li>

<li ><a href="http://tag.tudou.com/">标签</a></li>

</ul>

</div>

<div class="nav_search">

<div class="diyselect">

<input type="button" value="视频"/>

<ul>

<li class="diyselect_current"><a href="http://so.tudou.com/isearch.do">视频</a></li>

<li ><a href="http://so.tudou.com/psearch.do">豆单</a></li>

<li ><a href="http://so.tudou.com/usearch.do">播客</a></li>

<li><a href="http://www.baidu.com/baidu" target="_blank">网页</a></li>

</ul>

</div>

<form target="_blank" method="get"  action="http://so.tudou.com/isearch.do" class="nav_searchform" searchtype="">

<input type="text" accesskey="s" value="" class="nav_search_input" name="kw" autocomplete="off"/>

<input type="submit" value="搜索" class="nav_search_submit"/>

</form>

<label><input type="hidden" name="tn" value="tudou8848_pg" /></label>

</div>

</div>

</div>



<script src="http://js.tudouui.com/js/lib/jquery_9.js" type="text/javascript" ></script>

<script src="http://js.tudouui.com/js/_g_94.js" type="text/javascript" ></script>

	

</body>

</html>

sjmlsxp 2009-01-16

打赏
举报

来自土豆，使用时自己把握
其中JS,图片都是引用了土豆上的
记得自己复制下来

代码（包括html css），都已经很大程度的精简
nav.css



@charset "GBK";

/*

 * $Rev: 3644 $

 * Created: mikko

 * Modified: $Author: lirong $ $LastChangedDate: 2009-01-09 14:07:54 +0800 (星期五, 09 一月 2009) $ 

 */ 

*{margin:0;padding:0}

body{color:#000;background:#fff;font-size:12px; line-height:14px;font-family:Tahoma,sans-serif}

a{color:#000}

* a{_font-family:Arial,sans-serif}



a:hover{text-decoration:none}

img{display:block;border:0}

ul{list-style:none}



form{display:block}

input,label,select,option,textarea,button,fieldset,legend{font-size:1em; font-family:Tahoma,sans-serif}



.shadow_box{}

.shadow_box_bg{position:relative;top:2px;left:2px;background:url(http://css.tudouui.com/skin/__g/img/shadow_box.png)}

.shadow_box_bg{_background:#ffc299 none}



.shadow_box_inner{position:relative;top:-2px;left:-2px;border:1px solid #f60;background:#fff;padding:5px}



.navi{position:relative;z-index:9000;clear:both;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) repeat-x 0 0;min-width:990px;height:40px}

.navi ul{zoom:1}

.navi ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}



.nav_inner{position:relative;width:990px;margin:0 auto;height:40px}

.nav_primary{position:absolute;top:0;left:5px;z-index:1000;height:40px}

*.nav_primary{_width:275px}



.nav_primary li{float:left;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -50px;height:40px;padding:0 0 0 3px}

.nav_primary li.nav_first{background:none}

.nav_primary li a{display:block;color:#fff;font-size:14px;line-height:37px;text-align:center;text-decoration:none;width:49px;height:40px;overflow:hidden}

*.nav_primary li a{*line-height:40px}



.nav_primary li a.nav_dropdown_root{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -400px}

.nav_primary li a.nav_dropdown_root:hover,

.nav_primary li a.nav_dropdown_root.hover{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -350px}



.nav_primary li a:hover{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/nav_primary_hover.png) no-repeat 0 0}

*.nav_primary li a:hover{_background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -150px}



.nav_primary li.nav_current a{color:#f60;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -100px}

.nav_primary li .beta{position:absolute;top:-2px;left:258px;display:block;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -730px;text-indent:-3000px;width:23px;height:13px}



.nav_secondary{position:absolute;top:0;right:5px;z-index:1000;height:40px;max-width:300px}

*.nav_secondary{_width:300px}



.nav_secondary li{float:right;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -200px;padding:0 3px 0 0;height:40px}

.nav_secondary li.nav_first{background:none}

.nav_secondary li a{display:block;color:#fff;line-height:37px;text-decoration:none;text-align:center;width:49px;height:40px}

*.nav_secondary li a{*line-height:40px}



.nav_secondary li a.nav_dropdown_root{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -400px}

.nav_secondary li a.nav_dropdown_root:hover,

.nav_secondary li a.nav_dropdown_root.hover{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -350px}



.nav_secondary li.nav_current a{color:#f60;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -250px}



.nav_secondary li a:hover{color:#fff;background:url(http://css.tudouui.com/skin/__g/img/nav_secondary_hover.png) no-repeat 0 0}

*.nav_secondary li a:hover{_background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -300px}



.nav_sub{display:none;position:absolute;top:40px;right:0}

*.nav_sub{_width:80px}



.nav_sub li,.nav_primary li.nav_current .nav_sub li,.nav_secondary li.nav_current .nav_sub li{float:none;background:none;height:25px;padding:0}

.nav_sub li a,.nav_primary li.nav_current .nav_sub li a,.nav_secondary li.nav_current .nav_sub li a,.nav_sub li a:hover,.nav_primary li .nav_sub li a:hover,

.nav_secondary li .nav_sub li a:hover{color:#555;background:none;font-size:12px;line-height:25px;text-align:left;padding:0 5px 0 10px;width:48px;height:25px}

.nav_sub li a:hover,.nav_primary li .nav_sub li a:hover,.nav_secondary li .nav_sub li a:hover,.nav_sub li.nav_current a,.nav_primary li .nav_sub li.nav_current a,.nav_secondary li .nav_sub li.nav_current a{color:#f60;background:url(http://css.tudouui.com/skin/__g/img/sprite_bg_1006.png) 2px -111px no-repeat}

#navChannel{padding-right:10px}

#navChannel .nav_sub{right:auto}

#navChannel ul{background:#fff url(http://css.tudouui.com/skin/__g/img/navChannel_dropdown.png) center repeat-y;width:100px}

#navChannel li{float:left;width:40px;padding:0 5px 0 5px}

#navChannel li a{width:25px}

.nav_search{margin:0 0 0 315px;padding:6px 0 0 0;width:390px;height:30px}

.nav_scount{color:#ccc}

.nav_search_input{float:left;background:#fff;border:1px solid #f60;padding:4px;height:14px;width:230px}

.nav_search_input.webse_bg{background:#fff url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 175px -600px}

*.nav_search_input.webse_bg{_background-attachment:fixed}



.nav_search_submit{background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat 0 -500px;text-indent:-3000px;border:0;width:65px;height:24px;margin:0 0 0 5px;cursor:pointer}

*.nav_search_submit{_margin:0 0 0 2px}



.diyselect{position:relative;float:left;width:58px}

.diyselect input{color:#e55100;background:url(http://css.tudouui.com/skin/__g/img/navi_081212.png) no-repeat right -549px #fff;line-height:22px;text-align:center;border:1px solid #f60;padding:0 15px 0 0;width:58px;height:24px;cursor:pointer}

*.diyselect input{_line-height:20px;*background-position:right -550px}



.diyselect ul{display:none;position:absolute;top:-22px;left:0;z-index:9999;background:#fff;text-align:center;border:1px solid #f60;margin:0;padding:0;height:auto;width:41px;list-style:none}

.diyselect ul li a{display:block;color:#666;line-height:22px;text-decoration:none;height:22px;margin:0}

.diyselect ul li a:hover{color:#fff;background:#666}

.diyselect .diyselect_current a{color:#f60}