Top menu items
The drop-down menu system at the top of most UNICOM Intelligence Interviewer - Server Admin pages consists of a collection of div elements with various class names.
Menu elements example
The previous example includes all of the different class names used to style the menu elements. The following table provides a short description for each class.
Classes
.clActiveMenuItemBorder0
: Each menu item at the top level of the menu system is contained by a div with this class name.
.clActiveMenuItemBorder1
: The drop-down container for the submenu items is a div with this class name.
.clActiveMenuItemOn
: Menu items that are hovered or active have this class name.
.clActiveMenuItemOff
: The normal state for menu items that use this class name.
Example
The following .css example sets different colors, adds a css3 transition effect for the menu items based on whether they are active or inactive, and adds a rounded border to active top-level menu items.
/*Menus *****************************************/
/*General menu item properties */
.clActiveMenuItemOff, .clActiveMenuItemOn, .clInactiveMenuItem{
position: absolute;margin:0;padding:0 3px;font-family: helvetica,tahoma,arial;font-weight: normal;font-size:1em;color:#FFF;
cursor: hand;font-weight:bold;
}
/*Active MAIN menu item*/
.clActiveMenuItemBorder0 .clActiveMenuItemOn {
background-color:#666;opacity:1;background-repeat:repeat-x;border:1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
/*Inactive MAIN menu item*/
.clActiveMenuItemBorder0 .clActiveMenuItemOff {}
#oCMenu_mnuExitToLogin img, #oCMenu_mnuRefresh input {
visibility:hidden;
}
/*Submenu container */
.clActiveMenuItemBorder1 {background-color:#888;border:#333;
-moz-box-shadow:2px 2px 5px #000;
-webkit-box-shadow:2px 2px 5px #000;
}
/*all submenu items */
.clActiveMenuItemBorder1 .clActiveMenuItemOn, .clActiveMenuItemBorder1 .clActiveMenuItemOff{
border:1px solid #888;
}
/*submenu, non selected items */
.clActiveMenuItemBorder1 .clActiveMenuItemOff {background-color:#888;
-moz-transition:background-color .3s ease-in-out;
-webkit-transition:background-color .3s ease-in-out;
transition:background-color .3s ease-in-out;}
/*Active submenu item*/
.clActiveMenuItemBorder1 .clActiveMenuItemOn {background-color:#666;
-moz-transition:background-color .3s ease-in-out;
-webkit-transition:background-color .3s ease-in-out;
transition:background-color .3s ease-in-out;}
See also
