YUI Library Home

YUI Library Examples: Button Control: Fixed Width Menu Button

Button Control: Fixed Width Menu Button

This example demonstrates how to create a Menu Button whose text label has a fixed width. The behavior of this widget is similar to an HTML <select> element in that its label hides any overflow when updated to represent the selected menu item.

Begin by creating a Button instance of type "menu," wrapping its text label in an <em> element.

Style the <em> element so that it has a fixed width of 10em, and prevent the characters from exceeding this width by setting its "overflow" property to "hidden."

Finally, add a selectedMenuItemChange event handler to the Button that will update its label when any item in the Menu is clicked.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings