html - Specifying First Nav ul With jQuery -
i'm trying use jquery plugin called menuflip on first ul navigation menu. reason, no matter do, applies menuflip of sub-menu's too.
this using start plugin:
$(document).ready(function() { $('ul:first-child').menuflip(); });
this actual html navigation menu:
<div id="navigation-menu"> <ul id="flip_nav"> <li class="main-li"><a href="/home">home</a></li> <li class="main-li"><a href="/page/202624/about" class="dropdown">community</a> <ul class="sub-menu"> <li><a href="#">information</a></li> <li><a href="#">rosters</a></li> </ul> </li> <li class="main-li"><a href="/forums" class="dropdown">forums</a></li> <li class="main-li"><a href="/join" class="dropdown">join</a></li> <li class="main-li"><a href="/generalgamingnews" class="dropdown">content</a></li> <li class="main-li"><a href="/calendar" class="dropdown">events</a></li> <li class="main-li"><a href="teamsg" class="dropdown">competitive</a></li> <li class="main-li"><a href="/livestream">live streams</a></li> <li class="main-li"><a href="/store">store</a></li> </ul> </div>
$(document).ready(function() { $('ul:first-of-type').menuflip(); });
note added jquery 1.9.
edit: of course applies sumenus. inside 1 called.
solution
i had make changes plugin itself. don't understand why creators of plugin didn't build way begin - or @ least give option enable/disable children. anyway, children targeted (find()
), had change things. here fiddle: http://jsfiddle.net/e2st7/2
jquery
/** * jquery menuflip plugin * * copyright (c) 2011 garrett grimm (grimmdude.com) * dual licensed under mit , gpl licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * edited bram vanroy use 1 level menu * */ (function ($) { $.fn.menuflip = function (options) { var settings = $.extend({ 'li_height': '20px', 'flip_speed': 150, 'flipped_class': 'flipped_item' }, options); // set required css this.children('li').css({ 'overflow': 'hidden', 'height': settings.li_height }); this.children('li > a').css({ 'display': 'block' }); // each list item set child 'a' line height match li height , duplicate this.children('li').children('a').each(function () { // direct child selector not seem working. needs review $(this) .css('line-height', settings.li_height) .clone() .appendto($(this).parent()) .addclass(settings.flipped_class); }); // when list item hovered slide expose flipped link this.children('li').hover(function () { var negative_height = '-' + settings.li_height; $(this).children('li > a:first').animate({ margintop: negative_height }, settings.flip_speed); }, function () { $(this).children('li > a:first').animate({ margintop: '0px' }, settings.flip_speed); }); }; })(jquery); $('ul#flip-nav').menuflip();
Comments
Post a Comment