使用jquery实现HTML5响应式导航菜单教程

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

通过jquery html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。具体效果图：

网页hTML具体代码：



     
      
       复制具体代码
      具体代码如下:
     
     
      <nav id="nav-wrap">
      
 <ul id="nav">
      
  <li><a href="#">Button</a></li>
      
  <li><a href="#">Button</a></li>
      
 </ul>
      
</nav>

jQuery具体代码：

通过以下jquery具体代码，会把<div id="menu-icon">添加到<nav id="nav_wrap">中，当点击 #menu-icon 时，菜单就会显示出来：



     
      
       复制具体代码
      具体代码如下:
     
     
      
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script</a>>
      
<script type="text/javascript">
      
$(document).ready(function($){
      
 /* prepend menu icon */
      
 $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>'); 
      
 /* toggle nav */
      
 $("#menu-icon").on("click", function(){
      
  $("#nav").slideToggle();
      
  $(this).toggleClass("active");
      
 });
      
});
      
</script>

通过浏览器查看网页元素可以看到html显示的具体代码如下：



     
      
       复制具体代码
      具体代码如下:
     
     
      
<nav id="nav-wrap">
      
 <div id="menu-icon">Menu</div>
      
 <ul id="nav">
      
  <li><a href="#">Button</a></li>
      
  <li><a href="#">Button</a></li>
      
 </ul>
      
</nav>

CSS具体代码：

在css具体代码中要先把#menu-icon的属性设置为display:none;，然后通过媒体查询media query判断再把#menu-icon改为display:block;，下面是关键的CSS样式具体代码，判断浏览器宽度小于600px时的样式：