jquery左侧分类导航菜单和图片轮播滚动布局代码
导航菜单 次 2018-07-13jQuery实现左侧分类导航，图片轮播滚动，布局代码优化，提升用户体验。简洁导航菜单，易于集成，高效渲染。助力网站构建，提升用户浏览效率，展现专业品质。
jquery 实现 左侧固定二级菜单导航和带左右按钮控制图片轮播滚动代码布局， 基于superslide开发的js css 分离，结构简单清晰，下载即可使用。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="city-nav-header">
<div class="city-nav-list">
<a href="#">
<img src="images/icon-001.png" alt="">课程中心
</a>
<div class="city-nav-left">
<dl>
<dd>
<a href="#" class="arrow">
<img src="images/icon-002.png" alt="">软件水平考试
</a>
<ul class="city-nav-casket">
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">高 级：</a>
</li>
<li>
<a href="#">系统分析师</a>
</li>
<li>
<a href="#">信息系统项目管理师</a>
</li>
<li>
<a href="#">网络规划设计师</a>
</li>
<li>
<a href="#">系统架构设计师</a>
</li>
<li style="padding-left:72px;">
<a href="#">系统规划与管理师</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">中 级：</a>
</li>
<li>
<a href="#">系统集成项目管理工程师 </a>
</li>
<li>
<a href="#">软件设计师网络工程师</a>
</li>
<li>
<a href="#">信息系统监理师</a>
</li>
<li style="padding-left:72px;">
<a href="#">信息系统管理工程师</a>
</li>
<li>
<a href="#">电子商务设计师</a>
</li>
<li>
<a href="#">软件评测师</a>
</li>
<li>
<a href="#">信息安全工程师</a>
</li>
<li style="padding-left:72px;">
<a href="#">数据库系统工程师</a>
</li>
<li>
<a href="#">嵌入式系统设计师</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">初 级：</a>
</li>
<li>
<a href="#">程序员</a>
</li>
<li>
<a href="#">网络管理员</a>
</li>
<li>
<a href="#">信息处理技术员</a>
</li>
<li>
<a href="#">信息系统运行管理员</a>
</li>
<div class="clearfix"></div>
</ul>
</dd>
<dd>
<a href="#">
<img src="images/icon-003.png" alt="">二级建造师
</a>
<ul class="city-nav-casket">
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">公 共：</a>
</li>
<li>
<a href="#">工程法规</a>
</li>
<li>
<a href="#">施工管理</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">实 务：</a>
</li>
<li>
<a href="#">建筑工程 </a>
</li>
<li>
<a href="#">市政工程</a>
</li>
<li>
<a href="#">机电工程</a>
</li>
<li>
<a href="#">公路工程</a>
</li>
<li>
<a href="#">水利水电工程</a>
</li>
<li style="padding-left:72px;">
<a href="#">矿业工程</a>
</li>
<div class="clearfix"></div>
</ul>
</dd>
<dd>
<a href="#">
<img src="images/icon-004.png" alt="">一级建造师
</a>
<ul class="city-nav-casket">
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">公 共：</a>
</li>
<li>
<a href="#">工程法规</a>
</li>
<li>
<a href="#">施工管理</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">实 务：</a>
</li>
<li>
<a href="#">建筑工程 </a>
</li>
<li>
<a href="#">市政工程</a>
</li>
<li>
<a href="#">机电工程</a>
</li>
<li>
<a href="#">公路工程</a>
</li>
<li>
<a href="#">水利水电工程</a>
</li>
<li style="padding-left:72px;">
<a href="#">矿业工程</a>
</li>
<div class="clearfix"></div>
</ul>
</dd>
<dd>
<a href="#">
<img src="images/icon-005.png" alt="">通信水平考试
</a>
<ul class="city-nav-casket">
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">公 共：</a>
</li>
<li>
<a href="#">工程法规</a>
</li>
<li>
<a href="#">施工管理</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">实 务：</a>
</li>
<li>
<a href="#">建筑工程 </a>
</li>
<li>
<a href="#">市政工程</a>
</li>
<li>
<a href="#">机电工程</a>
</li>
<li>
<a href="#">公路工程</a>
</li>
<li>
<a href="#">水利水电工程</a>
</li>
<li style="padding-left:72px;">
<a href="#">矿业工程</a>
</li>
<div class="clearfix"></div>
</ul>
</dd>
<dd>
<a href="#">
<img src="images/icon-006.png" alt="">资格考试/考研
</a>
<ul class="city-nav-casket">
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">公 共：</a>
</li>
<li>
<a href="#">工程法规</a>
</li>
<li>
<a href="#">施工管理</a>
</li>
<div class="clearfix"></div>
<li style="border-right: none;padding-right: 0;">
<a href="#" style="color:#666">实 务：</a>
</li>
<li>
<a href="#">建筑工程 </a>
</li>
<li>
<a href="#">市政工程</a>
</li>
<li>
<a href="#">机电工程</a>
</li>
<li>
<a href="#">公路工程</a>
</li>
<li>
<a href="#">水利水电工程</a>
</li>
<li style="padding-left:72px;">
<a href="#">矿业工程</a>
</li>
<div class="clearfix"></div>
</ul>
</dd>
<dd>
<a href="#">
<img src="images/icon-007.png" alt="">PMP/ACP/NPDP
</a>
<ul class="city-nav-casket" style="width:240px;">
<li style="height: 32px; line-height: 32px;border-right: medium none;">
<a href="#">PMP考试</a>
</li>
<li style="height: 32px; line-height: 32px;border-right: medium none;">
<a href="#">ACP考试</a>
</li>
<li style="height: 32px; line-height: 32px;border-right: medium none;">
<a href="#">NPDP考试</a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="city-nav-item">
<a href="#">
<i></i>
免费公开课
</a>
<a href="#">学习包</a>
<a href="#" style="color:#08acee">直播课堂</a>
<a href="#">视频中心</a>
<a href="#">云阅读</a>
<a href="#">题库</a>
</div>
</div>
<div class="city-slide">
<div class="hd city-slide-header">
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<div class="bd city-slide-body">
<ul>
<li style="background:#bf271d">
<a href="#">
<img src="images/banner1.jpg" alt="">
</a>
</li>
<li style="background:#0f2049">
<a href="#">
<img src="images/banner2.jpg" alt="">
</a>
</li>
<li style="background:#d3ebfb">
<a href="#">
<img src="images/banner3.jpg" alt="">
</a>
</li>
<li style="background:#7094fc">
<a href="#">
<img src="images/banner4.png" alt="">
</a>
</li>
<li style="background:#44affc">
<a href="#">
<img src="images/banner5.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".city-nav-list").slide({
type: "menu",
titCell: "dd",
targetCell: "ul",
delayTime: 0,
defaultPlay: false,
returnDefault: true
});
jQuery(".city-slide").slide({
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
delayTime: 800
});
</script>
文件目录
本资源来自：代码 » 导航菜单 » jquery左侧分类导航菜单和图片轮播滚动布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jquery教育网站顶部浮动导航下拉菜单特效
« 上一篇 2018年07月12日
jQuery css3圆形图标菜单旋转轮播代码
下一篇 » 2018年07月16日
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、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
