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:
Good version / bad version
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">
Index
</div>
</div>
<!-- The menu -->
<nav id="menu">
<ul id="panel">
</nav>
</nav>
</body>
</html>
menu.html
<ul>
<li>Home</li>
<li><span>Room</span>
<ul>
<li>Room11</li>
<li>Room12</li>
</ul>
</li>
<li><span>Room2</span>
<ul>
<li>Room21</li>
<li>Room22</li>
</ul>
</li>
<li>Update data</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 ?
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>Home12</li>\
<li>About us</li>\
<li>Contact</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>Home12</li>\
<li><a id="about2" href="#about">About us</a><ul><li>About us</li></ul></li>\
<li>Contact</li>');
This github thread may help...
At the bottom of the thread the user FrDH provides an example that may help you.
Link: https://github.com/FrDH/jQuery.mmenu/issues/57
Related
All,
I am trying to set up a website menu using this Jqueryscript.net template.
The instructions accompanying the template tell me to activate the script with
$(function() {
$('#menu').cookcodesmenu();
});
Later, there are customization options to link to my logo:
$('#menu').cookcodesmenu({
display: 1920, // From where mobile menu apears and desktop menu gone
brand: 'LOGO', // Supports HTML
label: 'MENU', // <a href='https://www.jqueryscript.net/menu/'>Menu</a> Label: // Supports HTML
});
I can't figure out how to follow these instructions. I have tried things like
script>
$(function() {
$('#menu').cookcodesmenu({
logo: '<a href="/images/BodyLogo.jpg"</a>'
});
});
</script>
with no luck.
Frankly, I would much prefer to simply activate the menu while omitting the logo and coding in my site logo via html. But if that's not an option, I'd like to know not only how to call it from within this menu code, but also give directions within the script for the size of the logo. (as you would in html, width="25%," etc.)
Thanks in advance for any suggestions.
Added later:
Per your request, here's the html, but I don't think that's the problem, as I'll explain in a second.
<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="UTF-8">
<title>(website)/title>
<!--Menu-->
<link rel="stylesheet" href="Styles.css">
<link href="Menu/CSS/MenuStyles.css" media="screen" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="Menu/CSS/Menu.css">
<script src="Menu/JS/modernizr.min.js"></script>
<script src="Menu/JS/jquery-1.12.4.min.js"></script>
<script src="Menu/JS/jquery.cookcodesmenu.js"></script>
<!--Menu-->
<!--Floatbox-->
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
<!--Floatbox-->
<div id="logo"><img src="images/BodyLogo.jpg" width="25%" height="auto"
alt="Logo"></div>
</head>
<body>
<script>
$(function() {
$('#menu').cookcodesmenu({
//brand: 'jQueryScript'//
});
});
</script>
<ul id="menu">
<li>Parent 1
<ul>
<li>
item 3
</li>
<li>
Parent 3
<ul>
<li>
item 8
</li>
<li>
item 9
</li>
<li>
item 10
</li>
</ul>
</li>
<li>
item 4
</li>
</ul>
</li>
<li>
item 1
</li>
<li>Parent 2
<ul>
<li>
item 5
</li>
<li>
item 6
</li>
<li>
item 7
</li>
</ul>
</li>
</ul>
</body>
Maybe I'm wrong, but I don't think that's the source of the problem. I think the problem lies with a piece of associated jquery I found:
(function ($, document, window) {
var
// default settings object.
defaults = {
display: 1920, // From where mobile menu apears and desktop menu gone
//brand: '<a href="#"</a>', // Supports HTML//
label: 'MENU', // Menu Label: // Supports HTML
duplicate: true,
duration: 200,
easingOpen: 'swing',
//fontFamily: 'Open Sans',//
easingClose: 'swing',
closedSymbol: "➕", //Supports HTML
openedSymbol: "➖", //Supports HTML
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: true,
allowParentLinks: true,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
afterOpen: function () {},
afterClose: function () {}
},
Origninally, I'd put a blank .html in the brand spot, but it was still taking up space in the html, shoving my logo out of position. As you see, I've tried to turn off "brand." Now, where the brand label is supposed to go, it says "undefined," and my own logo is still shoved down below that. Hardly what I want.
It baffles me that a person writing a menu template would take it upon himself to dictate where the site logo must go, but that appears to be what he's done. Is there any way to work with this thing, or should I just try some other menu?
Seems your anchor tag is not visible as logo because there is nothing
in side anchor tag.please try the below code push something in the
anchor tag.
<img src="yourpath/image.png">
Please use something like this and try it.
$(function() {
$('#menu').cookcodesmenu({
brand: '<img src="yourpath/image.png">'
});
});
I think you use the wrong key, according to the documentation you have to use brand not logo to define your logo :
<script>
$(function() {
$('#menu').cookcodesmenu({
brand: ''
});
});
</script>
Could someone please explain to me how to change this internal js to external. If there is something in the file that is isn't show it is another document but I do need all the ID's and Class's that are mentioned
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $pageTitle; ?></title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<!-- CSS link -->
<link href="Content/css/tlm-styles.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1><img src="Content/images/coloured-logo.svg" alt="TLM logo">TLM Project Management</h1>
<nav id="top-nav">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
<main>
<nav id="sidebar">
<ul>
<li>Home
<li>Add Projects</li>
<li>All Projects</li>
<li>All Users</li>
</ul>
</nav>
<section class="content">
</section>
</main>
<footer>
<section id="copy">
<p>© 2016 | TLM Content Management System | Tara McNeil</p>
</section>
</footer>
<!-- JavaScript -->
<script src="Scripts/tlm-scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
Not sure this is what you want but I would replace the contents of your script tag with this function call in your HTML
<script>
initToggle();
</script>
Then on your tlm-scripts.js file, I would define the function, something like this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
});
Lastly, include your custom JS file after your Jquery files
UPDATE
If you do not want JS on your HTML page, then change the function declaration to this:
$(document).ready(function(){
/// here goes your existing code on that file
/// if they are related to jquery
//...
//...
// define function that does the toggle
var initToggle = function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
};
// invoke function here, not in the HTML
initToggle();
});
I read another person's question asking how to make mmenu slide in from the right side of the screen instead of the left. They responded saying that they got it to work by doing the following, but it does not work in my instance - it still moves in from the left side of the screen, not the right like I want.
The mmenu related files are the latest from http://mmenu.frebsite.nl/, so I do not believe it's a version issue.
<!DOCTYPE html>
<html>
<head>
<title>mmenu test</title>
<script src="jquery-2.1.4.min.js"></script>
<link type="text/css" href="jquery.mmenu.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script>
$(document).ready(function() {
var API = $("#menu").mmenu({
dragOpen: true,
position:'right',
direction:'right'
}).data( "mmenu" );
$("#menu-button").click(function() {
API.open();
});
});
</script>
</head>
<body>
<div>
This is some body content
</div>
<button id="menu-button">open/close</button>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
</ul>
</nav>
</body>
</html>
From this page of the plugin documentation, you need to include the "positioning" extension. I guess it is already included in your case, because you call the all.js and all.css files.
Then, use the following code :
$("#menu").mmenu({
offCanvas: {
position: "right"
}
});
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.mmenu.js"></script>
<link href="path/to/jquery.mmenu.css" rel="stylesheet" />
<link href="path/to/jquery.mmenu.positioning.css" rel="stylesheet" />
<script>
$(document).ready(function() {
$("#my-menu").mmenu({
extensions: ["position-right"]
});
});
</script>
I am trying to make use of the iconbar property of mmenu (here: http://mmenu.frebsite.nl/documentation/extensions/iconbar.html)
However it is not working properly. I get the menu open as expected once I run the code. Yet when I close the menu, it is first closed completely, then the container slides slightly to right. I think that is some sort of an invisible iconbar pushing the content to the right.
(it shouldn't push anything even if it was visible since I use the menu in front of the application, floating.)
I would appreciate any ideas about the cause & how to fix it.
Here is what I get: http://jsfiddle.net/ozgen92/eqbaf88q/
What should have been happened: http://mmenu.frebsite.nl/examples.html
(toggle "iconbar" option at the bottom, extensions section)
Here is my code:
<!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><i class="fa fa-home"></i>Menu1
<input type="radio" class="Toggle" checked />
</li>
<li>Menu2
<input type="radio" class="Toggle" checked />
</li>
<li>Menu3
<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>
Here is the final image that was suppose to happen: (taken from mmenu, examples section)
The issue:
For some reasons and because I don't really know how this plugin works, it actually creates a parent div to your container with the .mm-slideout (the one we are interested in), with the property transform set as none.
But when you click to hide the menu, this transform property change to translate3d(60px, 0, 0); which basically translate your container to 60px from the left (what you was talking about).
The solution:
To avoid this effect you don't and because like I said I don't how to configure this, the simplest way would be to just avoid this translate with:
.mm-slideout {
transform: none !important;
}
http://jsfiddle.net/RedBreast/eqbaf88q/5/
The !important actually is because it will act as an override, give this a priority.
There is probably a way to avoid this class/div to act like this with a plugin property, but like I said I don't know it and this is the quickest and simplest way to do this even if in term of optimization, I would be better to remove the class.
Hope this is helpful'.
I'm using jstree on my html page I like to be able to open and close parts of the tree by clicking anywhere on a the row (i.e ie, the small triangle icon, folder icon, and folder name.) rather than having to click the small triangle icon.
Here is a full self contained example to demonstrate the problem.Id like to be able to close the C:\Music folder by clicking on the folder icon or 'C:\Music' is that possible ?
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../style/songkong.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<script type="text/javascript" class="source below">
$(function () {
$("#songchanges")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {})
;
$("#songchanges").bind("open_node.jstree", function (e, data) {
data.inst.select_node("#phtml_1", true);
});
});
</script></head>
<body>
<div id="songchanges"><ul>
<li id="phtml_1">
C:\Music\
<ul>
<li id="phtml_2">
KungFooFighting1.mp3
</li>
<li id="phtml_3">
KungFooFighting2.mp3
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
As you already use "ui" plugin, you could attach event handler to select_node.jstree event. And then use inside handler $(this).jstree('toggle_node', data.rslt.obj[0]); to open and close particular tree node.
Complete code will look like this:
$("#songchanges").bind("select_node.jstree", function (e, data) {
$(this).jstree('toggle_node', data.rslt.obj[0]);
});
jsTree 3.3.1 and IE7
Work for me with keydown
.bind("select_node.jstree", function (e, data) {
var e = jQuery.Event("keydown");
e.which = 39; // to right
$('#myjstree a[id=' + data.node.id + '_anchor]').trigger(e);
...