Dynamic page adding method with css
Question
I am currently developing a dynamic menu using jQuery.mmenu plugin.
The definition (nav + ul) of my menu is static and written into the index.html
The submenu is an external html page that I open in the jQuery(document).ready part, and added with append function.
My problem is located on the form:
On the left, you can see a standard and static implementation,
With my solution, CSS seems to don't apply.
My code:
index.html :
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var $menu = $("#menu").mmenu({
"extensions": [
"pageshadow"
],
"counters": true,
"navbar": {
"title": "Ressource List"
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
},
{
"position": "top",
"content": [
"prev",
"title",
"close"
]
}
],
"sectionIndexer": true
});
var api = $("#menu").data( "mmenu" );
api.bind( "init", function() {
$.ajax({
// options to retrieve the submenu
url:"include/menu.html",
type : 'GET',
dataType : 'html'
}).success(function(data) {
var $ul = $menu.find( "#panel" );
$ul.append(data);
$("body").addClass("body");
});
});
api.init( $("#panel") );
});
</script>
</head>
<body>
<!-- The page -->
<div class="page">
<div class="header">
<a href="#menu"></a>
Index
</div>
</div>
<!-- The menu -->
<nav id="menu">
<ul id="panel">
</nav>
</nav>
</body>
</html>
menu.html
<ul>
<li><a href="">Home</a></li>
<li><span>Room</span>
<ul>
<li><a href="">Room11</a></li>
<li><a href="">Room12</a></li>
</ul>
</li>
<li><span>Room2</span>
<ul>
<li><a href="">Room21</a></li>
<li><a href="">Room22</a></li>
</ul>
</li>
<li><a href="">Update data</a></li>
</ul>
To simplify the problem, I've used the basic example included in the package: http://mmenu.frebsite.nl/download.html
Could you please help me ?
1 answers
solution1
0 ACCPTED 2016-01-06 21:53:08
Not sure if this is affecting anything but...
Your ul tag is missing a closing tag.
Also... in your success callback you have the code:
var $ul = $menu.find( "#panel" );
$ul.append(data);
If you are trying to get the first list in the panel. It should be:
var $ul = $menu.find( "#panel>ul" );
$ul.append(data);
jQuery.mmenu plugin appears to rearrange the markup.
Works for 1 level:
var $menu = $('nav#menu').mmenu();
var api = $('nav#menu').data('mmenu');
$('#btnAdd').click(function () {
var $ul = $menu.find('#test>ul');
$ul.append('<li><a href="#">Home12</a></li>\
<li><a href="#about">About us</a></li>\
<li><a href="#contact">Contact</a></li>');
});
<button id="btnAdd">Add</button>
<nav id="menu">
<ul id="test"></ul>
</nav>
This only works for one level. If I try to add a nested list item it doesn't appear to work.
Doesn't work for nested levels:
$ul.append('<li><a href="#">Home12</a></li>\
<li><a id="about2" href="#about">About us</a><ul><li><a href="#about">About us</a></li></ul></li>\
<li><a href="#contact">Contact</a></li>');
This github thread may help...
At the bottom of the thread the user provides an example that may help you. 提供了一个可以帮助您的示例。
Link: https://github.com/FrDH/jQuery.mmenu/issues/57
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.