jQuery在線教育網(wǎng)頁頂部下拉分類導(dǎo)航菜單代碼

使用方法：

1、head引入css文件

<link rel="stylesheet" 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 id="wrapper">

	<div id="nav-header">
		<div class="header">
			<h1>
				<a href="javascript:;" class="logo">
					<img src="statics/images/logo.png" width="100"/>
				</a>
			</h1>
			<nav style="width:490px;">
				<ul>
					<li>
						<a href="javascript:;" class="home">首頁</a>
					</li>
					<li class="careerpath">
						<a href="javascript:;">職業(yè)</a><i class="slide-icon"></i>
						<div class="zhiye-submenu slide-submeu">
							<strong>前端</strong>
							<a href="javascript:;"><i class="web-icon"></i>Web前端工程師</a>
							<a href="javascript:;"><i class="wx-icon"></i>微信小程序</a>
							<strong>移動(dòng)端</strong>
							<a href="javascript:;"><i class="android-icon"></i>Android工程師</a>
							<a href="javascript:;"><i class="ios-icon"></i>iOS工程師</a>
							<strong>后端</strong>
							<a href="javascript:;"><i class="python-icon"></i>Python工程師</a>
							<a href="javascript:;"><i class="php-icon"></i>PHP工程師</a>
							<a href="javascript:;"><i class="golang-icon"></i>Golang工程師</a>
							<strong>大數(shù)據(jù)</strong>
							<a href="javascript:;"><i class="data-icon"></i>大數(shù)據(jù)平臺(tái)研發(fā)工程師</a>
							<strong>人工智能</strong>
							<a href="javascript:;"><i class="mlearning-icon"></i>機(jī)器學(xué)習(xí)工程師</a>
							<strong>區(qū)塊鏈</strong>
							<a href="javascript:;"><i class="yw-icon"></i>區(qū)塊鏈工程師</a>
						</div>
					</li>
					<li>
						<a href="javascript:;">課程</a><i class="slide-icon"></i>
						<div class="slide-submeu">
							<a href="javascript:;">課程庫</a>
							<a href="javascript:;">職業(yè)路徑</a>
							<a href="javascript:;">知識(shí)體系圖</a>
							<a href="javascript:;">系列課程</a>
						</div>
					</li>
					<li>
						<a href="javascript:;">企業(yè)</a><i class="slide-icon"></i>
						<div class="slide-submeu qy-box">
							<a href="javascript:;"><i class="wr-icon"></i>微軟人工智能 </a>
							<a href="javascript:;"><i class="baidu-icon"></i>百度AI圖像技術(shù)課</a>
							<a href="javascript:;"><i class="aws-icon"></i>AWS云計(jì)算</a>
							<a href="javascript:;"><i class="txy-icon"></i>騰訊云課程專區(qū)</a>
							<a href="javascript:;"><i class="gt-icon"></i>Qualcomm公開課 </a>
						</div>
					</li>
					<li>
						<a href="javascript:;">社區(qū)</a><i class="slide-icon"></i>
						<div class="slide-submeu">
							<a href="javascript:;">Wiki</a>
							<a href="javascript:;">技術(shù)問答</a>
							<a href="javascript:;">社群</a>
							<a href="javascript:;">資料下載</a>
						</div>

					</li>
				</ul>
			</nav>
			<div class="search">
				<input class="searchinput" id="searchinput" placeholder="搜索課程、問答或Wiki" />
				<span class="search-icon" id="search-bottom"></span>
				<div class="search-result">
				</div>
			</div>
			<div class="nav-other" id="nav-other">
				<span class="userinfo-notlogin">
			   <a href="javascript:;">登錄</a><i></i><a href="javascript:;">注冊</a>
			   </span>
			</div>
		</div>
	</div>
	
	<div style="height: 1800px;width: 100%;">
		<!--高度填充可以刪除-->
	</div>
	
</div>

<script>
	//導(dǎo)航滾動(dòng)置頂
	$(function(){
		var navHeight = $('#nav-header').height();
		$(document).scroll(function(){
			$(window).scrollTop()>=navHeight?$('#nav-header').addClass('fixed'):$('#nav-header').removeClass('fixed');
		})
	})
</script>