mmenu属性不能正常工作
我正在尝试使用mmenu的iconbar属性(此处：http://mmenu.frebsite.nl/documentation/extensions/iconbar.html)
然而，它不能正常工作。一旦我运行了代码，我就会像预期的那样打开菜单。然而，当我关闭菜单时，它首先是完全关闭的，然后容器稍微向右滑动。我认为这是某种看不见的图标，将内容向右推。(它不应该推送任何东西，即使它是可见的，因为我使用了应用程序前面的菜单浮动。)
如果有任何关于原因和如何修复的想法，我将非常感激。
下面是我得到的：http://jsfiddle.net/ozgen92/eqbaf88q/
本应发生的事情:图标(切换底部的“http://mmenu.frebsite.nl/examples.html”选项，扩展部分)
下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"><!--symbols-->
<!-- JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mmenu -->
<!-- CSS -->
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
<link href="Libs/jQuery.mmenu-5.3.4/dist/css/extensions/jquery.mmenu.iconbar.css" type="text/css" rel="stylesheet" />
<!-- JS -->
<script src="Libs/jQuery.mmenu-5.3.4/dist/js/jquery.mmenu.min.all.js" type="text/javascript"></script>
<!-- JQuery -->
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#menu").mmenu({
"extensions": [
"effect-zoom-panels",
"iconbar",
"theme-dark"
],
"offCanvas":{
"zposition": "front"
},
"searchfield": {
"placeholder": "Search",
"noResults": "No results found.",
"add": true
},
"navbar": {
"title": "Main Search"
},
"navbars": [
{
"position": "top"
}
],
"sectionIndexer": true
}, {/* configuration */});
var API = $("#menu").data( "mmenu" );
API.open();
});
</script>
</head>
<body>
<div><!--Wrapper-->
<!--MMENU-->
<div><nav id="menu">
<ul>
<li><a href="/"><i class="fa fa-home"></i>Menu1</a>
<input type="radio" class="Toggle" checked />
</li>
<li><a href="/">Menu2</a>
<input type="radio" class="Toggle" checked />
</li>
<li><a href="/">Menu3</a>
<input type="radio" class="Toggle" checked />
</li>
</ul>
</nav></div>
<div class="container">
<h3>Container Example</h3>
<p>Yes I am a container</p>
</div>
</div><!--wrapper end-->
</body>
</html>这是应该发生的最终图像：(取自mmenu，examples部分)
回答 1
Stack Overflow用户
发布于 2015-08-07 16:52:43
问题：
由于某些原因，也因为我不知道这个插件是如何工作的，它实际上创建了一个带有.mm-slideout的容器的父div (我们感兴趣的那个)，并将属性transform设置为none。
但是当你点击隐藏菜单时，这个transform属性变成了translate3d(60px, 0, 0);，它基本上将你的容器从左边移到60px (这就是你所说的)。
解决方案：
为了避免这种效果，就像我说过的，我不知道如何配置它，最简单的方法就是用以下命令来避免这个translate：
.mm-slideout {
transform: none !important;
}http://jsfiddle.net/RedBreast/eqbaf88q/5/
!important实际上是因为它将作为一个重写，给它一个优先级。
可能有一种方法可以避免这个class/div像这样使用插件属性，但就像我说的，我不知道它，这是最快最简单的方法，即使在优化方面，我最好删除这个类。
希望这能对你有所帮助。
https://stackoverflow.com/questions/31858605
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号