利用jQuery实现响应式导航菜单代码



60 237 80



特效描述:利用jQuery实现 响应式 导航菜单 代码,利用jQuery实现响应式导航菜单代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
<script type="text/javascript" src='js/script.js'></script>

3. HTML代码

<!-- 导航条 -->
<div class="head">
  <div class="navbox"> 
	 <!-- 侧边栏菜单 -->
	 <div class="sidenav">
		<label><i></i>全部课程</label>
		<ul class="side">
		   <li>
			  <a href="#"><i class="side_t icon1"></i>数控编程培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>数控编程培训</b></dt>
					<dd>
					   <a href="#">UG数控编程培训-高级班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					   <a href='#'>UG+Powermill编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon2"></i>塑料模具培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>塑料模具培训</b></dt>
					<dd>
					   <a href="#">UG数控编程培训-高级班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					   <a href='#'>UG+Powermill编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon3"></i>冲压模具培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>冲压模具培训</b></dt>
					<dd>
					   <a href="#">UG数控编程培训-高级班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon4"></i>塑料模具培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>塑料模具培训</b></dt>
					<dd>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					   <a href='#'>UG+Powermill编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon5"></i>工业4.0+培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>工业4.0+培训</b></dt>
					<dd>
					   <a href="#">UG数控编程培训-高级班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon6"></i>产品设计培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>产品设计培训</b></dt>
					<dd>
					   <a href="#">西门子S7-200Smart编程培训</a>
					   <a href='#'>西门子300/1200/1500PLC编程培训</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					   <a href='#'>UG+Powermill编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		   <li>
			  <a href="#"><i class="side_t icon7"></i>学历证书培训</a>
			  <div class="side_main">
				 <dl>
					<dt><b>学历证书培训</b></dt>
					<dd>
					   <a href="#">UG数控编程培训-高级班</a>
					   <a href='#'>UG产品零件编程班</a>
					   <a href='#'>CNC编程/调机综合班</a>
					   <a href='#'>CNC操机手工编程班</a>
					   <a href='#'>4/5多轴编程培训</a>
					   <a href='#'>mastrcam编程班</a>
					   <a href='#'>数控车操机和编程班</a>
					   <a href='#'>PM模具编程培训</a>
					   <a href='#'>UG+Powermill编程班</a>
					   <a href='#'>UG产品零件编程班</a>
					</dd>
				 </dl>
			  </div>
		   </li>
		</ul>
	 </div>
	 <!-- 主菜单 -->
	 <div class="nav headrg">
		<ul class="nav_pc">
		   <li>
			  <a class="f_a" href="#">首页</a>
			  <div class="s_navbox">
				 <div class="s_a"></div>
			  </div>
		   </li>
		   <li>
			  <a class="f_a" href="#">关于我们</a>
			  <div class="s_navbox">
				 <div class="s_a">
					<a href="#">关于我们</a>
					<a href="#">公司简介</a>
					<a href="#">教育环境</a>
				 </div>
			  </div>
		   </li>
		   <li> 
			  <a class="f_a" href="#">专业课程</a>
			  <div class="s_navbox">
				 <div class="s_a">
					<a href="#">数控车操机和编程班</a>
					<a href="#">PM模具编程培训</a>
					<a href="#">塑料模具培训</a>
					<a href="#">UG产品零件编程班</a>
					<a href="#">CNC操机手工编程班</a>
				 </div>
			  </div>
		   </li>
		   <li> 
			  <a class="f_a" href="#">专业课程2</a>
			  <div class="s_navbox">
				 <div class="s_a">
					<a href="#" >PM模具编程培训</a>
					<a href="#" >mastrcam编程班</a>
					<a href="#" >UG产品零件编程班</a>
					<a href="#" >CNC操机手工编程班</a>
					<a href="#" >4/5多轴编程培训</a>
				 </div>
			  </div>
		   </li>
		   <li> 
			  <a class="f_a" href="#">专业课程3</a>
			  <div class="s_navbox">
				 <div class="s_a">
					<a href="#">UG产品零件编程班</a>
					<a href="#">mastrcam编程班</a>
					<a href="#" >UG产品零件编程班</a>
					<a href="#" >mastrcam编程班 </a>
				 </div>
			  </div>
		   </li>
		   <li> 
			  <a class="f_a" href="#">新闻资讯</a>
			  <div class="s_navbox">
				 <div class="s_a">
					<a href="#">招生简章</a>
					<a href="#">公司新闻</a>
					<a href="#">行业资讯</a>
					<a href="#">招贤纳士</a>
				 </div>
			  </div>
		   </li>
		   <li> 
			  <a class="f_a" href="#">联系我们</a>
			  <div class="s_navbox">
				 <div class="s_a">
				 </div>
			  </div>
		   </li>
		</ul>
	 </div>
  </div>
