Skip to content

Added override property for $trigger; added onNavOpened() and onNavClosed() callbacks #33

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
sroberson wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Added override property for $trigger; added onNavOpened() and onNavClosed() callbacks #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e3b36be
added ability to specify an alternate trigger; added onNavOpen & onNa…
sroberson Nov 24, 2015
5cbf94d
updated Readme
sroberson Nov 24, 2015
42e8449
tweaked README
sroberson Nov 24, 2015
b890b8c
added example code
sroberson Nov 24, 2015
7c59b45
tweak
sroberson Nov 24, 2015
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
28 changes: 28 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,34 @@
ResponsiveMultiLevelMenu
=========

This is a forked version of this library.

I changed it to allow for an alternate $trigger (jQuery collection).

I also added onNavOpened() and onNavClosed() callbacks to allow for running code after these events occur.

index2.html contains this new use case:

<script>
$(function() {
var $trigger = $(".alt.dl-trigger");
$( '#dl-menu' ).dlmenu({
animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' },
triggerEl: $trigger,
onNavOpened: function(){
$(".status").text("nav-open");
},
onNavClosed: function(){
$(".status").text("nav-closed");
}
});
});
</script>


Orig README::
========

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

[article on Codrops](http://tympanus.net/codrops/?p=14753)
Expand Down
22 changes: 16 additions & 6 deletions index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,35 @@
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Multi-Level Menu - Demo 2</title>
<meta name="description" content="Responsive Multi-Level Menu: Space-saving drop-down menu with subtle effects" />
<meta name="keywords" content="multi-level menu, mobile menu, responsive, space-saving, drop-down menu, css, jquery" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container demo-2">
<div class="container demo-2">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/AppShowcase/"><strong>&laquo; Previous Demo: </strong>App Showcase</a>
<span class="right"><a href="http://tympanus.net/codrops/?p=14753"><strong>Back to the Codrops Article</strong></a></span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Responsive Multi-Level Menu <span>Space-saving drop-down menu with subtle effects</span></h1>
<h1>Responsive Multi-Level Menu <span>Space-saving drop-down menu with subtle effects</span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
</nav>
<button class="alt dl-trigger">Open Menu </button>
<h4 class="status"></h4>
</header>
<div class="main clearfix">
<div class="column">
Expand Down Expand Up @@ -143,8 +145,16 @@ <h1>Responsive Multi-Level Menu <span>Space-saving drop-down menu with subtle ef
<script src="js/jquery.dlmenu.js"></script>
<script>
$(function() {
var $trigger = $(".alt.dl-trigger");
$( '#dl-menu' ).dlmenu({
animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' },
triggerEl: $trigger,
onNavOpened: function(){
$(".status").text("nav-open");
},
onNavClosed: function(){
$(".status").text("nav-closed");
}
});
});
</script>
Expand Down
13 changes: 9 additions & 4 deletions js/jquery.dlmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,21 @@
animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
// callback: click a link that has a sub menu
// el is the link element (li); name is the level name
onLevelClick : function( el, name ) { return false; },
onLevelClick : function( el, name ) {return false; },
// callback: click a link that does not have a sub menu
// el is the link element (li); ev is the event obj
onLinkClick : function( el, ev ) { return false; },
onLinkClick : function( el, ev ) {return false; },
onNavOpened : function() {return false; },
onNavClosed : function() {return false; },
backLabel: 'Back',
// Change to "true" to use the active item as back link label.
useActiveItemAsBackLabel: false,
// Change to "true" to add a navigable link to the active item to its child
// menu.
useActiveItemAsLink: false,
// On close reset the menu to root
resetOnClose: true
resetOnClose: true,
triggerEl: ""
};

$.DLMenu.prototype = {
Expand Down Expand Up @@ -74,7 +77,7 @@
},
_config : function() {
this.open = false;
this.$trigger = this.$el.children( '.dl-trigger' );
this.$trigger = this.options.triggerEl || this.$el.children( '.dl-trigger' );
this.$menu = this.$el.children( 'ul.dl-menu' );
this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">' + this.options.backLabel + '</a></li>' );
Expand Down Expand Up @@ -221,6 +224,7 @@
}

this.open = false;
self.options.onNavClosed();
},
openMenu : function() {
if( !this.open ) {
Expand All @@ -238,6 +242,7 @@
} );
this.$trigger.addClass( 'dl-active' );
this.open = true;
self.options.onNavOpened();
},
// resets the menu to its original state (first level of options)
_resetMenu : function() {
Expand Down