I am currently experimenting with the iconbar property of mmenu (here: )
Unfortunately, I am encountering an issue. The menu opens as expected when I run the code. However, upon closing the menu, it first closes completely and then the container slides slightly to the right. It seems like there is some invisible iconbar that is pushing the content to the right. (it should not push anything even if it was visible since I intend to use the menu in front of the application, floating.)
I would greatly appreciate any insights into what might be causing this and how to resolve it.
Here is the current output: http://jsfiddle.net/ozgen92/eqbaf88q/
Desired behavior: (toggle "iconbar" option at the bottom, extensions section)
Below is the code snippet:
<!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>
The intended image outcome can be viewed here: (captured from mmenu, examples section) https://i.sstatic.net/8RuTN.png