微信掃碼登錄 ×
vip素材 jquery教育網(wǎng)站頂部浮動(dòng)導(dǎo)航下拉菜單特效
vip素材

jquery教育網(wǎng)站頂部浮動(dòng)導(dǎo)航下拉菜單特效

收藏
jquery教育網(wǎng)站頂部浮動(dòng)導(dǎo)航下拉菜單特效
jquery綠色實(shí)用的教育類網(wǎng)站導(dǎo)航頂部浮動(dòng)以及懸?;瑒?dòng)二級(jí)菜單下拉特效, js css 分離,結(jié)構(gòu)簡(jiǎn)單清晰,下載即可使用。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

3、body引入HTML代碼

<div class="header-nav aui-header-nav moveDown">
	<div class="header-content clearfix">
		<div class="header-logo">
			<a href="#">
				<img src="images/logo.png" alt="">
			</a>
		</div>
		<div class="header-nav-right">
			<div class="header-nav-right-en">
				<a href="#">EN</a>
			</div>
			<div class="header-nav-weChat">
				<a href="#">
					<i class="icon-weChat"></i>
					咨詢
				
				
				</a>
				<div class="navbar-contact-shadowl"></div>
				<div class="navbar-contact-shadowr"></div>
				<div class="navbar-contact-hover">
					<img src="images/code.jpg" alt="">
				</div>
			</div>
			<div class="header-nav-tel">
				<a href="#">
					<i class="icon-tel"></i>
					400-021-8888
				</a>
			</div>
		</div>
		<div class="header-nav-list">
			<ul>
				<li>
					<a href="#" class="cur">首頁(yè)</a>
				</li>
				<li class="drop-down">
					<a href="#">
						全部產(chǎn)品 <i class="icon-dow"></i>
					</a>
					<div class="aui-dow-box aui-dow-box-list">
						<div class="aui-down-menu clearfix">
							<div class="aui-down-menu-title">
								<i class="icon-title001"></i>
								網(wǎng)校產(chǎn)品
							
							
							</div>
							<ul class="aui-down-menu-list">
								<li class="aui-down-menu-list-item aui-top-border">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title002"></i>
											ES 通用版
										</p>
										<p class="aui-down-menu-list-text">教育機(jī)構(gòu)拓展線上教學(xué)</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item aui-top-border">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title003"></i>
											ES 企培版
										</p>
										<p class="aui-down-menu-list-text">企業(yè)內(nèi)訓(xùn),合作伙伴培訓(xùn)</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item aui-top-border" style="width:170px;">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title004"></i>
											ES 高校版
										</p>
										<p class="aui-down-menu-list-text">智慧學(xué)習(xí),高校慕課</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title005"></i>
											闊知學(xué)堂
										</p>
										<p class="aui-down-menu-list-text">教育機(jī)構(gòu)的移動(dòng)網(wǎng)校</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item" style="width:auto">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title006"></i>
											教育云
										</p>
										<p class="aui-down-menu-list-text">直播、點(diǎn)播、短信、郵件</p>
									</a>
								</li>
							</ul>
						</div>
						<div class="aui-down-menu clearfix">
							<div class="aui-down-menu-title">
								<i class="icon-title007"></i>
								增值服務(wù)
							</div>
							<ul class="aui-down-menu-list">
								<li class="aui-down-menu-list-item aui-top-border">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title008"></i>
											SaaS 服務(wù)
										</p>
										<p class="aui-down-menu-list-text">網(wǎng)校搭建、運(yùn)維全托管</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item aui-top-border">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title009"></i>
											網(wǎng)校主題
										</p>
										<p class="aui-down-menu-list-text">你的網(wǎng)校裝修管家</p>
									</a>
								</li>
								<li class="aui-down-menu-list-item aui-top-border" style="width:170px;">
									<a href="#">
										<p class="aui-down-menu-list-title">
											<i class="icon-title010"></i>
											運(yùn)營(yíng)服務(wù)
										</p>
										<p class="aui-down-menu-list-text">校長(zhǎng)沙龍、運(yùn)營(yíng)社群</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<a href="#">成功網(wǎng)校</a>
				</li>
				<li>
					<a href="#">服務(wù)報(bào)價(jià)</a>
				</li>
				<li>
					<a href="#">開(kāi)源下載</a>
				</li>
				<li>
					<a href="#">演示站</a>
				</li>
				<li class="drop-down">
					<a href="#">
						關(guān)于我們<i class="icon-dow"></i>
					</a>
					<ul class="aui-about-dow">
						<li>
							<a href="#">公司簡(jiǎn)介</a>
						</li>
						<li>
							<a href="#">公司文化</a>
						</li>
						<li>
							<a href="#">新聞資訊</a>
						</li>
						<li>
							<a href="#">聯(lián)系我們</a>
						</li>
						<li>
							<a href="#">加入我們</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div style="height:1200px;"></div><!--可刪除-->

<script type="text/javascript">

	$(window).on('scroll', function() {
		if ($(document).scrollTop() > 200) {
			$('.aui-header-nav').addClass('solid').removeClass('moveDown');
		} else {
			$('.aui-header-nav').removeClass('solid').addClass('moveDown');
		}
	});

</script>

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

  • 軟件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
x
×
×

注冊(cè)

QQ注冊(cè) 立即下載 微信注冊(cè) 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了