防止菜单高度发生变化？

所以我有这个菜单。正如你所看到的，当我点击菜单按钮时，菜单高度会改变。我只是想让菜单滑出来。（包括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

防止菜单高度发生变化？

回答

相关问题