Запретить изменение высоты меню?

Question

У меня есть это меню. Как вы можете видеть, при нажатии кнопки меню изменяется высота меню. Мне просто понравилось бы, чтобы меню выскользнуло. (Включает 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; 
} 

Answer 1

вы изменяете с без учета высоты. В основном При уменьшении ширины высота увеличивается, чтобы разместить контент.

Установить высоту меню с 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; 
} 

Answer 2

сотрудничающей с P @ Джон ответ вы может удалить центральную метку html, добавив поля с авто

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