I am looking for a solution to display to a menu button in a Web page, preferably using client side code (example a jQuery plugin etc). The only requirement is that it should blend well with the default buttons look and feel. An Example of a menu button i can give is that of the Labels or Actions button in GMail
I have already looked into the YUI Menu button widget, but was a little hesitant to use since i need to introduce lots of dependencies along with that.
I am unfamiliar with the GMail buttons. However, using CSS would allow you plenty of freedom in customizing your button. This could be done using html lists and decorating them in CSS.
You could post something like this Html:
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Then your CSS could do a lot with that, such as:
#menu li {
list-style:url('customimage.jpg');
padding:.5em;
margin:1em;
width:12em;
background-color:#F00;
border:1px solid #000;}
This would then give you a menu list with a custom bullet point (your list-style), with specific padding and margins with a Red background color and black border. Each item would also be 12em (about 125px) wide.
You could even get fancy and add this to your CSS:
#menu li:Hover {border:1px solid #FF0;}
Pending some potential browser conflicts with older versions, whenever a user would mouse over the menu items its border would change color.
I hope this helps explain this to you. You could do searches on Google for CSS Menu Tutorials and you can find some simple and very elaborate tutorials.
I think you are looking for css-sprites
There are some resources at
Basic explanation - AListApart
Design Guides - SmashingMagazine