jQuery游戲網站響應式導航菜單布局

jQuery寬屏實用的游戲網站導航欄下拉菜單，自適應屏幕大小，遮罩層彈出黑色的下拉導航菜單布局代碼。這是一款自適應屏幕的響應式導航布局代碼。

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="head" id="head">

	<a name="top"></a>
	<div class="logo lf">
		<a href="javascript:;">
			<img src="statics/images/logo.jpg">
			<div class="p1"></div>
		</a>
	</div>
	<div class="nav rg">
		<ul class="nav_pc">
			<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>
			<li>
				<a class="a1 a1a" href="javascript:;">游戲產品</a>
				<div class="div1 mad2">
					<div class="p1">

						<a href="javascript:;">端游產品</a>

						<a href="javascript:;">手游產品</a>

						<a href="javascript:;">HTML5產品</a>

						<a href="javascript:;">vr游戲</a>

						<a href="javascript:;">主機游戲</a>

					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li>
				<a class="a1 a1a" href="javascript:;">玩家服務</a>
				<div class="div1 mad3">
					<div class="p1">
						<a class="pad" href="javascript:;" target="_blank">客服中心</a>
						<a href="javascript:;" target="_blank">安全中心</a>
						<a href="javascript:;" target="_blank">充值系統</a>
						<a href="javascript:;" target="_blank">VIP系統</a>
						<a href="javascript:;">家長監護</a>
					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li>
				<a class="a1 a1a" href="javascript:;">投資者關系</a>
				<div class="div1 mad4">
					<div class="p1">
						<a class="pad" href="javascript:;">公司公告</a>
						<a href="javascript:;">聯系方式</a>
						<a href="javascript:;" target="_blank">上證e互動</a>
						<a href="javascript:;" target="_blank">公司股價 </a>
					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li>
				<a class="a1 a1a" href="javascript:;">游戲資訊 </a>
				<div class="div1 mad5">
					<div class="p1">
						<a class="pad" href="javascript:;">公司新聞</a>
						<a href="javascript:;">產品動態</a>
						<a href="javascript:;">媒體報道</a>
						<a href="javascript:;">視頻中心</a>
					</div>
					<div class="clear"></div>
				</div>
			</li>
			<li>
				<a class="a1 a1a" href="javascript:;">加入游戲</a>
				<div class="div1 mad6">
					<div class="p1">
						<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>
			<li>
				<a class="a1" href="javascript:;">聯系我們</a>
			</li>
			<div class="clear"></div>
		</ul>
	</div>
	<div class="clear"></div>
</div>
<!--移動端導航開始-->
<div class="moblie_head">
	<div class="lf">
		<a href="javascript:;">
		<img src="statics/images/logo.jpg"></a>
	</div>
	<div class="rg">
		<a href="javascript:;" class="a_js">
		<img src="statics/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="statics/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>
			<li>
				<a class="a_js2" href="javascript:;">游戲產品</a>
				<div class="a_txt2">

					<a href="javascript:;">端游產品</a>

					<a href="javascript:;">手游產品</a>

					<a href="javascript:;">HTML5產品</a>

					<a href="javascript:;">vr游戲</a>

					<a href="javascript:;">主機游戲</a>

				</div>
			</li>
			<li>
				<a class="a_js2" href="javascript:;">玩家服務</a>
				<div class="a_txt2">
					<a class="pad" href="javascript:;" target="_blank">客服中心</a>
					<a href="javascript:;" target="_blank">安全中心</a>
					<a href="javascript:;" target="_blank">充值系統</a>
					<a href="javascript:;" target="_blank">VIP系統</a>
					<a href="javascript:;">家長監護</a>
				</div>
			</li>
			<li>
				<a class="a_js2" href="javascript:;">投資者關系</a>
				<div class="a_txt2">
					<a class="pad" href="javascript:;">公司公告</a>
					<a href="javascript:;">聯系方式</a>
					<a href="javascript:;" target="_blank">上證e互動</a>
					<a href="javascript:;" target="_blank">公司股價 </a>
				</div>
			</li>
			<li>
				<a class="a_js2" href="javascript:;">游戲資訊 </a>
				<div class="a_txt2">
					<a class="pad" href="javascript:;">公司新聞</a>
					<a href="javascript:;">產品動態</a>
					<a href="javascript:;">媒體報道</a>
					<a href="javascript:;">視頻中心</a>
				</div>
			</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>
				</div>
			</li>
			<li>
				<a href="javascript:;">聯系我們</a>
			</li>
			<div class="clear"></div>
		</ul>
	</div>
</div>
<!--移動端導航結束-->

<script src="statics/js/script.js" type="text/javascript" charset="utf-8"></script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

0 17783 66

軟件 Dreamweaver
格式 HTML
作者 I想要
版權 ? 原創商用（獨家） i

版權聲明

此作品是由17素材網簽約用戶上傳，17素材網擁有版權；未經17素材網書面授權，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權；

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。