CSS3 media queries + jQuery实现响应式导航

目的:

实现一个响应式导航,当屏幕宽度大于700px时,效果如下:

当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:

思路:

1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。

   所以我选择了将导航绝对定位。

2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现。或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧,小于时隐藏。

问题:

开始的时候,我选择了默认他出现,然后出现了一个问题——只要按过了按钮,屏幕放大之后导航列表就再也不会出现了。

代码如下:

CSS Code
复制内容到剪贴板
  1. “nav-box”
    >   

  2.         
      “nav”
      >   

  3.           
  4. “javascript:void(0);” class=“toHome active”>Home
  5.   

  6.           
  7. “javascript:void(0);” class=“toPort”>Portfolio
  8.   

  9.           
  10. “javascript:void(0);” class=“toCont”>Contact
  11.   

  12.            
  13.         “javascript:void(0);” class=“nav-btn”>…   

  

  • .nav-box {   
  •     positionrelative;   
  • }   
  • .nav-btn {   
  •     displaynone;   
  •     color#DE6B73;   
  •     floatrightright;   
  •     line-height20px;   
  •     margin35px 0;   
  • }   
  • .nav {   
  •     displayblock ;   
  •     border-topnone;   
  •     positionabsolute;   
  •     rightright: 0;   
  • }   
  • @media(max-width:700px){   
  •     .nav-btn{   
  •         displayinlineblock;   
  •     }   
  • }   
  • @media(max-width:700px){   
  •   .nav {   
  •     displaynone;   
  •     top80px;   
  •     background-color#F79C9C;   
  •     border-top1px solid #FFF;   
  •     line-height60px;   
  •   }      
  • }   
  • window.onload=function(){   
  •     $(“.nav-btn”).click(function(){   
  •         $(“.nav”).slideToggle(500);   
  •     });   
  • }