Using the YUI Menu Control

Once you've added any applicable sub-menus to your menu, you can also very easily change the styling to fit in with your existing or desired site theme. You can create and use your own style sheet if you wish, but I have found it far easier to edit the style properties found in menu.css instead of creating a new style sheet. For example, you can make the text of your menu and sub-menus bold just by adding the font-weight:bold; rule to the div.yuimenu selector at the very top of the file. You could also take away the underlining text-decoration property when a menu item is rolled over by changing the underline property to none in the div.yuimenu li.selected a.selected, div.yuimenubar li.selected a.selected selector, which is located about halfway through the file. To change the roll-over color, simply change the background-colour property of the div.yuimenu li.selected, div.yuimenubar li.selected selector to whatever color you prefer.

The last thing that you might want to do is change the image that denotes the menu item has a submenu. By default it is a right-facing angle bracket type thing. This is the most complex change that you'll need to make, but can still be done very easily. First of all, you'll need a couple of images, called arrow_nrm.gif and arrow_hov.gif (I'm trying to keep to a similar naming convention to Yahoo!), which should be saved to the assets folder. Next, open the menu.css file in your text editor and find the div.yuimenu li.hassubmenu em.submenuindicator, div.yuimenubar li.hassubmenu em.submenuindicator selector. You should change the height and width properties to match those of your image. Also change the background-image rule so that it points to your image instead of map.gif.

Now, copy all of the rules, beginning with display up to background-repeat. Now scroll down until you find the div.yuimenu li.hassubmenu em.submenuindicator.selected selector. Remove the rule that it currently holds and paste in the code block you just copied, but this time change the background-image rule to arrow_hov.gif. Now save the file and open yuimenu.html in your browser. Your custom image should be visible.

This is just one of the many ways that the versatile menu control can be used as a quick and easy way to add navigation menu functionality to your site. The menu will work and appear identical in most modern browsers (IE6, IE7, FireFox 1 and 2.0 for sure), so this saves you from the usually long and laborious task of refining and modifying your code to get it working across browser platforms. There is tons more information on the Yahoo! Developer site, so be sure to check it out when you've finished playing around with this example.