Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding the parent click-to-expend feature, and allow HTML insid… #83

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: adding the parent click-to-expend feature, and allow HTML insid… #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@ meanExpandableChildren: true

meanExpand: "+"

- single character you want to represent the expand for ULs
- single character you want to represent the expand for ULs. Can also be html icon, eg: '<i class="fas fa-angle-down"></i>'

meanContract: "-"

- single character you want to represent the contract for ULs
- single character you want to represent the contract for ULs. Can also be html icon, eg: '<i class="fas fa-angle-up"></i>'

meanRemoveAttrs: false
- true to remove classes and IDs, false to keep them
Expand All @@ -106,3 +106,9 @@ removeElements: ""
meanDisplay: "block"

- by default this is block, sometimes you may want to switch this to table or table-cell or inline-block etc. so now you can.

parentClickExpands: true

- by default this is true, it allows sub-menu expansion by clicking the whole parent link instead of right-autogenerated button only.

![](parent_expands.gif)
96 changes: 51 additions & 45 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MeanMenu Demo</title>
<style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MeanMenu Demo</title>
<style>
/* Basic CSS */
html {
-webkit-text-size-adjust: none;
Expand Down Expand Up @@ -67,65 +67,71 @@
padding: 3em 2%;
}
</style>
<link rel="stylesheet" href="meanmenu.css" media="all" />

<link rel="stylesheet" href="meanmenu.css" media="all" />

<!--[if lt IE 9]>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1">
</head>

<body>
<body>

<header>
<nav>
<ul>
<li><a href="#">Top Level Link</a>
<header>
<nav>
<ul>
<li><a href="#">Second Level Link</a>
<li><a href="#">Top Level Link</a>
<ul>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a>
<li><a href="#">Second Level Link</a>
<ul>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a>
<ul>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
<ul>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul>
</li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>
</nav>
</header>

<section>
<article>
<h1>Resize your browser to under 480 pixels</h1>
<h2><a href="http://www.meanthemes.com/our-themes/">Check out our WordPress &amp; Ghost Themes</a></h2>
</article>
</section>
<section>
<article>
<h1>Resize your browser to under 480 pixels</h1>
<h2><a href="http://www.meanthemes.com/our-themes/">Check out our WordPress
&amp; Ghost Themes</a></h2>
</article>
</section>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
jQuery('header nav').meanmenu({
meanExpand: '<i class="fas fa-angle-down"></i>',
meanContract: '<i class="fas fa-angle-up"></i>',
});
});
</script>
</body>
</body>
</html>
29 changes: 22 additions & 7 deletions jquery.meanmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them
onePage: false, // set to true for one page sites
meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell
removeElements: "" // set to hide page elements
removeElements: "", // set to hide page elements
parentClickExpands: true // set true to expand on the menu link directly
};
options = $.extend(defaults, options);

Expand All @@ -72,8 +73,9 @@
var onePage = options.onePage;
var meanDisplay = options.meanDisplay;
var removeElements = options.removeElements;
var parentClickExpands = options.parentClickExpands;

//detect known mobile/tablet usage
// detect known mobile/tablet usage
var isMobile = false;
if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) {
isMobile = true;
Expand Down Expand Up @@ -183,17 +185,30 @@
// allow expandable sub nav(s)
if(meanExpandableChildren){
jQuery('.mean-nav ul ul').each(function() {
if(jQuery(this).children().length){
jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');
if (jQuery(this).children().length){
let parent = jQuery(this,'li:first').parent();
parent.append('<a class="mean-expand" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');

// allows that parent click trigger the sub-menu expansion
if (parentClickExpands === true) {
parent.children('a').first().addClass('mean-expand-cpy');
}
}
});
jQuery('.mean-expand-cpy').on("click",function(e){
e.preventDefault();

let parent = jQuery(this).parent();
parent.children('.mean-expand').trigger("click");
});
jQuery('.mean-expand').on("click",function(e){
e.preventDefault();
if (jQuery(this).hasClass("mean-clicked")) {
jQuery(this).text(meanExpand);

if (jQuery(this).hasClass("mean-clicked")) {
jQuery(this).html(meanExpand);
jQuery(this).prev('ul').slideUp(300, function(){});
} else {
jQuery(this).text(meanContract);
jQuery(this).html(meanContract);
jQuery(this).prev('ul').slideDown(300, function(){});
}
jQuery(this).toggleClass("mean-clicked");
Expand Down
2 changes: 1 addition & 1 deletion jquery.meanmenu.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added parent_expands.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.