菜单导航制作

JS引用：
```java
<link rel="stylesheet" type="text/css" href="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/css/nav.css" />
 <script type="text/javascript" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/jquery.min.js"></script>
<script src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/script.js" type="text/javascript" charset="utf-8"></script>
```
HTML代码区域
```html

<div class="head " id="head">
    <div class="head-ad">
        <div class="nav rg">
            <ul class="nav_pc">
			   <li>
                    <a class="a1" href="javascript:;">关于游戏</a>
                </li>
                <li>
                    <a class="a1" href="javascript:;">关于游戏</a>
                    <div class="div1 mad1">
                        <div class="p1">
                            <a href="javascript:;">公司简介</a>
                            <a href="javascript:;">董事长寄语</a>
                            <a href="javascript:;">发展历程</a>
                            <a href="javascript:;">业务版图</a>
                            <a href="javascript:;">公司荣誉</a>
                            <a href="javascript:;">社会责任</a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
               
                <div class="clear"></div>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="moblie_head">
    <div class="lf">
        <a href="javascript:;">
            <img src="images/logo1.png"></a>
    </div>
    <div class="rg">
        <a href="javascript:;" class="a_js">
            <img src="images/1_07.png"></a>
    </div>
    <div class="clear"></div>

</div>
<div class="a_txt">
    <div class="div1 a_closed"></div>
    <div class="div2">
        <a href="javascript:;" class="a_closed">
            <img src="images/close.png" width="22"></a>
    </div>
    <div class="div3">
        <ul>
            <li>
                <a href="javascript:;">首页</a>
            </li>
            <li>
                <a class="a_js2" href="javascript:;">关于游戏</a>
                <div class="a_txt2">
                    <a href="javascript:;">公司简介</a>
                    <a href="javascript:;">董事长寄语</a>
                    <a href="javascript:;">发展历程</a>
                    <a href="javascript:;">业务版图</a>
                    <a href="javascript:;">公司荣誉</a>
                    <a href="javascript:;">社会责任</a>
                </div>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</div>
```

CSS代码` nav.css`
```css
@charset "utf-8";
*{margin:0;padding:0}
body{font-family:"微软雅黑";font-size:12px;height:100%;line-height:22px;width:100%;background:#f7f7f6;}
a{text-decoration:none;cursor:pointer;transition:all .3s;outline:none}
ul{list-style:none}
.lf{float:left}
.rg{float:right}
.clear{clear:both;height:0px;line-height:0px;font-size:0px}
.head{width:100%;min-width:1000px;z-index:9999;background:#fff;border-bottom:1px solid #ddd;transition:all .3s; height: 55px;line-height: 55px;}
.head-ad{ width: 1400px;margin: 0 auto; }
.logo{padding-left:2.18%;width:302px;transition:all .3s}
.logo a{display:block;position:relative;overflow:hidden}
.logo img{position:relative;z-index:100}
.logo .p1{position:absolute;top:0%;left:0px;}
.nav{width:60%;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
.nav ul li{float:left;width:14.28%;transition:all .3s;  position: relative; }
.nav ul li .a1{display:block;text-align:center;font-size:20px;color:#333;transition:all .3s}
.nav ul li:hover .a1{color:#fff;transition:all .3s; background:#f08519; }
.nav ul li .div1{display:none;background:#f08519;width:100%;left:0px;position:absolute;top:35px;z-index:100;overflow: hidden;}
.nav ul li .div1 .p1{width: 100%;float: left;line-height: 40px;}
.nav ul li .div1 .p1 a{color:#fff;font-size:16px; text-align:center; text-transform:uppercase;width:100%;float:left;background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/1_26.jpg) center bottom no-repeat;display:inline-block;height:50px;line-height:50px;margin-right:5%;transition:all .5s}
.nav ul li .div1 .p1 a:hover{background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/1_27.jpg) center bottom no-repeat;color:#f9f9f9}
/*.nav ul li .mad3 .p1 .pad{margin-left:30%}
.nav ul li .mad4 .p1 .pad{margin-left:44%}
.nav ul li .mad5 .p1 .pad{margin-left:45%}*/
.nav ul li .mad6 .p1{text-align:right}
.a_txt{display:none}
.moblie_head{display: none}
/*小于1600大于1200稍微调整下字体*/
@media screen and (max-width: 1600px) and (min-width:1200px) {
.nav ul li .a1{font-size: 20px;}
.nav ul li .div1 .p1 a{font-size:12px}
.foot_top ul{margin-left:60px}
.nav ul li .div1 .p1{width:58.1%}
}
/*移动端导航*/
@media screen and (max-width: 1024px) and (min-width: 0px){
.head{display:none}
.moblie_head{display:block;height:44px;background:#fff;position:fixed;top:0px;left:0px;width:100%;z-index:9999;border-bottom:1px solid #ddd}
.moblie_head .lf{padding-top:10px;padding-left:5%}
.moblie_head .lf img{height:24px}
.moblie_head .rg{padding-right:5%;padding-top:14px}
.moblie_head .rg a img{height:16px;vertical-align:top}
.a_txt{display:block;position:fixed;top:0px;left:0px;width:0px;height:0px;overflow:hidden;z-index:10000}
.a_txt .div1{position:absolute;width:100%;height:100%;background:#0b0d19;filter:alpha(opacity=0);opacity:0;left:0px;top:0px;z-index:1}
.a_txt .div2{position:absolute;width:20%;left:0px;top:5%;z-index:100;text-align:center;filter:alpha(opacity=0);opacity:0}
.a_txt .div3{position:absolute;width:80%;right:0px;top:0px;background:#0b0d19;height:100%;z-index:100;right:-80%}
.a_txt .div3 ul{padding-left:5%;padding-right:5%}
.a_txt .div3 ul li{border-bottom:1px solid #232530}
.a_txt .div3 ul li a{display:block;height:45px;color:#fff;line-height:45px;padding-left:5%;font-size:16px}
.a_txt .div3 ul li .a_js2{background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/plus.png) 95% center no-repeat;-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
.a_txt .div3 ul li .a_js2_on{background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/reduce.jpg) 95% center no-repeat;-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
.a_txt .div3 ul li .a_txt2{display:none}
.a_txt .div3 ul li .a_txt2 a{height:40px;line-height:40px;font-size:14px}
}
```

