Question

我正在尝试使用mmenu的iconbar属性（此处：http://mmenu.frebsite.nl/documentation/extensions/iconbar.html）

然而它无法正常工作。运行代码后，我按预期打开菜单。然而，当我关闭菜单时，它首先完全关闭，然后容器稍微向右滑动。我认为这是一种不可见的图标栏，将内容推向了正确的位置。（因为我使用应用程序前面的菜单浮动，所以即使它是可见的也不应该推送任何东西。）

我很感激任何关于原因的想法。如何解决它。

以下是我得到的内容：http://jsfiddle.net/ozgen92/eqbaf88q/

应该发生什么：http://mmenu.frebsite.nl/examples.html （在底部切换“iconbar”选项，扩展部分）

这是我的代码：

<!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，示例部分）

Answer 1

问题：

由于某些原因并且因为我真的不知道这个插件是如何工作的，它实际上会为您的容器创建一个父div .mm-slideout（我们感兴趣的那个），已将transform设置为none。

但是，当您点击隐藏菜单时，此transform属性更改为translate3d(60px, 0, 0);，基本上将您的容器从左侧翻译为 60px （你在说什么）。

解决方案：

为了避免这种影响你不这样做，因为就像我说我不知道如何配置它，最简单的方式就是避免这个translate：

.mm-slideout {
    transform: none !important;
}

http://jsfiddle.net/RedBreast/eqbaf88q/5/

!important实际，因为它将充当覆盖，为此提供优先级。

可能有一种方法可以避免这个 class / div 使用插件属性这样做，但就像我说我不知道它，这是最快捷，最简单的方法即使在优化方面，我也会更好地删除该课程。

希望这有用'。

mmenu iconbar属性无法正常工作

1 个答案: