Toolbar Tutorial - Adding a Dropdown Menu

Next


In this example, we add a dropdown menu to the Home button. The menu contains 4 links and a separator.

Note the new dropdown arrow next to the Download.com button. If you click on it, the Menu() function will bring up the popup menu that we have defined in the MENUDEFINITIONS block.

Source:

<XML id="toolbar">
<TOOLBAR caption="Toolbar Tutorial">
<control type="toolbar">
<button id="home"

    caption="Download.com: "
    action="http://www.download.com"
    tooltip="Download.com Home Page">

</button>
<dropdown action="Menu(links)"></dropdown>
</control>

<control type="combo" id="query" action="Command(search)" width=120></control>
<control type="toolbar">
<button caption="Search" tooltip="Search Download.com" image="http://www.toolbarbrowser.com/img/magnify.ico" action="Command(search)"></button>
</control>

<MENUDEFINITIONS>
    <menu id="links">
      <option caption="Download.com" action="http://www.download.com"></option>
      <separator></separator>
      <option caption="Software" action="http://www.download.com/2001-20_4-0.html?tag=tab"></option>
      <option caption="Music" action="http://music.download.com/2001-1_32-0.html?tag=tab"></option>
      <option caption="Games" action="http://www.download.com/2001-2012_4-0.html?tag=tab" image="http://www.toolbarbrowser.com/img/smiley.ico"></option>

    </menu>

</MENUDEFINITIONS>

<COMMANDS>
    <command id="search" action="http://www.download.com/3120-20-0.html?qt=%QUERY%&tg=dl-2001&search.x=17&search.y=2"></command>

</COMMANDS>

</TOOLBAR>
</XML>





Remarks:

  • Note the smiley image on the Games menu option.