mmenu 图标栏属性无法正常工作答案

【问题标题】：mmenu iconbar property is not working properlymmenu 图标栏属性无法正常工作
【发布时间】：2015-08-06 14:34:58
【问题描述】：

我正在尝试使用 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，示例部分）

【问题讨论】：

仅仅通过链接html 和内联JS 很难提供帮助。您能否尝试提供您的错误的“实时”示例，或者至少提供一些可以玩的东西？
抱歉，我刚刚添加了一个显示我得到的东西的小提琴，以及一个指向我所期望的页面的链接。

标签： javascript jquery html css mmenu

【解决方案1】：

问题：

由于某些原因，因为我真的不知道这个插件是如何工作的，它实际上使用.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 像这样使用插件属性，但就像我说的我不知道，这是最快和最简单的方法即使在优化方面，我也最好删除该类。

希望这会有所帮助'。

【讨论】：

非常感谢，这解释了我提到的滑动。我检查了它，它实际上存在于一个 mmenu 库中。 (jquery.mmenu.iconbar.css) 但是它仍然不会像它应该有的那样表现。我添加了一张图片，显示了 mmenu 对代码的作用。
我没有得到您真正想要的东西，但我也无法为您学习 API。提供任何错误来帮助您，尝试使用选项，阅读他们的文档......等等。你不能只是过来说“我不想这样工作”。
我当然不希望你学习 API。我提供的链接有代码，它应该以特定的方式运行，这就是为什么你的解决方案不能完全解决我的问题。我不是要你让它工作，只是在寻找建议。虽然它没有解决问题，但感谢您的帮助，真的:)