|
//CopyRight 1998-2005 Scand LLC.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Menu samples. dhtmlXMenu - Easy skinable with CSS</title>
</head>
<style>
body {font-size:12px}
.{font-family:arial;font-size:12px}
h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
<h1>Easy skinable with CSS</h1>
<!-- dhtmlXMenu_alter.css -->
<style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
#altermenu .menuButtonSecond td, .menuButton td, .menuButtondown td, .menuButtonover td {
cursor:default;
}
/*menu text - all levels*/
#altermenu .defaultMenuText{
font:12px Arial,sans-serif;
padding-left:10px;
padding-right:5px;
}
/*menu caption if any*/
#altermenu .menuName{
color : Blue;
font : 11px Arial,sans-serif;
letter-spacing : 3px;
padding-left : 10px;
padding-right : 10px;
}
/*========= BUTTONS ======================*/
/*plain button state - top level*/
#altermenu .menuButton {
border : solid 1px #d3f3fe;
}
/*down button state - top level*/
#altermenu .menuButtondown {
background-color : #6495ed;
border: solid 1px #d3f3fe;
cursor : default;
color:white;
}
/*mouse over button state - top level*/
#altermenu .menuButtonover {
background-color : #6495ed;
border: solid 1px #d3f3fe;
cursor : default;
}
/*plain button state - other levels*/
#altermenu .menuButtonSecond {
background-color:#d3f3fe;
border : solid 1px #d3f3fe;
font:12px Arial,sans-serif;
}
/*mouse over button and down button states - other levels*/
#altermenu .menuButtonSeconddown {
border : solid 1px #d3f3fe;
font:12px Arial,sans-serif;
background-color : #6495ed;
color:white;
cursor : default;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
background-color : #C9D9F5;
}*/
/*text of mouse over button - other levels*/
#altermenu .menuButtonSeconddown td {
color:white;
cursor:default;
border:0px solid;
}
/*============ PANELS and DEVIDERS ===========================================*/
/*manu panel - top level*/
#altermenu .menuTable{
background-color : #d3f3fe;
border: solid #6495ed 1px;
margin : 0px;
-moz-user-select : none;
padding : 0px;
}
/*menu panel - other levels*/
#altermenu .secondMenuTable{
background-color : #d3f3fe;
border: solid #6495ed 1px;
margin : 2px;
-moz-user-select : none;
padding : 0 1 0 2;
}
/*devider - horizontal*/
#altermenu .menudividery {
background-color : blue;
border-bottom : solid #FFFFFF 1px;
border-top : solid #6495ed 1px;
height : 2px;
overflow : hidden;
width : 100%;
}
/*================== DRAG HANDLERS ==================*/
/*drag handler for menu - horizontal*/
#altermenu .menuhandle {
background-color : #6495ed;
border-bottom : solid #d3f3fe 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #d3f3fe 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 100%;
overflow : hidden;
width : 3px;
}
/*============ ICONS and SCROLLERS ====================*/
/*disabled icon - all levels*/
#altermenu .iconGray {
filter : BlendTrans(Percent=50) gray();
cursor: default;
border:solid 1px #D4D0C8;
}
/*enabled scroller*/
#altermenu .menuscrollerenabled{
background-color:#CAC8D4;
cursor: pointer;
text-align:center;
}
/*disabled scroller*/
#altermenu .menuscrollerdisabled{
background-color: #CAC8D4;
cursor: default;
visibility:hidden;
text-align:center;
}
</style>
<!-- dhtmlXMenu_xp.css -->
<style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
#xpstyle .menuButtonSecond td, #xpstyle .menuButton td, #xpstyle .menuButtondown td,#xpstyle .menuButtonover td {
cursor:default;
}
/*menu text - all levels*/
#xpstyle .defaultMenuText{
font: 11px Tahoma,Arial;
padding-left:10px;
padding-right:5px;
}
/*menu caption if any*/
#xpstyle .menuName{
color : gray;
letter-spacing : 7px;
font : 11px Arial,sans-serif;
padding-left : 10px;
padding-right : 10px;
}
/*========= BUTTONS ======================*/
/*plain button state - top level*/
#xpstyle .menuButton {
border : solid 1px #ece9d8;
}
/*down button state - top level*/
#xpstyle .menuButtondown {
background-color : #316ac5;
border: solid 1px #316ac5;
color:white;
cursor : default;
}
/*mouse over button state - top level*/
#xpstyle .menuButtonover {
background-color : #316ac5;
border: solid 1px #316ac5;
color:white;
cursor : default;
}
/*text color for pressed and over items - top level*/
#xpstyle .menuButtondown .defaultMenuText,#xpstyle .menuButtonover .defaultMenuText{
color:white;
}
/*plain button state - other levels*/
#xpstyle .menuButtonSecond {
background-color:white;/*#xD4D0C8*/
border:1px solid white;
font:12px Arial,sans-serif;
}
/*mouse over button and down button states - other levels*/
#xpstyle .menuButtonSecondover,#xpstyle .menuButtonSeconddown {
background-color : #316ac5;
color:white;
cursor : default;
border:1px solid #316ac5;
font:12px Arial,sans-serif;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
background-color : #C9D9F5;
}*/
/*text of mouse over button - other levels*/
#xpstyle .menuButtonSeconddown td {
color:white;
cursor:default;
border:0px solid;
}
/*============ PANELS and DEVIDERS ===========================================*/
/*manu panel - top level*/
#xpstyle .menuTable{
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
margin : 0px;
-moz-user-select : none;
padding : 0px;
}
/*menu panel - other levels*/
#xpstyle .secondMenuTable{
background-color : white;
border: 1px solid #808080;
border-right:2px outset #ffffff;
border-bottom:2px outset #ffffff;
margin : 0px;
-moz-user-select : none;
padding : 0 1 0 2;
margin-top:-1px;
}
/*devider - horizontal*/
#xpstyle .menudivider {
background-color : #ece9d8;
border-left : solid #808080 1px;
border-right : solid #FFFFFF 1px;
height : 100%;
margin-bottom : 2px;
margin-top : 1px;
overflow : hidden;
vertical-align : middle;
width : 2px;
}
/*devider - vertical*/
#xpstyle .menudividery {
background-color : #ece9d8;
border-bottom : solid #FFFFFF 1px;
border-top : solid #808080 1px;
height : 2px;
overflow : hidden;
width : 100%;
}
/*================== DRAG HANDLERS ==================*/
/*drag handler for menu - horizontal*/
#xpstyle .menuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 100%;
overflow : hidden;
width : 3px;
}
/*drag handler for menu - vertical*/
#xpstyle .vmenuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 3px;
}
/*============ ICONS and SCROLLERS ====================*/
/*disabled icon - all levels*/
#xpstyle .iconGray {
filter : BlendTrans(Percent=50) gray();
cursor: default;
border:solid 1px #ece9d8;
}
/*enabled scroller*/
#xpstyle .menuscrollerenabled{
background-color:#CAC8D4;
cursor: pointer;
text-align:center;
}
/*disabled scroller*/
#xpstyle .menuscrollerdisabled{
background-color: #CAC8D4;
cursor: default;
visibility:hidden;
text-align:center;
}
</style>
<!-- dhtmlXMenu_osx.css -->
<style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
#osxstyle .menuButtonSecond td, #osxstyle .menuButton td, #osxstyle .menuButtondown td,#osxstyle .menuButtonover td {
cursor:default;
}
/*menu text - all levels*/
#osxstyle .defaultMenuText{
font: 13px "Lucida Sans Unicode",Verdana;
font-weight:bold;
color:525252;
padding-left:10px;
padding-right:5px;
}
/*menu caption if any*/
#osxstyle .menuName{
color : gray;
letter-spacing : 7px;
font : 12px "Lucida Sans Unicode",Verdana;
padding-left : 10px;
padding-right : 10px;
}
/*========= BUTTONS ======================*/
/*plain button state - top level*/
#osxstyle .menuButton {
border : solid 0px #ece9d8;
}
/*down button state - top level*/
#osxstyle .menuButtondown {
background-color : #2b60b1;
border: solid 0px #2b60b1;
color:white;
cursor : default;
}
/*mouse over button state - top level*/
#osxstyle .menuButtonover {
background-color : #2b60b1;
border: solid 0px #2b60b1;
color:white;
cursor : default;
}
/*text color for pressed and over items - top level*/
#osxstyle .menuButtondown .defaultMenuText,#osxstyle .menuButtonover .defaultMenuText{
color:white;
}
/*plain button state - other levels*/
#osxstyle .menuButtonSecond {
background-color:white;/*#xD4D0C8*/
background-image : url(../img/osx_bg.gif);
border:0px solid white;
font:12px Arial,sans-serif;
}
/*mouse over button and down button states - other levels*/
#osxstyle .menuButtonSecondover,#osxstyle .menuButtonSeconddown {
background-color : #2b60b1;
color:white;
cursor : default;
border:0px solid #316ac5;
font:12px Arial,sans-serif;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
background-color : #C9D9F5;
}*/
/*text of mouse over button - other levels*/
#osxstyle .menuButtonSeconddown td {
color:white;
cursor:default;
border:0px solid;
}
/*============ PANELS and DEVIDERS ===========================================*/
/*manu panel - top level*/
#osxstyle .menuTable{
background-color : #ece9d8;
background-image : url(../img/osx_bg.gif);
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
margin : 0px;
-moz-user-select : none;
padding : 0px;
}
/*menu panel - other levels*/
#osxstyle .secondMenuTable{
background-color : white;
background-image : url(../img/osx_bg.gif);
border-left: 0px solid ;
border-top: 1px solid #808080;
border-right:2px outset #ffffff;
border-bottom:2px outset #ffffff;
margin : 0px;
-moz-user-select : none;
padding : 0 1 0 2;
}
/*devider - horizontal*/
#osxstyle .menudivider {
background-color : #ece9d8;
border-left : solid #808080 1px;
border-right : solid #FFFFFF 1px;
height : 100%;
margin-bottom : 2px;
margin-top : 1px;
overflow : hidden;
vertical-align : middle;
width : 2px;
}
/*devider - vertical*/
#osxstyle .menudividery {
background-color : grey;
border-bottom : solid #808080 1px;
border-top : solid #808080 1px;
height : 1px;
overflow : hidden;
width : 100%;
}
/*================== DRAG HANDLERS ==================*/
/*drag handler for menu - horizontal*/
#osxstyle .menuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 100%;
overflow : hidden;
width : 3px;
}
/*drag handler for menu - vertical*/
#osxstyle .vmenuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 3px;
}
/*============ ICONS and SCROLLERS ====================*/
/*disabled icon - all levels*/
#osxstyle .iconGray {
filter : BlendTrans(Percent=50) gray();
cursor: default;
border:solid 1px #ece9d8;
}
/*enabled scroller*/
#osxstyle .menuscrollerenabled{
background-color:#CAC8D4;
cursor: pointer;
text-align:center;
}
/*disabled scroller*/
#osxstyle .menuscrollerdisabled{
background-color: #CAC8D4;
cursor: default;
visibility:hidden;
text-align:center;
}
</style>
<!-- dhtmlXMenu_bus.css -->
<style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
#busstyle .menuButtonSecond td, #busstyle .menuButton td, #busstyle .menuButtondown td,#busstyle .menuButtonover td {
cursor:pointer;
}
/*menu text - all levels*/
#busstyle .defaultMenuText{
font: 12px Arial;
padding-left:10px;
padding-right:5px;
color:white;
}
/*menu caption if any*/
#busstyle .menuName{
color : whitesmoke;
letter-spacing : 7px;
font : 11px Arial,sans-serif;
padding-left : 10px;
padding-right : 10px;
}
/*========= BUTTONS ======================*/
/*plain button state - top level*/
#busstyle .menuButton {
border : 0px;
}
/*down button state - top level*/
#busstyle .menuButtondown {
background-color : blue;
border: 0px;
color:#87ceeb;
cursor : pointer;
}
/*mouse over button state - top level*/
#busstyle .menuButtonover {
background-color : blue;
border: 0px;
color:#87ceeb;
cursor : pointer;
}
/*text color for pressed and over items - top level*/
#busstyle .menuButtondown .defaultMenuText,#busstyle .menuButtonover .defaultMenuText{
color:#87ceeb;
}
/*plain button state - other levels*/
#busstyle .menuButtonSecond {
background-color:blue;/*#xD4D0C8*/
border:0px;
font:12px Arial,sans-serif;
padding:5px;
}
/*mouse over button and down button states - other levels*/
#busstyle .menuButtonSecondover,#busstyle .menuButtonSeconddown {
background-color : blue;
color:87ceeb;
cursor : pointer;
border:0px;
font:12px Arial,sans-serif;
padding:5px;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
background-color : #C9D9F5;
}*/
/*text of mouse over button - other levels*/
#busstyle .menuButtonSeconddown td {
color:87ceeb;
text-decoration:underline;
cursor:pointer;
border:0px solid;
}
/*============ PANELS and DEVIDERS ===========================================*/
/*manu panel - top level*/
#busstyle .menuTable{
background-color : blue;
border: solid white 1px;
margin : 0px;
-moz-user-select : none;
padding : 0px;
}
/*menu panel - other levels*/
#busstyle .secondMenuTable{
background-color : blue;
border: 1px solid white;
margin : 0px;
-moz-user-select : none;
padding : 0 1 0 2;
margin-top:px;
}
/*devider - horizontal*/
#busstyle .menudivider {
background-color : #ece9d8;
border-left : solid #FFFFFF 1px;
border-right : solid #FFFFFF 1px;
height : 100%;
margin-bottom : 2px;
margin-top : 1px;
overflow : hidden;
vertical-align : middle;
width : 2px;
}
/*devider - vertical*/
#busstyle .menudividery {
background-color : #ece9d8;
border-bottom : solid #FFFFFF 1px;
border-top : solid #FFFFFF 1px;
height : 2px;
overflow : hidden;
width : 100%;
}
/*================== DRAG HANDLERS ==================*/
/*drag handler for menu - horizontal*/
#busstyle .menuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 100%;
overflow : hidden;
width : 3px;
}
/*drag handler for menu - vertical*/
#busstyle .vmenuhandle {
background-color : #ece9d8;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 3px;
}
/*============ ICONS and SCROLLERS ====================*/
/*disabled icon - all levels*/
#busstyle .iconGray {
filter : BlendTrans(Percent=50) gray();
cursor: default;
border:solid 1px #ece9d8;
}
/*enabled scroller*/
#busstyle .menuscrollerenabled{
background-color:#CAC8D4;
cursor: pointer;
text-align:center;
}
/*disabled scroller*/
#busstyle .menuscrollerdisabled{
background-color: #CAC8D4;
cursor: default;
visibility:hidden;
text-align:center;
}
</style>
<!-- dhtmlXMenu.css -->
<style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
.menuButtonSecond td, .menuButton td, .menuButtondown td, .menuButtonover td {
cursor:default;
}
/*menu text - all levels*/
.defaultMenuText{
font: 11px "Microsoft Sans Serif",Arial;
padding-left:10px;
padding-right:5px;
}
/*menu caption if any*/
.menuName{
color : gray;
letter-spacing : 7px;
font : 11px Arial,sans-serif;
padding-left : 10px;
padding-right : 10px;
}
/*========= BUTTONS ======================*/
/*plain button state - top level*/
.menuButton {
border : solid 1px ButtonFace;
}
/*down button state - top level*/
.menuButtondown {
background-color : ButtonFace;/*#DBD8D1*/
border-bottom : solid 1px #FFFFFF;
border-left : solid 1px #808080;
border-right : solid 1px #FFFFFF;
border-top : solid 1px #808080;
cursor : default;
}
/*mouse over button state - top level*/
.menuButtonover {
background-color : ButtonFace;
border-bottom : solid 1px #808080;
border-left : solid 1px #FFFFFF;
border-right : solid 1px #808080;
border-top : solid 1px #FFFFFF;
cursor : default;
}
/*plain button state - other levels*/
.menuButtonSecond {
background-color:ButtonFace;/*#xD4D0C8*/
border:1px solid ButtonFace;
font:12px Arial,sans-serif;
}
/*mouse over button and down button states - other levels*/
.menuButtonSecondover, .menuButtonSeconddown {
background-color : navy;
color:white;
cursor : default;
border:1px solid navy;
font:12px Arial,sans-serif;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
background-color : #C9D9F5;
}*/
/*text of mouse over button - other levels*/
.menuButtonSeconddown td {
color:white;
cursor:default;
border:0px solid;
}
/*============ PANELS and DEVIDERS ===========================================*/
/*manu panel - top level*/
.menuTable{
background-color : ButtonFace;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
margin : 0px;
-moz-user-select : none;
padding : 0px;
}
/*menu panel - other levels*/
.secondMenuTable{
background-color : ButtonFace;
border: 2px outset #ffffff;
margin : 0px;
-moz-user-select : none;
padding : 0 1 0 2;
}
/*devider - horizontal*/
.menudivider {
background-color : ButtonFace;
border-left : solid #808080 1px;
border-right : solid #FFFFFF 1px;
height : 100%;
margin-bottom : 2px;
margin-top : 1px;
overflow : hidden;
vertical-align : middle;
width : 2px;
}
/*devider - vertical*/
.menudividery {
background-color : ButtonFace;
border-bottom : solid #FFFFFF 1px;
border-top : solid #808080 1px;
height : 2px;
overflow : hidden;
width : 100%;
}
/*================== DRAG HANDLERS ==================*/
/*drag handler for menu - horizontal*/
.menuhandle {
background-color : ButtonFace;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 100%;
overflow : hidden;
width : 3px;
}
/*drag handler for menu - vertical*/
.vmenuhandle {
background-color : ButtonFace;
border-bottom : solid #808080 1px;
border-left : solid #FFFFFF 1px;
border-right : solid #808080 1px;
border-top : solid #FFFFFF 1px;
cursor : move;
height : 3px;
}
/*============ ICONS and SCROLLERS ====================*/
/*disabled icon - all levels*/
.iconGray {
filter : BlendTrans(Percent=50) gray();
cursor: default;
border:solid 1px ButtonFace;
}
/*enabled scroller*/
.menuscrollerenabled{
background-color:#CAC8D4;
cursor: pointer;
text-align:center;
}
/*disabled scroller*/
.menuscrollerdisabled{
background-color: #CAC8D4;
cursor: default;
visibility:hidden;
text-align:center;
}
</style>
<!-- dhtmlXProtobar.js -->
<script language="JavaScript">
/**
* @desc: protobar object
* @param: func - user defined function
* @type: private
* @topic: 0
*/
function dhtmlXProtobarObject(){
return this;
}
/**
* @desc: set action hadler on menu showing
* @param: func - user defined function
* @type: public
* @topic: 2
*/
dhtmlXProtobarObject.prototype.setOnShowHandler=function(func){
if (typeof(func)=="function") this.onShow=func; else this.onShow=eval(func);
};
/**
* @desc: return item index in collection by id
* @type: private
* @param: id - item id
* @topic: 3
*/
dhtmlXProtobarObject.prototype._getItemIndex=function(id){
for (var i=0; i<this.itemsCount; i++)
{
if (this.items[i].id==id) return i;
};
return -1;
};
/**
* @desc: set path to system images
* @param: path - relative path to images
* @type: public
* @topic: 2
*/
dhtmlXProtobarObject.prototype.setGfxPath=function(path){
this.sysGfxPath=path;
};
/**
* @desc: set action hadler on menu hiding
* @param: func - user defined function
* @type: public
* @topic: 2
*/
dhtmlXProtobarObject.prototype.setOnHideHandler=function(func){
if (typeof(func)=="function") this.onHide=func; else this.onHide=eval(func);
};
/**
* @desc: set item individual action
* @param: id - item identificator
* @param: action - js function called on item selection
* @type: public
* @topic: 2
*/
dhtmlXProtobarObject.prototype.setItemAction=function(id,action){
var z=this._getItemIndex(id);
if (z>=0){
this.items[z].setSecondAction(action);
};
};
/**
* @desc: return item object by id
* @type: public
* @param: itemId - item id
* @topic: 4
*/
dhtmlXProtobarObject.prototype.getItem=function(itemId){
var z=this._getItemIndex(itemId);
if (z>=0) return this.items[z];
};
/**
* @desc: hide menu buttons
* @type: public
* @param: idList - list of items's ids, separated by comma
* @topic: 4
*/
dhtmlXProtobarObject.prototype.hideButtons=function(idList){
if (!idList){
for (var i=0; i<this.itemsCount; i++){
this.items[i].getTopNode().style.display="none";
this.items[i].hide=1;
}
return 0;
}
var temp=idList.split(",");
for (var i=0; i<temp.length; i++)
{
this.hideItem(temp[i]);
};
};
/**
* @desc: show menu buttons
|
