Skip to content

Stop closing menu on clicking menu area expect link #23

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

Open
mlbd wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Stop closing menu on clicking menu area expect link #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ace8ac
Remove unnecessary strings
Apr 22, 2013
7e6ebb2
v1.1 add closeOnClickOutside parameter
Apr 25, 2013
92e8e8b
gh-pages updated to 1.1.1 too
Jun 27, 2013
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
4 changes: 2 additions & 2 deletions css/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ body, html { font-size: 100%; padding: 0; margin: 0;}

body {
font-family: Calibri, Arial, sans-serif;
color: #47a3da;
color: #666;

}

Expand Down Expand Up @@ -110,7 +110,7 @@ a:hover {

.main > section h2 {
font-weight: 300;
color: #ccc;
color: #47a3da;
}

.main > section button {
Expand Down
12 changes: 8 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,13 @@ <h2>jPushMenu Demo</h2>
<button class="toggle-menu menu-top">Toggle Top Menu</button>
<button class="toggle-menu menu-bottom">Toggle Bottom Menu</button>


</section>
<section>
<h2>Changelog</h2>
<ul>
<li>1.1.1 : Add <code>return false;</code> on button/link.</li>
<li>1.1 : Add <code>closeOnClickOutside</code> parameter.</li>
<li>1.0 : Initial release</li>
</ul>

<h2>How to use?</h2>
<h3>Include required style</h3>
<textarea class="code">
Expand Down Expand Up @@ -134,7 +138,7 @@ <h3>Make button or link</h3>
</textarea>

<h3>Make menu element</h3>
<p>Element IDs should be anything, but must be match with data-target attribute on the button above.</p>

<textarea class="code">
<!-- Left menu element-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
Expand Down
26 changes: 20 additions & 6 deletions js/jPushMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* jPushMenu.js
* 1.0
* 1.1.1
* @author: takien
* http://takien.com
* Original version (pure JS) is created by Mary Lou http://tympanus.net/
Expand All @@ -19,8 +19,7 @@
var target = '',
push_direction = '';

//$(this).removeClass('jPushMenuBtn');


if($(this).is('.'+o.showLeftClass)) {
target = '.cbp-spmenu-left';
push_direction = 'toright';
Expand All @@ -45,11 +44,25 @@
}

/* disable all other button*/
//$('.jPushMenuBtn.disabled').removeClass('disabled');
$('.jPushMenuBtn').not($(this)).toggleClass('disabled');


return false;
});
var jPushMenu = {
close: function (o) {
$('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
}
}

if(o.closeOnClickOutside) {
$(document).click(function() {
jPushMenu.close();
});

$('.cbp-spmenu,.toggle-menu').click(function(e){
e.stopPropagation();
});
}
};

/* in case you want to customize class name,
Expand All @@ -63,6 +76,7 @@
showTopClass : 'menu-top',
showBottomClass : 'menu-bottom',
menuOpenClass : 'cbp-spmenu-open',
pushBodyClass : 'push-body'
pushBodyClass : 'push-body',
closeOnClickOutside: true
};
})(jQuery);