JQuery: Novice to Ninja- P12:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | 142 jQuery Novice to Ninja We ll use a CSS sprite to add an indicator to our menu a single image will contain both the contracted down-facing and expanded up-facing arrows for our menu sections. By default all of the sections are closed so we show the contracted arrow state in our CSS. In our sprite image the contracted state is aligned to the top while the expanded state is 20 pixels below the top. We apply this background image to li elements inside the menu and then remove it from deeper nested items chapter_05 03_open_closed_indicators excerpt menu li cursor pointer border-bottom 1px solid 444 background 94C5EB url no-repeat right top menu li li cursor auto border 0 padding 0 14px background-color fff background-image none With our background image in place we now need to adjust the CSS sprite s position whenever we toggle a menu item. When the menu item slides down we show the expanded state and when it slides up we show the contracted state. We ll make clever use of chaining to apply the css action before we drill down to find the ul to show or hide chapter_05 03_open_closed_indicators excerpt menu li .toggle function this .css background-position right -20px .find ul .slideDown function this .css background-position right top .find ul .slideUp Menus Tabs Tooltips and Panels 143 Menu Expand on Hover For our next trick we want to make the menu respond to hover events as well as click events. When a user hovers over one of our parent menu items we ll pause briefly then expand the menu. Now you ve already seen enough toggle and hover effects to last a lifetime and don t worry there s plenty more to come so we ll give this one a twist. The jQuery hover event fires the instant you move your mouse over the target item. But for this effect we ll delay the execution so that it only fires if the user hovers for a short while. Otherwise the control would be virtually unusable as it would snap open and closed if you so much as grazed it .
