Tammu
asked on
How to extend this menu code to append a span tag to li element that has a submenu
Hi All,
I am currently using this piece of snippet to provide a drop down menu for my website. It works perfectly but I want to add a span tag to all the li elements has a sub menu.
HTML
here is the JS
What I am trying to do is add a span tag to all the parent li tag when it has a sub menu. so i tried using append but did not work
What am I doing wrong?
Thanks
I am currently using this piece of snippet to provide a drop down menu for my website. It works perfectly but I want to add a span tag to all the li elements has a sub menu.
HTML
<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menuitems"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Classifieds</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#">Local Talk</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">Weekly Specials</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Local Links</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Other Towns</a>
<ul class="sub-menu">
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">Town 1</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Town 2</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">Town 3</a></li>
</ul>
</li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">Photo Gallery</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Contact Us</a></li>
</ul></div>
here is the JS
/* custom js Do not delete */
;(function($) {
$.fn.dropit = function(method) {
var methods = {
init : function(options) {
this.dropit.settings = $.extend({}, this.dropit.defaults, options);
return this.each(function() {
var $el = $(this),
el = this,
settings = $.fn.dropit.settings;
$el.addClass('dropit')
.find('>'+ settings.triggerParentEl +':has('+ settings.submenuEl +')').addClass('dropit-trigger')
.find(settings.submenuEl).addClass('dropit-submenu').hide();
$el.on(settings.action, settings.triggerParentEl +':has('+ settings.submenuEl +') > '+ settings.triggerEl +'', function(){
if(settings.action == 'click' && $(this).parents(settings.triggerParentEl).hasClass('dropit-open')){
settings.beforeHide.call(this);
$(this).parents(settings.triggerParentEl).removeClass('dropit-open').find(settings.submenuEl).hide();
settings.afterHide.call(this);
return false;
}
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
settings.beforeShow.call(this);
$(this).parents(settings.triggerParentEl).addClass('dropit-open').find(settings.submenuEl).show();
settings.afterShow.call(this);
return false;
});
$(document).on('click', function(){
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
if(settings.action == 'mouseenter'){
$el.on('mouseleave', function(){
settings.beforeHide.call(this);
$(this).removeClass('dropit-open').find(settings.submenuEl).hide();
settings.afterHide.call(this);
});
}
settings.afterLoad.call(this);
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error( 'Method "' + method + '" does not exist in dropit plugin!');
}
};
$.fn.dropit.defaults = {
action: 'click',
submenuEl: 'ul',
triggerEl: 'a',
triggerParentEl: 'li',
afterLoad: function(){},
beforeShow: function(){},
afterShow: function(){},
beforeHide: function(){},
afterHide: function(){}
};
$.fn.dropit.settings = {};
})(jQuery);
What I am trying to do is add a span tag to all the parent li tag when it has a sub menu. so i tried using append but did not work
.find('>'+ settings.triggerParentEl +':has('+ settings.submenuEl +')').append('<span class="drop-arow"></span>')
What am I doing wrong?
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Just one more thing after clicking the parent li to display the submenu, any to fade out the submenu after 5 secs.
Thanks again
Thanks again
Thats a different question
ASKER
Thanks
ASKER