Question

我正在创建自适应导航，当浮动左侧菜单被按下时，它将隐藏并可以使用幻灯片切换显示。但我不知道如何在切换中添加隐藏菜单。

HTML

  <nav>

    <ul>
      <li id="m1"><a href="">One</a></li>
      <li id="m2"><a href="">Two</a></li>    
      <li id="m3"><a href="">Thr</a></li> 
      <li id="m4"><a href="">Fou</a></li> 
      <li id="m5"><a href="">Fiv</a></li> 
      <li id="m6"><a href="">Six</a></li> 
      <li id="m7"><a href="">Sev</a></li> 
      <li id="m8"><a href="">Eig</a></li> 
    </ul>  

    <a herf="#" id="menu_btn">more</a>

    <div id="hiddenMenu">
      hidden menu goes here
    </div>


  </nav>

CSS

*{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}
#menu_btn{
  width:50px;
  height:30px;
  background:red;
  display:none;
  color:white;
  text-align:center;
}
#menu_btn:hover{
  cursor:pointer;
}
nav{
  margin:50px;
  display:block;
}
nav ul{
  display:block;
  overflow:auto;
  background:#eee;
}
nav ul li{
  display:inline;
}
nav ul li a{
  font-family:helvetica, sans-serif;
  float:left;
  display:block;
  padding:5px;
  background:#aaa;
  text-decoration:none;
  margin:0 5px 0 0;
  color:red;
}

  #hiddenMenu{
    display:none;
  }    

@media only screen and (max-width:500px){
  #menu_btn{
    display:block;
  }
  ul #m8{
    display:none;
  }
}

@media only screen and (max-width:450px){
  ul #m7{
    display:none;
  }
}    

@media only screen and (max-width:400px){
  ul #m6{
    display:none;
  }
}  

@media only screen and (max-width:350px){
  ul #m5{
    display:none;
  }
}  

@media only screen and (max-width:300px){
  ul #m4{
    display:none;
  }
}      

@media only screen and (max-width:250px){
  ul #m3{
    display:none;
  }
}

的jQuery

$('#menu_btn').click(function(){
    $('#hiddenMenu').slideToggle('slow', function() {
    });
})

带幻灯片切换的响应式菜单

0 个答案: