Creating Submit Buttons and Drop-down Menus with the Yahoo Button Control - Building a drop-down menu
(Page 4 of 4 )
As I expressed in the section that you just read, the Yahoo! Button Control also offers the possibility of building neat drop-down menus by using some existing <select> elements. Basically, the technique used to create well-structured menus depends on first defining the corresponding <select> elements with the appropriate options, and then associating these elements with an instance of the YAHOO.widget.Button JavaScript class that you saw in previous examples.
To clarify this process even more, below I included an example that shows how to create two basic drop-down menus, in this case utilizing a pair of existing “<select>” tags.
Having said that, here’s the corresponding code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of "menu" Yahoo Button using "input and select"
tags</title>
<!-- Include core + Skin CSS files-->
<link rel="stylesheet" type="text/css"
href="build/button/assets/skins/sam/button.css">
<!-- This file is optional: Menu Stylesheet (required for
creating buttons of type "menu" and "split") -->
<link rel="stylesheet" type="text/css"
href="build/menu/assets/skins/sam/menu.css">
<!-- Include dependencies -->
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-
dom-event.js"></script>
<script type="text/javascript" src="build/element/element-beta-
min.js"></script>
<!-- This file is optional: Menu and Container Core (required for
creating buttons of type "menu" and "split") -->
<script type="text/javascript"
src="build/container/container_core-min.js"></script>
<script type="text/javascript" src="build/menu/menu-
min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="build/button/button-beta-
min.js"></script>
</head>
<body class="yui-skin-sam">
<input type="submit" id="menubutton1" name="menubutton1_button"
value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">Option One</option>
<option value="1">Option Two</option>
<option value="2">Option Three</option>
</select>
<input type="button" id="menubutton2" name="menubutton2_button"
value="Menu Button 2">
<select id="menubutton2select" name="menubutton2select">
<option value="0">Option One</option>
<option value="1">Option Two</option>
<option value="2">Option Three</option>
</select>
<script type="text/javascript">
var sMenuButton1 = new YAHOO.widget.Button("menubutton1", {
type: "menu",
menu: "menubutton1select" });
var sMenuButton2 = new YAHOO.widget.Button("menubutton2", {
type: "menu",
menu: "menubutton2select" });
</script>
<div id="container"></div>
</body>
</html>
As shown in the above example, building two basic drop-down menus is actually a no-brainer process. And it only requires defining two typical “<select>” elements with their corresponding options, which will be used to create the different menu items.
Lastly, the aforementioned “<select>” elements are linked to two different instances of the YAHOO.widget.Button class, in this way completing the creation of the pertinent menus.
If you’re anything like me, then you’ll want to see how these menus are displayed on the browser. So below I included a screen shot that depicts the visual appearance of these navigational elements:
Pretty good, right? As you can see, the functionality offered by the Yahoo! Button Control is more evident in this case, particularly when it comes to building eye-catching drop-down menus like the ones shown above.
As usual with many of my articles on web development, you’re completely free to modify the source code of all the code samples included here. In this way you can improve your background in using the Yahoo! Button Control to create professional-looking user interfaces.
Final thoughts
Unfortunately, we’ve come to the end of this series. However, I hope this journey has been instructive. You learned how to use the most important features that come packaged with the Yahoo! Button Control to build all sorts of neat web-based buttons and some cool drop-down menus.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
