Question

我试图制作非常轻量级（代码式）的响应式菜单。到目前为止，我已经做到了这一点，但我开始认为让jquery对下拉产生跨国影响是一个坏主意，因为它在手机上看起来并不好看，因为帧速率我很高兴。猜猜？下面的演示

我如何用Js和Css过渡做同样的事情？这样做是不是一个好主意？任何帮助都会很棒，谢谢。

Jquery的：

    $( ".menu-icon" ).click(function() {
    $( ".navbar" ).slideToggle( "slow" );
    });

HTML：

 <div id="header-bar">
 <button class="menu-icon">Menu</button>
 </div>

    <div class="navbar">
        <ul class="reponsive-nav">
            <li class="nav-item"><a href="home">Home</a></li>       
            <li class="nav-item"><a href="">Deals</a></li>  
            <li class="nav-item"><a href="">My Survivalist</a></li> 
            <li class="nav-item"><a href="">About</a></li>  
            <li class="nav-item"><a href="">Contact</a></li>    
        </ul>
    </div>
    <p>Content Moves with drop down</p>

的CSS：

#header-bar{
   min-width:200px;
   max-width:100%;
   height:50px;
   background:#29333A;
   display: block;
}

.navbar{
  display:none;
  background:#DDD;

}

ul.reponsive-nav li.nav-item{
   list-style-type:none;
   display:inline;
   float:left;
   margin:0;
   background:#FFF;
   width:100%;  /* Remove this and*/
   border-bottom:1px solid #DDD;/*this for desktop menu */
}

ul.reponsive-nav li.nav-item a{
  display: block;
  color:#333;
  text-align:center;
  font-size:16px;
  padding:9px 15px 6px 15px;
  padding:auto;
  text-decoration:none;
 }

p{
    display: inline-block;
    background:#0CB264;
    width:100%; 
    text-align:center;    
    padding:30px 0;
    margin-top:15px;
 }

jquery显示/隐藏div与css过渡 - 移动响应

0 个答案: