json_js 穿越火线官网导航菜单效果

时间：2018-07-19 来源：导航菜单阅读：

提示：您可以先修改部分代码再运行

<!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=utf-8" />
<title>《穿越火线》官网导航菜单</title>
<style type="text/css">
body,div,dl,dt,dd,ul,li{margin:0;padding:0;}
li{list-style:none;}
body{font:12px/1.5 Arial;background:url(img/cf/bg.jpg) repeat-x #1A1A1A;}
#wrap{position:relative;width:990px;margin:0 auto;}
#nav{height:67px;padding-top:24px;background:url(img/cf/nav.jpg) no-repeat;}
#nav ul{height:67px;overflow:hidden;padding-left:6px;}
#nav ul li{float:left;height:67px;}
#nav ul li a{height:67px;display:block;overflow:hidden;text-indent:-9999px;background:url(img/cf/nav.jpg) -999px -999px no-repeat;}
#m1,#s1{width:53px;}
#m5,#s5{width:89px;}
#m6,#s6{width:89px;margin-left:184px;}
#m10,#s10{width:51px;}
#m1.current a,#m1 a:hover{background-position:-6px -115px;}
#m2.current a,#m2 a:hover{background-position:-59px -115px;}
#m3.current a,#m3 a:hover{background-position:-143px -115px;}
#m4.current a,#m4 a:hover{background-position:-231px -115px;}
#m5.current a,#m5 a:hover{background-position:-319px -115px;}
#m6.current a,#m6 a:hover{background-position:-592px -115px;}
#m7.current a,#m7 a:hover{background-position:-681px -115px;}
#m8.current a,#m8 a:hover{background-position:-768px -115px;}
#m9.current a,#m9 a:hover{background-position:-852px -115px;}
#m10.current a,#m10 a:hover{background-position:-939px -115px;}
#sub{position:absolute;width:984px;left:6px;top:91px;height:0;overflow:hidden;background:url(img/cf/subbg.jpg) no-repeat;}
#sub ul{float:left;padding-top:21px;}
#sub ul.current{background:url(img/cf/hig.jpg) repeat-x;}
#sub ul li{height:21px;line-height:21px;}
#sub ul li a{color:#B4B4B4;padding-left:15px;text-decoration:none;}
#sub ul li a:hover{color:#03FAE5;background:url(img/cf/arr.gif) 8px 50% no-repeat;}
#banner{height:230px;background:url(img/cf/banner.jpg) 0 0 no-repeat;}
#copyright{color:#7A7A7A;height:50px;line-height:50px;text-align:center;border-top:2px solid #381519;}
#copyright a{color:#FFF;background:#7A7A7A;border-radius:10px;text-decoration:none;padding:2px 5px;}
#m2,#s2,#m8,#s8{width:84px;}
#m3,#s3,#m4,#s4{width:88px;}
#m7,#s7,#m9,#s9{width:87px;}
</style>
<script type="text/javascript">
window.onload = function() {
	var oNav = document.getElementById("nav").getElementsByTagName("ul")[0];
	var oSub = document.getElementById("sub");
	var aNav = oNav.getElementsByTagName("li");	
	var aSub = oSub.getElementsByTagName("ul");
	var timer = null;
	var i = 0;
	//二级菜单显示
	oNav.onmouseover = oSub.onmouseover = function() {
		clearTimeout(timer);
		doMove(oSub, 153);	
	};
	//二级菜单隐藏
	oNav.onmouseout = oSub.onmouseout = function() {
		timer = setTimeout(function() {
			doMove(oSub, 0);
		}, 200);
	};
	//菜单当前位置
	for(i = 0; i < aNav.length; i++) {
		(function(index) {
			aNav[index].onmouseover = aSub[index].onmouseover = function() {
				for(i = 0; i < aNav.length; i++) aNav[i].className = aSub[i].className = "";
				index && (aNav[index].className = aSub[index].className = "current");	
			};
			aNav[index].onmouseout = aSub[index].onmouseout = function() {
				aNav[index].className = aSub[index].className = "";
			};
		})(i);
	};
};
function doMove(obj, iTarget) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var iSpeed = (iTarget - obj.offsetHeight) / 5;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		obj.offsetHeight == iTarget ? clearInterval(obj.timer) : (obj.style.height = iSpeed + obj.offsetHeight + "px");
	}, 30);
}
</script>
</head>
<body>

<li id="m1">首页
            <li id="m2">火线报道
            <li id="m3">游戏指南
            <li id="m4">下载中心
            <li id="m5">快速通道
            <li id="m6">火线专区
            <li id="m7">特色系统
            <li id="m8">玩家互动
            <li id="m9">腾讯客服
            <li id="m10">论坛
        
    
    
    
        <ul id="s1">
        <ul id="s2">
            新闻
            公告
            活动
            赛事
        
        <ul id="s3">
            新兵上路
            游戏资料
            常见问题
        
        <ul id="s4">
            游戏下载
            精美壁纸
            主题歌曲
            火线杂志
            连载小说
        
        <ul id="s5">
            体验服
            封号查询
            BUG提交
            游戏安全
            防沉迷
            反外挂专题
        
        <ul id="s6">
            活动专区
            版本专区
            大赛专区
            <a href="http://www.bbyears.com/clist-30-1.html" target="_blank" class="keylink">视频</a>专区
            QQ会员专区
            CDKEY专区
        
        <ul id="s7">
            战队系统
            荣誉系统
        
        <ul id="s8">
            战术攻略
            玩家相册
            玩家<a href="http://www.bbyears.com/clist-30-1.html" target="_blank" class="keylink">视频</a>
            玩家截图
            官方博客
            官方微博
        
        <ul id="s9">
            客户服务
            用户协议
            玩家条例
            网友互助
        
        <ul id="s10">
            论坛
            搜吧

铁马网络 www.111cn.net , 铁马网络, QQ:173045138

</body>
</html>

提示：您可以先修改部分代码再运行

json_js 穿越火线官网导航菜单效果

http://m.bbyears.com/wangyetexiao/42978.html

推荐访问:json格式化 json在线格式化 js格式化 js刷新当前页面 jsp js保留两位小数

上一篇：原生之罪_原生javascript延时导航菜单条效果

下一篇：[css超出部分省略号]css 导航菜单实现代码

json_js 穿越火线 官网导航菜单效果

json_js 穿越火线官网导航菜单效果