YUI: Menu Button with icons
This example shows how to add icons to menu items in a Button.
The CSS
.yui-skin-sam .yuimenuitemlabel { padding: 3px 25px; position: relative; } #button .yui-button { position: relative; } .yui-skin-sam .yui-button button, .yui-skin-sam .yui-button a { padding: 0 22px; } #button span.icon { display:block; height:18px; width:18px; position: absolute; top:0; left: 3px; } #button span.one-icon { background-image: url(icon1.gif); } #button span.two-icon { background-image: url(icon2.gif); } #button span.three-icon { background-image: url(icon3.gif); }
The Javascript
(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var onMenuItemClick = function(type, ev, item) { //Set the label to the selected item button.set('label', item.cfg.getProperty('text')); }; var aMenuButton5Menu = [ //Add some elements to skin.. { text: '<span class="icon one-icon"></span>One', value: 1, onclick: { fn: onMenuItemClick } }, { text: '<span class="icon two-icon"></span>Two', value: 2, onclick: { fn: onMenuItemClick } }, { text: '<span class="icon three-icon"></span>Three', value: 3, onclick: { fn: onMenuItemClick } } ]; var button = new YAHOO.widget.Button({ type: "menu", //Set the default skin on the first item label: '<span class="icon one-icon"></span>One', id: 'button1', name: "mymenubutton", menu: aMenuButton5Menu, container: Dom.get('button') }); })();