Description:
Dropdown menus are a common requirement for web applications. In HTML we can create using elements like ul, li, div e.t.c. In ADF, We can achieve using menu bar and menu components.
The below image is how the dropdown looks and feels without applying any custom skinning.
The below image is how the dropdown looks and feels after applying skinning.
These are the component structure in a source page.
The below are the skinning selectors for getting above look and feel.
af|menu::bar-item-open-icon-style {
background-image: url(“/images/select-arrow.png”);
height: 16px;
width: 16px;
padding-top: 2px;}
af|menu::bar-item-text {
color: #666;
font-size: 14px;
font-family: openSans-Regular;}
af|menu::bar-item-text:hover {
color: #eeaa00;
font-size: 14px;
font-family: openSans-Regular;}
af|menu::bar-item {
padding: 0px;
height: 25px;}
af|menu::bar-item:highlighted {
background-image: none;
background: transparent;
border: none;
border-bottom: 2px solid #c00;
padding: 0px;}
af|menu::bar-item:depressed {
background-image: none;
background: transparent;
border: none;
border-bottom: 2px solid #c00;
padding: 0px;}
af|menu:highlighted af|menu::bar-item-open-icon-style {
background-image: url(“/images/select-arrow.png”);
padding-top: 2px;}
af|menu:depressed af|menu::bar-item-open-icon-style {
background-image: url(“/images/select-arrow.png”);
padding-top: 2px;}
af|menuBar{overflow: visible !important;
background: transparent;
height: 25px;}
af|commandMenuItem::menu-item-text {font-family: openSans-Regular;
font-size: 13px;
padding: 5px;
font-weight: 400;
color: #333;
background-color: #f9f9fa;}
af|menu::child-container{
background-color:#f9f9fa;
min-width: 180px;
border-top: none;}
af|commandMenuItem::menu-item-text:hover {background: #fcc200 !important;}
af|commandMenuItem::menu-item-text:active {background: #fcc200 !important;}
af|commandMenuItem::menu-item-icon-style {display: none;}
af|commandMenuItem::menu-item-open-indicator {display: none;}
af|commandMenuItem::menu-item-accelerator {display: none;}
For reference, download below sample application.
Summary:
Those steps indicate to use ADF menus, bar & Item Skinning.
queries?
Do drop a note by writing us at doyen.ebiz@gmail.com or use the comment section below to ask your questions.
