Menubar and Menuitem Widgets for HTML

menubar & menuitem

The menubar and menuitem widgets are so inter-related, that they are described together on this page.

HTML

A menubar can be constructed from virtually any container HTML element, but we recommend DIV. E.g.

<div style="float:right;">
  <span>example</span>
  <!-- widget menuitem action:menuitemAction; -->
</div>
<!-- widget menubar  -->
	    

This above example uses a simple menuitem in it also (which in its basic form functions as a button). Please see more complex examples below.

Javascript

In its most basic form, the menuitem acts like a button. Its has an action parameter, which defines the name of the javascript function that is clled when the menuitem is clicked. In the example above, the function name is "menuitemAction", and the following is the code that is called:

function menuitemAction(target)
{
    alert("pressed menuitem "+elementToString(target));
}
	    

The elementToString function is a convenience function that is part ofthe widget library for debugging.

CSS

As with the button widget, the menuitem widget will automatically be set up with a default CSS class if you don't specify one.

The menuitem widget's class will be "widget_menuitem" unless you specify it to be a class of your own. Then when its moused over, its class will be changed to "widget_menuitem_highlight", and then when its clicked, it will momentarily become "widget_menuitem_selected". Similarly, if you define 3 CSS classes, e.g. "my_menuitem", "my_menuitem_highlight", and "my_menuitem_selected", and declare the element initialised to class="my_menuitem", then when its moused over its class will change to "my_menuitem_highlight", and when clicked, to "my_menuitem_selected".

More Examples

A list can be added as the child of a menuitem, then it will perform like a pull-down list. The following example has a number of different types of widgets in the menubar, including a list:

metamorphic

sedimentary

conglomerate

volcanic

cave

conduit

sql

Hello World Just a label

<div>
  <div>
    <div style="visibility: hidden;">
      <div>metamorphic</div>
      <div>sedimentary</div>
      <div>conglomerate</div>
      <div>volcanic</div>
      <div>cave</div>
      <div>conduit</div>
      <div>sql</div>
    </div>
    <!-- widget list selected:0; action:listAction; -->
  </div>
  <!-- widget menuitem action:menuAction; -->
	      
  <img alt="Hello" src="../images/z.button.png" style="width:21px;height:14px;"/>
  <!-- widget button action:buttonAction; -->
  
  <span>Hello</span>
  <!-- widget button action:buttonAction; -->
  
  <span>World</span>
  <!-- widget menuitem action:menuitemAction; -->
  
  <span>Just a label</span>
  <!-- widget value -->

</div>
<!-- widget menubar -->
	    

Notice that the "World" menuitem has a slightly different appearance to the "Hello" button.

More...

Documentation     Other widgets

Zwartberg Reseach & Development is a registered trading name of Open Source Software Consulting CC.
Phone:+27235411462, fax:+27235411379, mobile:+27796977082,
brian@zwartberg.com, P.O. Box 2, Prince Albert, 6930, South Africa.