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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -