防止菜單高度發生變化？

所以我有這個菜單。正如你所看到的，當我點擊菜單按鈕時，菜單高度會改變。我只是想讓菜單滑出來。（包括Bootstrap和jQuery）是可以在CSS中修復的東西，還是必須更改我的腳本？

的JavaScript：

var main = function(){ 
    var menuwidth = $(".menu").width(); 
    $(".menu").width(0).hide(); 
    $("#menubar").click(function(){ 
     $(".menu").show(); 
     if($(".menu").width() === 0){ 
      $(".menu").animate({ 
       width: menuwidth 
      }, menuwidth*10); 
     $(".menu").show(); 
     }else{ 
     $(".menu").animate({ 
      width: 0 
      }, menuwidth*10, function(){$(".menu").hide();}); 
     } 
    }); 
}; 

$(document).ready(main);

HTML：

<div class="nav"> 
    <center><i class="glyphicon glyphicon-align-justify" id="menubar"></i> 
    <div class="menu"> 
     <button type="button" class="btn btn-success">iFone</button> 
     <button type="button" class="btn btn-success">iFatch</button> 
     <button type="button" class="btn btn-success">FOS 9</button> 
    </div> 
    </center> 
</div>

CSS：

.nav{ 
    background-color: #494949; 
    left: 0; 
    top: 0; 
    width: 100%; 
    position: fixed; 
    text-align:center; 
} 

#menubar{ 
    color:white; 
    font-size: 2em; 
} 

.menubutton{ 
    font-size: 50; 
} 
.menu{ 
    display:inline; 
}

來源

2014-10-08 user3042719

什麼是特定的jquery或bootstrap導航欄庫？ – Wold 2014-10-08 03:28:55

你問如何動畫滑動的菜單？ JQuery可以在.animate（）中做到這一點，你只是沒有指定它需要採取的時間...（http://api.jquery.com/animate/） – 2014-10-08 03:34:21

我不會解決你的問題，但中心標記是在HTML 4中進行了分解：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/center – 2014-10-08 03:43:23

你有沒有考慮到高度改變。基本上，當你減少寬度時，高度會增加以適應內容。

設置菜單的高度與overflow:hidden隱藏多餘的內容

.menu 
{ 
    display:inline-block; 
    height:100px; /*Change this to what fits best*/ 
    overflow:hidden; 
}

或者使用white-space:nowrap;從下降到下一行

.menu 
{ 
    display:inline-block; 
    white-space:nowrap; 
    overflow:hidden; 
}

來源

2014-10-08 03:47:23

謝謝！替代方法奏效！ – user3042719 2014-10-08 13:17:18

與@喬恩P答案合作停止的按鈕，你可以刪除中心html標籤，並添加邊距加自動

.menu 
{ 
... 
margin-left: auto; 
margin-right: auto; 
}

來源

2014-10-08 03:53:35 Heroselohim

防止菜單高度發生變化？

回答

相關問題