jQuery在线课程分类导航和banner图片布局代码
导航菜单 次 2018-07-30学习jQuery在线课程，掌握分类导航与banner图片布局技巧。通过代码实现精美导航菜单，提升网站用户体验。简单易学，快速上手，让你的网页焕然一新！
jQuery基于superslide开发制作绿色宽屏的在线课程教育网站分类导航菜单和banner图片轮播切换布局代码。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/ux-micro-icon.css">
2、head引入js文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="m-indextopwrap f-pr">
<div class="m-indextopnav">
<div class="g-flow">
<div class="topnav f-pr f-cb">
<div class="u-indexnavcatebtn">
<a href="#" target="_blank" class="cbtn f-cb">
<div class="ic f-fl">
</div>
<span class="qb f-fl f-f0">全部精品课</span></a>
</div>
<div class="u-indexnavcatedialog f-pa" id="j-nav-indexcatedialog">
<div class="f-fl cateleft f-pa">
<div class="catebg f-pa">
</div>
<div class="items f-pa">
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">办公效率</a>
<a href="#" target="_blank" class="second">PPT</a>
<a href="#" target="_blank" class="second">Excel</a>
<a href="#" target="_blank" class="second">Word</a>
</p>
</div>
</div>
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">职业发展</a>
<a href="#" target="_blank" class="second">个人成长</a>
<a href="#" target="_blank" class="second">演讲口才</a>
</p>
</div>
</div>
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">编程开发</a>
<a href="#" target="_blank" class="second">人工智能</a>
<a href="#" target="_blank" class="second">Python</a>
</p>
</div>
</div>
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">产品和设计</a>
<a href="#" target="_blank" class="second">软件</a>
<a href="#" target="_blank" class="second">产品运营</a>
<a href="#" target="_blank" class="second">新媒体</a>
<a href="#" target="_blank" class="second">产品策划</a>
</p>
</div>
</div>
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">生活方式</a>
<a href="#" target="_blank" class="second">摄影</a>
<a href="#" target="_blank" class="second">书法</a>
<a href="#" target="_blank" class="second">理财</a>
</p>
</div>
</div>
<div class="item">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">升学辅导</a>
<a href="#" target="_blank" class="second">考研</a>
<a href="#" target="_blank" class="second">STEAM</a>
<a href="#" target="_blank" class="second">小学</a>
</p>
</div>
</div>
<div class="item last">
<div class="curbg">
</div>
<div class="inn">
<p>
<a target="_blank" href="#" class="f-f0 first">语言学习</a>
<a href="#" target="_blank" class="second">英语</a>
<a href="#" target="_blank" class="second">日语</a>
<a href="#" target="_blank" class="second">新概念</a>
<a href="#" target="_blank" class="second">实用口语</a>
<a href="#" target="_blank" class="second">韩语</a>
</p>
</div>
</div>
</div>
</div>
<div class="cateright f-pa f-cb">
<a class="close f-pa j-close" onclick="$('.rwrap').hide();"></a>
<div class="f-pr rwrap f-cb cur">
<div class="rwrap-left f-cb">
<div class="top-rec-box f-cb">
<a class="top-rec f-fl" href="#" target="_blank">办公效率·精选好课</a>
<a class="top-rec f-fl" href="#" target="_blank">跟刘万祥学Excel商务图表</a>
</div>
<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">办公软件</a>
<div class="links">
<span class="seperate">|</span>
<p class="cate3links">
<a target="_blank" href="#" class="f-f0 rec">PPT</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 rec">Excel</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 ">Word</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 ">Project</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 ">Keynote</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 ">Outlook</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 ">更多软件</a>
</p>
</div>
<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">工作效率</a>
<div class="links">
<span class="seperate">|</span>
<p class="cate3links">
<a target="_blank" href="#" class="f-f0 ">时间管理</a>
<span class="slash">|</span>
<a target="_blank" href="#" class="f-f0 rec">思维导图</a>
</p>
</div>
<a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">电脑基础</a>
<div class="links">
<span class="seperate">|</span>
<p class="cate3links">
<a 基础操作" target="_blank" href="#" class="f-f0 ">基础操作</a>
<span class="slash">|</span>
<a 常用工具" target="_blank" href="#" class="f-f0 ">常用工具</a>
</p>
</div>
</div>
<div class="rwrap-right f-cb">
<a class="f-f0 tit" href="#" target="_blank">系列课程</a>
<p class="links">
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">从Excel到Power BI数据分析可视化</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">Excel+PPT+Word小白变大神</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">英语口语指南——为暑期出境旅游定制</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">向《经济学人》学图表</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">向商业期刊学图表</a>
<a href="#" class="f-cb f-fc6 f-f0" target="_blank">如何成为真正的PPT高手</a>
<a href="#" class="f-fc6 f-f0" target="_blank">更多>></a>
</p>
<a href="#" target="_blank" class="picwrap">
<img src="images/4ff708d8-9b24-43ea-a423-2496ee0cc901.png" class="f-pa pic">
</a>
</div>
</div>
</div>
<script type="text/javascript">
jQuery("#j-nav-indexcatedialog").slide({
titCell:".item", //鼠标触发对象
targetCell:".rwrap", //titCell里面包含的要显示/消失的对象
delayTime:100, //效果时间
defaultPlay:false,
triggerTime:0, //鼠标延迟触发时间（默认150）
returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
});
</script>
</div>
<div class="mainnav f-cb j-navFind">
<a class="nitem f-f0" href="#" target="_self" >微专业</a>
<div class="f-cb nitem f-f0 x-hoverItem">
<span>课程体系</span>
<div class="f-pa u-navdropmenu x-child">
<span class="arrr f-pa"></span>
<a class="f-f0 dropitem " target="_blank" href="#" >
<span>IBM认知计算</span>
</a>
<a class="f-f0 dropitem " target="_blank" href="#" >
<span>大学计算机专业</span>
</a>
<a class="f-f0 dropitem " target="_blank" href="#" >
<span>互联网职业技能</span>
</a>
<a class="f-f0 dropitem last" target="_blank" href="#" >
<span>职场提升课程体系</span>
</a>
</div>
</div>
<a class="nitem f-f0 f-dn" target="_blank" href="#" >企业版</a>
<div class="nitem f-f0 x-hoverItem down-wrap">
<span class="downApp">下载APP</span>
<div class="u-navapptip f-pa x-child">
<div class="arrr f-pa">
</div>
<img src="images/nav_qrcode.png" class="ewm f-fl" alt="下载APP" title="下载APP">
<div class="rcon f-fr">
<h4 class="txt">扫码下载官方App</h4>
<a href="#" target="_self" class="store apple"></a>
<a href="#" target="_self" class="store android"></a>
</div>
</div>
</div>
<a class="nitem f-f0" href="#" target="_blank">企业培训</a>
</div>
<div class="search off f-cb">
<div class="box f-cb">
<input type="text" maxlength="30" placeholder="搜索课程">
</div>
<div class="submit f-hide f-pa"></div>
</div>
</div>
</div>
</div>
</div>
<div id="m-slide-container">
<div>
<div class="m-slide f-pr">
<div class="f-pr m-slide-wrap" id="j-slidewrap">
<div class="slide" target="_blank" id="j-slide" href="#">
<ul>
<li><a href=""><img src="images/22f32255-a49c-4db1-a93b-8f3a508b0ed6.jpg"></a></li>
<li><a href=""><img src="images/8A52811B4B0D8869DD974FE5075EA597.jpg"></a></li>
<li><a href=""><img src="images/8e164ab4-4f74-4445-aca6-321b67dcf7f5.jpg"></a></li>
<li><a href=""><img src="images/a336d02e-7a42-47b0-8631-9034c9471c71.jpg"></a></li>
<li><a href=""><img src="images/bc4f08ee-aa9c-4d49-a14a-5cbf3d59f80f.jpg"></a></li>
<li><a href=""><img src="images/e4954183-4f72-45f4-ac45-e6ebb2dfc275.jpg"></a></li>
<li><a href=""><img src="images/01C52854E262EAD6FD4AC98B74B45B96.jpg"></a></li>
</ul>
</div>
<a class="lbtn prev"></a>
<a class="rbtn next"></a>
<div class="u-slidepg">
<ul class="f-cb f-pr f-ib pbox">
<li class="on">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
<li class="">7</li>
</ul>
</div>
<div class="sideNav f-pa">
<div class="yktqr f-pa" style="display:none;">
<img src="682c5edb-c0b2-4725-bf2b-cc7c441d7e30.png">
</div>
<a href="#" class="sidelink" target="_blank">
<div class="livecard f-pr">
<img src="images/000C36B6E1BE3E4D6ADC284F104D7DB1.jpg" alt="直播卡片图" class="sideimg">
<div class="cnt f-f0 j-cnt">
<p class="title">
十大影响因素，教你轻松提升手淘搜索排名
</p>
<p class="time">
时间：7.28 20:00 ~ 22:00
</p>
<p class="teacher">
讲师：齐论高级讲师 无铭
</p>
</div>
</div>
</a>
</div>
</div>
<div class="lbevel f-pa">
</div>
<div class="rbevel f-pa">
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery("#j-slidewrap").slide({
titCell:".u-slidepg ul li",
mainCell:".slide ul",
autoPlay:true,
delayTime:0,
});
</script>
<div class="m-micro" id="j-micro">
<div class="g-flow f-pr">
<div class="f-cb m-micro-wrap">
<div class="cntwrap" id="j-cntwrap">
<div class="cntlist" id="j-cntlist">
<ul>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001360001 f-fl">
</div>
<div class="tit f-f0 f-thide">
初级前端开发工程师
</div>
<div class="tip f-f0 f-thide">
网易一线前端工程师亲授
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001359001 f-fl">
</div>
<div class="tit f-f0 f-thide">
Python数据分析师
</div>
<div class="tip f-f0 f-thide">
带你一起用数据认识世界
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001359003 f-fl">
</div>
<div class="tit f-f0 f-thide">
产品经理
</div>
<div class="tip f-f0 f-thide">
系统学习产品方法论
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001429007 f-fl">
</div>
<div class="tit f-f0 f-thide">
区块链开发工程师
</div>
<div class="tip f-f0 f-thide">
带你成为链接未来的人才
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001358003 f-fl">
</div>
<div class="tit f-f0 f-thide">
人工智能数学基础
</div>
<div class="tip f-f0 f-thide">
精准掌握人工智能核心数学
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001360002 f-fl">
</div>
<div class="tit f-f0 f-thide">
初级UI设计师
</div>
<div class="tip f-f0 f-thide">
网易设计专家经典出品
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001127001 f-fl">
</div>
<div class="tit f-f0 f-thide">
产品运营
</div>
<div class="tip f-f0 f-thide">
运营大咖强强联合
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001358002 f-fl">
</div>
<div class="tit f-f0 f-thide">
机器学习工程师
</div>
<div class="tip f-f0 f-thide">
一线机器学习专家联合打造
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
</div>
<div class="tit f-f0 f-thide">
python应用基础
</div>
<div class="tip f-f0 f-thide">
名校名师的python实践课
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001352005 f-fl">
</div>
<div class="tit f-f0 f-thide">
互联网项目管理
</div>
<div class="tip f-f0 f-thide">
网易一线成功产品项目经验
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon f-fl">
</div>
<div class="tit f-f0 f-thide">
高级UI设计师
</div>
<div class="tip f-f0 f-thide">
最详尽深入的产品设计指导
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001420002 f-fl">
</div>
<div class="tit f-f0 f-thide">
大数据开发工程师
</div>
<div class="tip f-f0 f-thide">
网易专家带你玩转Hadoop
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001106002 f-fl">
</div>
<div class="tit f-f0 f-thide">
交互设计师
</div>
<div class="tip f-f0 f-thide">
网易&浙大最强交互设计导师
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001386007 f-fl">
</div>
<div class="tit f-f0 f-thide">
Web安全（进阶）
</div>
<div class="tip f-f0 f-thide">
网络安全高手蜕变之旅
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001405003 f-fl">
</div>
<div class="tit f-f0 f-thide">
自由摄影师
</div>
<div class="tip f-f0 f-thide">
摄影爱好者向专业进阶
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001359002 f-fl">
</div>
<div class="tit f-f0 f-thide">
高级前端开发工程师
</div>
<div class="tip f-f0 f-thide">
网易前端开发专家亲授
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001268002 f-fl">
</div>
<div class="tit f-f0 f-thide">
全栈新媒体运营
</div>
<div class="tip f-f0 f-thide">
成为行业抢手的新媒体人
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-28001 f-fl">
</div>
<div class="tit f-f0 f-thide">
自由摄影师 Plus
</div>
<div class="tip f-f0 f-thide">
培养一个能赚钱的爱好
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
</div>
<div class="tit f-f0 f-thide">
Python Web开发工程师
</div>
<div class="tip f-f0 f-thide">
快速上手的全栈训练营
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001122002 f-fl">
</div>
<div class="tit f-f0 f-thide">
测试工程师
</div>
<div class="tip f-f0 f-thide">
打造最专业的测试人
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-85002 f-fl">
</div>
<div class="tit f-f0 f-thide">
Java 开发工程师
</div>
<div class="tip f-f0 f-thide">
浙大Java男神翁恺执教
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001227001 f-fl">
</div>
<div class="tit f-f0 f-thide">
Web安全工程师
</div>
<div class="tip f-f0 f-thide">
“白帽子黑客”训练营
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-85001 f-fl">
</div>
<div class="tit f-f0 f-thide">
独立音乐制作人
</div>
<div class="tip f-f0 f-thide">
最易懂的音乐制作课程
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001197001 f-fl">
</div>
<div class="tit f-f0 f-thide">
用户研究员
</div>
<div class="tip f-f0 f-thide">
网易&浙大导师带你“读心”
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-20001 f-fl">
</div>
<div class="tit f-f0 f-thide">
MySQL数据库工程师
</div>
<div class="tip f-f0 f-thide">
网易一线DBA团队打造
</div>
</a>
</li>
<li class="item f-fl">
<a href="#" target="_blank">
<div class="imgbox f-icon ux-micro-icon-1001426003 f-fl">
</div>
<div class="tit f-f0 f-thide">
大数据开发工程师（Spark）
</div>
<div class="tip f-f0 f-thide">
手把手带练Spark大数据
</div>
</a>
</li>
</ul>
</div>
<div class="larr f-pa prev">
</div>
<div class="rarr f-pa next">
</div>
</div>
<script type="text/javascript">
jQuery("#j-cntwrap").slide({
mainCell:"#j-cntlist ul",
autoPage:true,
effect:"left",
autoPlay:true,
scroll:1,
vis:6
});
</script>
</div>
</div>
</div>
文件目录
本资源来自：代码 » 导航菜单 » jQuery在线课程分类导航和banner图片布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery商城系统开发网站下拉导航和图片布局代码
« 上一篇
2018年08月02日
jQuery手机侧边滑动导航菜单代码
下一篇 »
2018年07月29日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
