jquery綠色實用的教育類網(wǎng)站導(dǎo)航頂部浮動以及懸?；瑒佣壊藛蜗吕匦?， js css 分離，結(jié)構(gòu)簡單清晰，下載即可使用。
使用方法：
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">首頁</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)的移動網(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">直播、點播、短信、郵件</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)校搭建、運維全托管</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>
運營服務(wù)
</p>
<p class="aui-down-menu-list-text">校長沙龍、運營社群</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">成功網(wǎng)校</a>
</li>
<li>
<a href="#">服務(wù)報價</a>
</li>
<li>
<a href="#">開源下載</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="#">公司簡介</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>
jquery教育網(wǎng)站頂部浮動導(dǎo)航下拉菜單特效 
