i'm very-very beginner in jquery , javascript. i'm create custom responsive menu 2 navigation on right , left side, first 1 working fine, not other one. script took (http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/) . script (codepen.io/donlego/full/xgjzwr).
html
<body> <div id="dl-menu" class="dl-menuwrapper"><!-- codrops top bar --> <button class="dl-trigger">open menu</button> <ul class="dl-menu"> <li> <a href="#">fashion</a> <ul class="dl-submenu"> <li> <a href="#">men</a> </li> <li> <a href="#">women</a> <ul class="dl-submenu"> <li><a href="#">jackets</a></li> <li><a href="#">knits</a></li> <li><a href="#">jeans</a></li> <li><a href="#">dresses</a></li> <li><a href="#">blouses</a></li> <li><a href="#">t-shirts</a></li> <li><a href="#">underwear</a></li> </ul> </li> <li> <a href="#">children</a> <ul class="dl-submenu"> <li><a href="#">boys</a></li> <li><a href="#">girls</a></li> </ul> </li> </ul> </li> <li> <a href="#">electronics</a> <ul class="dl-submenu"> <li><a href="#">camera & photo</a></li> <li><a href="#">tv & home cinema</a></li> <li><a href="#">phones</a></li> <li><a href="#">pc & video games</a></li> </ul> </li> <li> <a href="#">furniture</a> <ul class="dl-submenu"> <li> <a href="#">living room</a> <ul class="dl-submenu"> <li><a href="#">sofas & loveseats</a></li> <li><a href="#">coffee & accent tables</a></li> <li><a href="#">chairs & recliners</a></li> <li><a href="#">bookshelves</a></li> </ul> </li> <li> <a href="#">bedroom</a> <ul class="dl-submenu"> <li> <a href="#">beds</a> <ul class="dl-submenu"> <li><a href="#">upholstered beds</a></li> <li><a href="#">divans</a></li> <li><a href="#">metal beds</a></li> <li><a href="#">storage beds</a></li> <li><a href="#">wooden beds</a></li> <li><a href="#">children's beds</a></li> </ul> </li> <li><a href="#">bedroom sets</a></li> <li><a href="#">chests & dressers</a></li> </ul> </li> <li><a href="#">home office</a></li> <li><a href="#">dining & bar</a></li> <li><a href="#">patio</a></li> </ul> </li> <li> <a href="#">jewelry & watches</a> <ul class="dl-submenu"> <li><a href="#">fine jewelry</a></li> <li><a href="#">fashion jewelry</a></li> <li><a href="#">watches</a></li> <li> <a href="#">wedding jewelry</a> <ul class="dl-submenu"> <li><a href="#">engagement rings</a></li> <li><a href="#">bridal sets</a></li> <li><a href="#">women's wedding bands</a></li> <li><a href="#">men's wedding bands</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /dl-menuwrapper --> <div class="clearfix"></div> <div id="dl-menu" class="dl-menuwrapper"><!-- codrops top bar --> <button class="dl-trigger">open menu</button> <ul class="dl-menu"> <li> <a href="#">fashion</a> <ul class="dl-submenu"> <li> <a href="#">men</a> <ul class="dl-submenu"> <li><a href="#">shirts</a></li> <li><a href="#">jackets</a></li> <li><a href="#">chinos & trousers</a></li> <li><a href="#">jeans</a></li> <li><a href="#">t-shirts</a></li> <li><a href="#">underwear</a></li> </ul> </li> <li> <a href="#">women</a> <ul class="dl-submenu"> <li><a href="#">jackets</a></li> <li><a href="#">knits</a></li> <li><a href="#">jeans</a></li> <li><a href="#">dresses</a></li> <li><a href="#">blouses</a></li> <li><a href="#">t-shirts</a></li> <li><a href="#">underwear</a></li> </ul> </li> <li> <a href="#">children</a> <ul class="dl-submenu"> <li><a href="#">boys</a></li> <li><a href="#">girls</a></li> </ul> </li> </ul> </li> <li> <a href="#">electronics</a> <ul class="dl-submenu"> <li><a href="#">camera & photo</a></li> <li><a href="#">tv & home cinema</a></li> <li><a href="#">phones</a></li> <li><a href="#">pc & video games</a></li> </ul> </li> <li> <a href="#">furniture</a> <ul class="dl-submenu"> <li> <a href="#">living room</a> <ul class="dl-submenu"> <li><a href="#">sofas & loveseats</a></li> <li><a href="#">coffee & accent tables</a></li> <li><a href="#">chairs & recliners</a></li> <li><a href="#">bookshelves</a></li> </ul> </li> <li> <a href="#">bedroom</a> <ul class="dl-submenu"> <li> <a href="#">beds</a> <ul class="dl-submenu"> <li><a href="#">upholstered beds</a></li> <li><a href="#">divans</a></li> <li><a href="#">metal beds</a></li> <li><a href="#">storage beds</a></li> <li><a href="#">wooden beds</a></li> <li><a href="#">children's beds</a></li> </ul> </li> <li><a href="#">bedroom sets</a></li> <li><a href="#">chests & dressers</a></li> </ul> </li> <li><a href="#">home office</a></li> <li><a href="#">dining & bar</a></li> <li><a href="#">patio</a></li> </ul> </li> <li> <a href="#">jewelry & watches</a> <ul class="dl-submenu"> <li><a href="#">fine jewelry</a></li> <li><a href="#">fashion jewelry</a></li> <li><a href="#">watches</a></li> <li> <a href="#">wedding jewelry</a> <ul class="dl-submenu"> <li><a href="#">engagement rings</a></li> <li><a href="#">bridal sets</a></li> <li><a href="#">women's wedding bands</a></li> <li><a href="#">men's wedding bands</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /dl-menuwrapper --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $( '#dl-menu' ).dlmenu(); }); </script> </body> css
@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot'); src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* common styles of menus */ .dl-menuwrapper { width: 0; max-width: 90%; float: left; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; } .dl-menuwrapper:first-child { margin-right: 0; } .dl-menuwrapper button { background: #395066; border: none; width: 48px; height: 90px; text-indent: -900em; overflow: hidden; position: relative; cursor: pointer; outline: none; -webkit-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05); -moz-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05); box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05); } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: #32475b; } .dl-menuwrapper button:after { content: ''; position: absolute; width: 68%; height: 5px; background: #fff; top: 30px; left: 16%; box-shadow: 0 10px 0 #fff, 0 20px 0 #fff; } .dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: #009ee8; width: 350px; } .dl-menuwrapper li { position: relative; width: 350px; background-color: #395066; } .dl-menuwrapper li { display: block; position: relative; padding: 15px 20px; font-size: 16px; line-height: 20px; font-weight: 300; color: #fff; outline: none; background-color: #395066; } .no-touch .dl-menuwrapper li a:hover { background: rgba(0,0,0,0.2); } .dl-menuwrapper li.dl-back > { padding-left: 30px; background: #163a5b; } .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { position: absolute; top: 0; line-height: 50px; font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; color: #eeeeee; } .dl-menuwrapper li.dl-back:after { left: 10px; color: rgba(212,204,198,0.3); -webkit-transform: rotate(180deg); transform: rotate(180deg); color: #eeeeee; } .dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); } .dl-menuwrapper .dl-menu { /* biyang kerok 2*/ position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translatey(10px); transform: translatey(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dl-menuwrapper .dl-menu.dl-menu-toggle { transition: 0.3s ease; } .dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translatey(0px); transform: translatey(0px); } /* hide inner submenus */ .dl-menuwrapper li .dl-submenu { display: none; } /* when submenu openend, hide li siblings. give class parent menu called "dl-subview". hide submenu link. opened submenu class "dl-subviewopen". done sub-level being entered. */ .dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > { display: none; } .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; } jquery
;( function( $, window, undefined ) { 'use strict'; // global var modernizr = window.modernizr, $body = $( 'body' ); $.dlmenu = function( options, element ) { this.$el = $( element ); this._init( options ); }; // options $.dlmenu.defaults = { // classes animation effects animationclasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' }, // callback: click link has sub menu // el link element (li); name level name onlevelclick : function( el, name ) { return false; }, // callback: click link not have sub menu // el link element (li); ev event obj onlinkclick : function( el, ev ) { return false; } }; $.dlmenu.prototype = { _init : function( options ) { // options this.options = $.extend( true, {}, $.dlmenu.defaults, options ); // cache elements , initialize variables this._config(); var animendeventnames = { 'webkitanimation' : 'webkitanimationend', 'oanimation' : 'oanimationend', 'msanimation' : 'msanimationend', 'animation' : 'animationend' }, transendeventnames = { 'webkittransition' : 'webkittransitionend', 'moztransition' : 'transitionend', 'otransition' : 'otransitionend', 'mstransition' : 'mstransitionend', 'transition' : 'transitionend' }; // animation end event name this.animendeventname = animendeventnames[ modernizr.prefixed( 'animation' ) ] + '.dlmenu'; // transition end event name this.transendeventname = transendeventnames[ modernizr.prefixed( 'transition' ) ] + '.dlmenu', // support css animations , css transitions this.supportanimations = modernizr.cssanimations, this.supporttransitions = modernizr.csstransitions; this._initevents(); }, _config : function() { this.open = false; this.$trigger = 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="#">back</a></li>' ); this.$back = this.$menu.find( 'li.dl-back' ); }, _initevents : function() { var self = this; this.$trigger.on( 'click.dlmenu', function() { if( self.open ) { self._closemenu(); } else { self._openmenu(); } return false; } ); this.$menuitems.on( 'click.dlmenu', function( event ) { event.stoppropagation(); var $item = $(this), $submenu = $item.children( 'ul.dl-submenu' ); if( $submenu.length > 0 ) { var $flyin = $submenu.clone().css( 'opacity', 0 ).insertafter( self.$menu ), onanimationendfn = function() { self.$menu.off( self.animendeventname ).removeclass( self.options.animationclasses.classout ).addclass( 'dl-subview' ); $item.addclass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeclass( 'dl-subviewopen' ).addclass( 'dl-subview' ); $flyin.remove(); }; settimeout( function() { $flyin.addclass( self.options.animationclasses.classin ); self.$menu.addclass( self.options.animationclasses.classout ); if( self.supportanimations ) { self.$menu.on( self.animendeventname, onanimationendfn ); } else { onanimationendfn.call(); } self.options.onlevelclick( $item, $item.children( 'a:first' ).text() ); } ); return false; } else { self.options.onlinkclick( $item, event ); } } ); this.$back.on( 'click.dlmenu', function( event ) { var $this = $( ), $submenu = $this.parents( 'ul.dl-submenu:first' ), $item = $submenu.parent(), $flyin = $submenu.clone().insertafter( self.$menu ); var onanimationendfn = function() { self.$menu.off( self.animendeventname ).removeclass( self.options.animationclasses.classin ); $flyin.remove(); }; settimeout( function() { $flyin.addclass( self.options.animationclasses.classout ); self.$menu.addclass( self.options.animationclasses.classin ); if( self.supportanimations ) { self.$menu.on( self.animendeventname, onanimationendfn ); } else { onanimationendfn.call(); } $item.removeclass( 'dl-subviewopen' ); var $subview = $this.parents( '.dl-subview:first' ); if( $subview.is( 'li' ) ) { $subview.addclass( 'dl-subviewopen' ); } $subview.removeclass( 'dl-subview' ); } ); return false; } ); }, closemenu : function() { if( this.open ) { this._closemenu(); } }, _closemenu : function() { var self = this, ontransitionendfn = function() { self.$menu.off( self.transendeventname ); self._resetmenu(); }; this.$menu.removeclass( 'dl-menuopen' ); this.$menu.addclass( 'dl-menu-toggle' ); this.$trigger.removeclass( 'dl-active' ); if( this.supporttransitions ) { this.$menu.on( this.transendeventname, ontransitionendfn ); } else { ontransitionendfn.call(); } this.open = false; }, openmenu : function() { if( !this.open ) { this._openmenu(); } }, _openmenu : function() { var self = this; // clicking somewhere else makes menu close $body.off( 'click' ).on( 'click.dlmenu', function() { self._closemenu() ; } ); this.$menu.addclass( 'dl-menuopen dl-menu-toggle' ).on( this.transendeventname, function() { $( ).removeclass( 'dl-menu-toggle' ); } ); this.$trigger.addclass( 'dl-active' ); this.open = true; }, // resets menu original state (first level of options) _resetmenu : function() { this.$menu.removeclass( 'dl-subview' ); this.$menuitems.removeclass( 'dl-subview dl-subviewopen' ); } }; var logerror = function( message ) { if ( window.console ) { window.console.error( message ); } }; $.fn.dlmenu = function( options ) { if ( typeof options === 'string' ) { var args = array.prototype.slice.call( arguments, 1 ); this.each(function() { var instance = $.data( this, 'dlmenu' ); if ( !instance ) { logerror( "cannot call methods on dlmenu prior initialization; " + "attempted call method '" + options + "'" ); return; } if ( !$.isfunction( instance[options] ) || options.charat(0) === "_" ) { logerror( "no such method '" + options + "' dlmenu instance" ); return; } instance[ options ].apply( instance, args ); }); } else { this.each(function() { var instance = $.data( this, 'dlmenu' ); if ( instance ) { instance._init(); } else { instance = $.data( this, 'dlmenu', new $.dlmenu( options, ) ); } }); } return this; }; $.fn.dlmenu=function(){ return this.each( function(){ if ( $( ).data( 'dlmenu' ) ){ return false; } $( ).data( 'dlmenu', true ); // plugin code }); }; } )( jquery, window );
two elements on same page cannot share same id.
change $( '#dl-menu' ).dlmenu(); $( '.dl-menuwrapper' ).dlmenu(); , work.
Comments
Post a Comment