gpt4 book ai didi

javascript - mmenu 图标栏属性无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 11:34:13 26 4
gpt4 key购买 nike

我正在尝试使用 mmenu 的图标栏属性(此处:http://mmenu.frebsite.nl/documentation/extensions/iconbar.html)

但是它不能正常工作。运行代码后,我会按预期打开菜单。然而,当我关闭菜单时,它首先完全关闭,然后容器稍微向右滑动。我认为这是某种将内容推向右侧的隐形图标栏。(它不应该推送任何东西,即使它是可见的,因为我使用应用程序前面的菜单, float 。)

我将不胜感激有关原因和解决方法的任何想法。

这是我得到的: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,示例部分) enter image description here

最佳答案

问题:

出于某些原因,因为我真的不知道这个插件是如何工作的,它实际上使用 .mm-slideout (我们感兴趣的一个),属性 transform 设置为 none

class .mm-slideout before

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

class .mm-slideout after

解决方案:

要避免这种影响,你不需要,因为就像我说的,我不知道如何配置它,最简单的方法就是避免这种translate :

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

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

!important 实际上 因为它将充当覆盖,给它一个优先级

可能有一种方法可以避免这个 class/div 像这样使用插件属性,但就像我说的那样我不知道,这是最快和最简单的方法即使在优化方面,我也最好删除该类。

希望这对您有所帮助'。

关于javascript - mmenu 图标栏属性无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31858605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com