JS代码 script.js
```json
$(function() {
	//PC端鼠标浮动展示子导航
	$(".nav ul li").hover(
		function() {
			$(this).children('').next().stop(true, true).delay(300).slideDown(400);
		},
		function() {
			$(this).children('').next().stop(true, true).delay(300).slideUp(400);
		}
	);
	//点击逐渐展开移动端导航
	$(".a_js").click(
		function() {
			$(".a_txt").stop(true, false).delay(0).animate({
				width: "100%",
				height: "100%"
			}, 0);
			$(".a_txt").find(".div1").stop(true, false).delay(0).animate({
				opacity: "0.9"
			}, 500);
			$(".a_txt").find(".div2").stop(true, false).delay(0).animate({
				opacity: "1"
			}, 500);
			$(".a_txt").find(".div3").stop(true, false).delay(0).animate({
				right: "0"
			}, 500);
		}
	)
	//点击关闭，逐渐隐藏
	$(".a_closed").click(
		function() {
			$(".a_txt").stop(true, false).delay(500).animate({
				width: "0",
				height: "0"
			}, 0);
			$(".a_txt").find(".div1").stop(true, false).delay(0).animate({
				opacity: "0"
			}, 500);
			$(".a_txt").find(".div2").stop(true, false).delay(0).animate({
				opacity: "0"
			}, 500);
			$(".a_txt").find(".div3").stop(true, false).delay(0).animate({
				right: "-80%"
			}, 500);
		}
	)
	//点击顶级菜单展开关闭子导航
	$('.div3 ul li').click(function() {
		$('.a_txt2:visible').slideUp().prev().removeClass('a_js2_on');
		var subnav = $(this).find('.a_txt2');
		console.log(subnav.is(':hidden'))
		if(subnav.is(':hidden')) {
			subnav.slideDown().prev().addClass('a_js2_on');
		} else {
			subnav.slideUp().prev().removeClass('a_js2_on');
		};
	})

});
```

**动态调用方式 [查看详情》》](http://help.hbsjsd.cn/art/list/39.html "查看详情》》")**

速建时代TPCMS管理系统

菜单导航制作