0
我是一個非常非常初學jQuery和JavaScript。基本上，我要在右側和左側創建具有2個導航的自定義響應菜單，第一個工作正常，但不能與另一個一起工作。我採取的腳本（http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/）。我的腳本看起來像這樣（codepen.io/donlego/full/xGjzWR）。相同的URL只有一個相同的jquery插件工作一個
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 a {
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 > a {
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: all 0.3s ease;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
display: none;
}
/*
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link.
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
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);
};
// the options
$.DLMenu.defaults = {
// classes for the animation effects
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; },
// 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; }
};
$.DLMenu.prototype = {
_init : function(options) {
// options
this.options = $.extend(true, {}, $.DLMenu.defaults, options);
// cache some elements and initialize some 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 for css animations and 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 = $(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 the menu close
$body.off('click').on('click.dlmenu', function() {
self._closeMenu() ;
});
this.$menu.addClass('dl-menuopen dl-menu-toggle').on(this.transEndEventName, function() {
$(this).removeClass('dl-menu-toggle');
});
this.$trigger.addClass('dl-active');
this.open = true;
},
// resets the menu to its 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 to initialization; " +
"attempted to call method '" + options + "'");
return;
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
logError("no such method '" + options + "' for 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, this));
}
});
}
return this;
};
$.fn.DLMenu=function(){
return this.each(function(){
if ($(this).data('dlmenu')){
return false;
}
$(this).data('dlmenu', true);
// plugin code
});
};
})(jQuery, window);
WOOW，真棒，沒錯這就是真正的工作，unbelieveable，太感謝你了。 –