Menubar

Menubar
Prev	2. XUL Components	Next

Menubar combine with two children: Menu , and Menuitem .

Note:

The CSS source of Menubar from SVN

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menubar-hor`
Supported	V

CSS Specification:

Class Name

Description

Default Values

.z-menubar-hor

Background image

border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #CEE7F5 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left;

position: relative; zoom: 1;

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menubar-ver`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-menubar-ver	Background image	border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #CEE7F5 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left; position: relative; zoom: 1;

Menu in Menubar

Menu is made by HTML Table with 3 parts. It can separate three status: Text with Icon, Icon only, and Text only.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu`	`-btn-over`	`-btn-seld`			-disd
Supported	V	V	V			!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-menubar-hor .z-menu	Vertical align	vertical-align: middle;
.z-menubar-hor .z-menu	Font size	white-space: nowrap; font: normal ${fontSizeMS} ${fontFamilyT};
.z-menu-btn button	Font size of button text	border: 0 none; background: transparent; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left: 3px; padding-right: 3px; cursor: pointer; margin: 0; overflow: visible; width: auto; -moz-outline: 0 none; outline: 0 none; min-height: 13px;
.z-menu-btn-img .z-menu-btn-m .z-menu-btn-text	Size of menu-button-text	background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0;
.z-menu-btn-img .z-menu-btn-m	Padding of button middle	padding: 1px;
.z-menu-btn-text-img .z-menu-btn-m .z-menu-btn-text	Padding of button-text-image	background-position: 0 2px; background-repeat: no-repeat; padding-left: 18px; padding-top: 3px; padding-bottom: 2px; padding-right:0;
.z-menu-btn-l	Size of button left	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-btn-r	Size of button right	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-btn .z-menu-btn-m em	Arrow background of button middle	display: block; background-color : transparent; background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-arrow.png')}); background-repeat : no-repeat; background-position : right 0; padding-right: 10px; min-height: 16px;
.z-menu-btn-text-img .z-menu-btn-m em	Arrow background of button middle with button-text-image	display: block; background-color : transparent; background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-arrow.png')}); background-repeat : no-repeat; background-position : right 3px; padding-right: 10px;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-l	Background of the button left with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 0;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-r	Background of the button right with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -21px;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-m	Background of the button middle with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -42px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-l	Background of the button left with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position :0 -63px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-r	Background of the button right with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -84px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-m	Background of the button middle with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -105px;
.z-menubar-hor .z-menu-btn .z-menu-btn-m em	Padding of the button middle	padding-right: 8px;

Menuitem in Menubar

Menuitem is made by HTML Table with 3 parts. It can separate three status: Text with Icon, Icon only, and Text only.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu-item`	`-btn-over`	`-btn-seld`			-disd
Supported	V	V	V			!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-menubar-hor .z-menu-item	Vertical align	vertical-align: middle;
.z-menubar-hor .z-menu-item	Font size	white-space: nowrap; font: normal ${fontSizeMS} ${fontFamilyT};
.z-menu-item-btn button	Font size of button text	border: 0 none; background: transparent; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left: 3px; padding-right: 3px; cursor: pointer; margin: 0; overflow: visible; width: auto; -moz-outline: 0 none; outline: 0 none; min-height: 13px;
.z-menu-item-btn-img .z-menu-item-btn-m .z-menu-item-btn-text	Size of menu-button-text	background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0;
.z-menu-item-btn-img .z-menu-item-btn-m	Padding of button middle	padding: 1px;
.z-menu-item-btn-text-img .z-menu-item-btn-m .z-menu-item-btn-text	Padding of button-text-image	background-position: 0 2px; background-repeat: no-repeat; padding-left: 18px; padding-top: 3px; padding-bottom: 2px; padding-right:0;
.z-menu-item-btn-l	Size of button left	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-item-btn-r	Size of button right	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-item-cnt	Font size of the content	text-decoration: none; white-space: nowrap; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeMS};
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-l	Background of the button left with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 0;
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-r	Background of the button right with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -21px;
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-m	Background of the button middle with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -42px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-l	Background of the button left with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position :0 -63px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-r	Background of the button right with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -84px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-m	Background of the button middle with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -105px;
.z-menubar-hor .z-menu-item-btn .z-menu-item-btn-m em	Padding of the button middle	padding-right: 0px;

Prev	Up	Next
Longbox	Home	Menupopup