</div>
<!-- 手机端导航--开始 -->
<div class="m_img">
  <div class="headlf">
	 <a href="index.html"> <img class="m_logo" src="imgs/logo.png" /></a>
  </div>
  <div class="headrg">
	 <a href="javascript:;" class="a_js"> <img class="m_menuimg" src="imgs/m_menuimg.png" /></a>
  </div>
</div>
<div class="m_nav">
  <div class="closecover a_closed"></div>
  <div class="closeicon">
	 <a href="javascript:;" class="a_closed"> <img src="imgs/close.png" width="22" /></a>
  </div>
  <div class="m_navList">
	 <ul>
		<li>
		   <div class="m_f_a">
			  <a href="#">首页</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav"></div>
		</li>
		<li> 
		   <div class="m_f_a">
			  <a href="#">关于我们</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav">
			  <a href="#">关于我们</a>
			  <a href="#">公司简介</a>
			  <a href="#">教育环境</a>
		   </div>
		</li>
		<li> 
		   <div class="m_f_a">
			  <a href="#">专业课程</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav">
			  <a href="#">数控车操机和编程班</a>
			  <a href="#">PM模具编程培训</a>
			  <a href="#">塑料模具培训</a>
			  <a href="#">UG产品零件编程班</a>
			  <a href="#">CNC操机手工编程班</a>
		   </div>
		</li>
		<li>
		   <div class="m_f_a">
			  <a href="#">专业课程2</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav">
			  <a href="#" >PM模具编程培训</a>
			  <a href="#" >mastrcam编程班</a>
			  <a href="#" >UG产品零件编程班</a>
			  <a href="#" >CNC操机手工编程班</a>
			  <a href="#" >4/5多轴编程培训</a>
		   </div>
		</li>
		<li> 
		   <div class="m_f_a">
			  <a href="class.html">专业课程3</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav">
			  <a href="#">UG产品零件编程班</a>
			  <a href="#">mastrcam编程班</a>
			  <a href="#" >UG产品零件编程班</a>
			  <a href="#" >mastrcam编程班 </a>
		   </div>
		</li>
		<li> 
		   <div class="m_f_a">
			  <a href="news.html">新闻资讯</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav">
			  <a href="student.html">招生简章</a>
			  <a href="news.html">公司新闻</a>
			  <a href="industry.html">行业资讯</a>
			  <a href="recruit.html">招贤纳士</a>
		   </div>
		</li>
		<li>
		   <div class="m_f_a">
			  <a href="contact.html">联系我们</a>
			  <i></i>
		   </div>
		   <div class="m_s_nav"></div>
		</li>
	 </ul>
  </div>
</div>
<!-- 手机端导航--结束 -->
<!--轮播部分-->
<div class="slider">
  <div id="slideBox" class="slideBox">
	 <div class="hd">
		<ul>
		   <li></li>
		   <li></li>
		   <li></li>
		</ul>
	 </div>
	 <div class="bd">
		<ul>
		   <li><img src="imgs/slider_bg01.jpg" /></li>
		   <li><img src="imgs/slider_bg02.jpg" /></li>
		   <li><img src="imgs/slider_bg03.jpg" /></li>
		</ul>
	 </div>
  </div>
</div>
<script type="text/javascript">
  //轮播
  jQuery(".slideBox").slide({
	 mainCell: ".bd ul",
	 effect: "leftLoop",
	 vis: "auto",
	 autoPlay: true,
	 trigger: "mouseover"
  });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片切换 图片收缩展开 竖直导航菜单 文字切换 图标导航菜单 背景切换 固定导航菜单 手风琴 侧边导航菜单 选项卡自动切换 树形导航菜单 视频切换 网址导航菜单 列表切换 导航菜单插件 渐隐切换 文字导航菜单 全屏切换 切换按钮 缩放切换 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到