Drop down 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 menuBar and menu components.
The below image is how the dropdown look and feel without applying any custom skinning.
The below image is how the dropdown look and feel after applying skinning.
These are the component structure in an 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.
where is sample application ?
ReplyDeleteExcellent blog, thanks for Sharing this informative article.
ReplyDeleteOracle Fusion SCM Online Training
Oracle Fusion Financials Online Training
Magnificent blog I visit this blog it's extremely wonderful. Interestingly, in this blog content composed plainly and reasonable. The substance of data is useful.
ReplyDeleteOracle Fusion HCM Online Training
Oracle Fusion SCM Online Training
Oracle Fusion Financials Online Training
Big Data and Hadoop Training In Hyderabad
oracle adf training
ReplyDeleteoracle adf online training
oracle adf 11g training
Oracle adf 12c training
oracle adf training online