<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="麦乐网址导航myler.cn,网址导航,上网导航,网址,搜索,电影,手机电影下载,音乐,娱乐,图片,社区,BLOG,黄页，企业名录,114查询,网上黄页,win8,metro" />
<meta name="description" content="麦乐网址导航myler.cn,上网导航,网址之家,网址大全,网址,搜索,音乐,,搜索,电影,手机电影下载,娱乐,图片,小游戏,短信,社区,日记,相册,K歌,通讯簿,BLOG,win8,metro,天气预报,实用工具.最方便,最快捷,最多华人使用的上网导航" />
<title>麦乐导航[myler.cn]metro版</title>
<link rel="stylesheet" href="css/metro.css">
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<!--解决在ie6下png透明-->
<!--[if IE 6]>
<script type="text/javascript" src="script/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('ul,li,img');
</script>
<![endif]-->
<script type="text/javascript" src="script/jquery.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var box_h=$("#metro_box").height();
var box_w=$("#metro_box").width();
$("#metro_box").css("margin-top",(($(window).height()-box_h)/2)-20+"px");
var img_h=$(".arr_left img").height();
var img_w=$(".arr_left img").width();
$(".prev").css("position","absolute").css("left","10px").css("top",($(window).height()-img_h)/2);
$(".next").css("position","absolute").css("right","10px").css("top",($(window).height()-img_h)/2);
//链接在新窗口打开
$(".a_link dd a").attr("target","_blank");
$(".a_link ul li>a").hover(function(){
var a_href=$(this).attr("href");
$(this).siblings().find("a").attr("href",a_href);
});
//切屏-----------------------------------------------------------------
$(".nav a").click(function(){
$(".nav a").attr("id","");
$(this).attr("id","a_hover");
$("#metro_box dl dt h1").text($(this).text());
var index=$(this).index();
$("#metro_box dd").hide();
$("#metro_box dd").eq(index).toggle(100);
if(index==1){
$("body").attr("class","bg1");
}
switch (index){
case 0:
$("body").attr("class","");
$("#metro_box dl dt h1").css("color","#fff");
break;
case 1:
$("body").attr("class","bg1");
$("#metro_box dl dt h1").css("color","#fff");
break;
case 2:
$("body").attr("class","bg2");
$("#metro_box dl dt h1").css("color","#fff");
break;
case 3:
$("body").attr("class","bg3");
$("#metro_box dl dt h1").css("color","#000");
break;
case 4:
$("body").attr("class","bg4");
$("#metro_box dl dt h1").css("color","#000");
break;
case 5:
$("body").attr("class","bg5");
$("#metro_box dl dt h1").css("color","#fff");
break;
default :
$("body").attr("class","bg6");
$("#metro_box dl dt h1").css("color","#fff");
}
<!--[if IE 6]>$("#metro_box dd").eq(index).show(300);<![endif]-->
});
});
</script>
</head>
<body>
<!--头部导航开始-->
<div id="top">
<dl>
<dt><a href="http://www.myler.cn">网址大全</a><span>|</span><a href="http://www.iqiyi.com/dianshiju/">电影</a><span>|</span><a href="http://www.myler.cn/html/xiaoyouxi/index.htm">小游戏</a><span>|</span><a href="http://www.iqiyi.com/dianshiju/">电视剧</a><span>|</span><a href="http://www.myler.cn/html/wangshanggouwu/">购物</a></dt>
<dd><a href="http://www.myler.cn">文字版</a><span>|</span><a href="http://www.myler.cn/metro/"><b>图片版</b></a><span>|</span><a href="#">把myler.cn设为首页</a></dd>
</dl>
</div>
<!--头部导航结束-->
<!--logo区开始-->
<div id="metro_box" class="a_link">
<dl>
<dt>
<h1>名站导航</h1>
<div class="nav">
<a id="a_hover">名站导航</a>
<a>视频音乐</a>
<a>新闻资讯</a>
<a>购物淘宝</a>
<a>游戏娱乐</a>
<a>实用工具</a>
<a>影视资源</a>
<a href="http://www.myler.cn" target="_self">更多</a>
</div>
</dt>
<dd style="display:bolck;">
<!--名站导航-->
<ul>
<li class="one" id="logo_001"><a href="http://google.hk"><img src="images/logo_001.png" width="240" height="120" alt="google"></a><span><a href="#">谷歌</a></span></li>
<li id="logo_002"><a href="http://www.baidu.com"><img src="images/logo_002.png" width="240" height="120" alt="百度"></a><span><a href="#">百度</a></span></li>
<li id="logo_003"><a href="http://www.youku.com"><img src="images/logo_003.png" width="240" height="120" alt=""></a><span><a href="#">优酷</a></span></li>
<li class="four" id="logo_004"><a href="http://www.weibo.com"><img src="images/logo_004.png" width="240" height="120" alt=""></a><span><a href="#">新浪微博</a></span></li>
<li class="one" id="logo_005"><a href="http://www.taobao.com"><img src="images/logo_005.png" width="240" height="120" alt=""></a><span><a href="#">淘宝网</a></span></li>
<li id="logo_006"><a href="http://www.360buy.com"><img src="images/logo_006.png" width="240" height="120" alt=""></a><span><a href="#">京东商城</a></span></li>
<li id="logo_007"><a href="http://www.amazon.cn/?_encoding=UTF8&tag=ymx0d-23&linkCode=ur2&camp=536&creative=3200"><img src="images/logo_007.png" width="240" height="120" alt=""></a><span><a href="#">亚马逊</a></span></li>
<li class="four" id="logo_008"><a href="http://www.dangdang.com/?_ddclickunion=P-308772|ad_type=10|sys_id=1#dd_refer=http%3A%2F%2Fmyler.cn%2F"><img src="images/logo_008.png" width="240" height="120" alt=""></a><span><a href="#">当当网</a></span></li>
<li class="one" id="logo_009"><a href="http://qiyi.com"><img src="images/logo_009.png" width="240" height="120" alt=""></a><span><a href="#">奇艺网</a></span></li>
<li id="logo_010"><a href="http://www.tudou.com"><img src="images/logo_010.png" width="240" height="120" alt=""></a><span><a href="#">土豆网</a></span></li>
<li id="logo_011"><a href="http://www.renren.com"><img src="images/logo_011.png" width="240" height="120" alt=""></a><span><a href="#">人人网</a></span></li>
<li class="four" id="logo_012"><a href="http://s.click.taobao.com/t_11?e=%2BtSC5ziSlQIKXTum23VHLUx2Mi9BvFxTCg7CN9kKD8HJdox0eUoImgi5Ng%3D%3D&p=mm_14033530_3168968_10561464
"><img src="images/logo_012.png" width="240" height="120" alt=""></a><span><a href="#">凡客诚品</a></span></li>
<li class="one" id="logo_013"><a href="http://www.people.com.cn"><img src="images/logo_013.png" width="240" height="120" alt=""></a><span><a href="#">人民网</a></span></li>
<li id="logo_014"><a href="http://www.cntv.cn"><img src="images/logo_014.png" width="240" height="120" alt=""></a><span><a href="#">中国网络电视台</a></span></li>
<li id="logo_015"><a href="http://sohu.com"><img src="images/logo_015.png" width="240" height="120" alt=""></a><span><a href="#">搜狐网</a></span></li>
<li class="four" id="logo_016"><a href="http://www.163.com"><img src="images/logo_016.png" width="240" height="120" alt=""></a><span><a href="#">网易</a></span></li>
</ul>
</dd>
<dd style="display:none;">
<!--视频音乐-->
<ul>
<li class="one" id="logo_001"><a href="http://youku.com"><img src="images/logo_001b.png" width="240" height="120" alt="youku"></a><span><a href="#">优酷视频</a></span></li>
<li id="logo_002"><a href="http://www.qiyi.com"><img src="images/logo_002b.png" width="240" height="120" alt="qiyi"></a><span><a href="#">奇艺视频</a></span></li>
<li id="logo_003"><a href="http://www.tudou.com"><img src="images/logo_003b.png" width="240" height="120" alt=""></a><span><a href="#">土豆视频</a></span></li>
<li class="four" id="logo_00
麦乐网址导航win8版metro风格
5星 · 超过95%的资源 需积分: 4 69 浏览量
2012-08-02
15:51:36
上传
评论
收藏 1.5MB RAR 举报 
麦乐网址导航win8版metro风格 （125个子文件） 
metro.css 3KB
index.html 26KB
bg2.jpg 126KB bg6.jpg 116KB bg3.jpg 113KB bg4.jpg 107KB bg5.jpg 50KB bg1.jpg 9KB jquery-1.4.4.min.js 83KB DD_belatedPNG.js 5KB
metro_bg.png 75KB logo_003d.png 26KB logo_014a.png 25KB logo_002e.png 23KB logo_011a.png 21KB logo_002d.png 20KB logo_009f.png 20KB logo_006a.png 19KB logo_011c.png 19KB logo_015c.png 19KB logo_015a.png 18KB logo_008b.png 17KB logo_008d.png 16KB logo_005d.png 12KB logo_013d.png 12KB logo_007b.png 12KB logo_012b.png 11KB logo_007c.png 11KB logo_013a.png 10KB logo_016d.png 10KB logo_009c.png 10KB logo_005f.png 9KB logo_008c.png 9KB logo_001e.png 9KB logo_008f.png 9KB logo_011b.png 9KB logo_002c.png 9KB logo_007d.png 9KB logo_015b.png 9KB logo_010d.png 9KB logo_001a.png 9KB logo_010e.png 9KB logo_005b.png 9KB logo_006f.png 9KB logo_007a.png 9KB logo_002f.png 9KB logo_008e.png 8KB logo_005.png 8KB logo_004.png 8KB logo_012a.png 8KB logo_010f.png 8KB logo_008a.png 8KB logo_015.png 8KB logo_002a.png 8KB logo_010a.png 8KB logo_006.png 8KB logo_002.png 8KB logo_007.png 8KB logo_011e.png 8KB logo_016.png 8KB logo_013b.png 8KB logo_016f.png 8KB logo_005a.png 7KB logo_016a.png 7KB logo_003c.png 7KB logo_013c.png 7KB logo_004e.png 7KB logo_013.png 7KB logo_012e.png 7KB logo_013f.png 7KB logo_009b.png 7KB logo_014b.png 7KB logo_015e.png 7KB logo_012.png 7KB logo_001f.png 7KB logo_016b.png 7KB logo_004d.png 7KB logo_016c.png 7KB logo_009a.png 6KB logo_002b.png 6KB logo_009.png 6KB logo_014c.png 6KB logo_003a.png 6KB logo_001b.png 6KB logo_003.png 6KB logo_014.png 6KB logo_004b.png 6KB logo_004c.png 6KB logo_012c.png 6KB logo_005c.png 6KB logo_003f.png 6KB logo_006b.png 6KB logo_006c.png 6KB logo_010c.png 6KB logo_004f.png 6KB logo_007e.png 6KB logo_001.png 6KB logo_007f.png 6KB logo_015f.png 6KB logo_012d.png 6KB共 125 条
- 1
- 2
资源评论
xpeng712012-08-10做的不错，基于jquery的，正好
七夜雪2012-12-22真的是好东西 切换也不用刷新 学习了- kakexiaozi2015-10-02需要改动，凑活可以用
dongprogrammer2012-09-03还行能用 不过不是现在的导航哦
