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.
Good informative blog venkat ... Thanks for sharing the info....
ReplyDeleteGood informative blog venkat ... Thanks for sharing the info....
ReplyDeleteThanks Praveen....
ReplyDeleteHello Venkatesh. Thank you for the information. I have a question. I need to skin af|menu::child-container . There is no problem with the skinning. But I have other menus needs to stay like they are. So I'm trying to give id to child container like af|menu.sampleclass::child-container Giving ID to other attributes of af|menu works without any problem. But when I give an ID to child-container,child-container skinning doesn't work. It works without the ID by the way. Do you have any idea why it is not working?
ReplyDeleteThis comment has been removed by the author.
DeleteHI Alican,
DeleteI have tried you requirement, Using styleclass it's very difficulty to skin af|menu::child-container.
I tried number of ways but it seems to be not achievable. After applying to display:block property to child-Container, now I am able to see respective css changes but the entire layout distorted.
For fulfill your requirement, you can apply skinning to commandMenuItem but don't use position property.
I think the main reason was Using Javascript they are showing the child container like display none or block..Thats ways our changes are not picking..After applying display:block able to see changes but no use.
I observed these changes. Let me know if you have any concerns.
Thanks,
Venkatesh Dandu
This comment has been removed by the author.
ReplyDeleteHI Venkatesh , Any way to navigate to other page on this commandMenyItem without using taskflow.
ReplyDeleteMy menu moves along with the page. how to use the below class in css to stop it.
ReplyDelete.af_menu_scroll-box
Hi Rajesh,
DeleteMenu bar in rendered in popup.In this case popup position is relative so the content will move according to your browser scroll. If you want to be fixed you need to write jquery or js to add fixed positon to the popup.
check below jquery code to achieve your requirement.
ReplyDelete$('.yourMenuBar').click(function(){
$('.af_menu_child-container').css({'position':'fixed','top':'55px'});
$('.af_menu_child-container').parents().find('.AFPopupMenuPopup').css('position','fixed');
});
its not working i tried hard but it has no effect
ReplyDeleteIt should work.Tel me exact issue wt u r facing.
ReplyDeleteI am having Menu bar with menu and commandMenuItem in it,i want to achieve the active state commandMenuItem and menu but the backgroud color is getting change when i click other are of application...i want to show my active menu in menubar
ReplyDeleteAdd active class to the all commandmenu item.In respective jspx page just override that style class add like Internal style.
ReplyDeleteHi Venkatesh,
ReplyDeleteVery informative.
Is it possible to call the navigation item from inside the menu? Here is my scenario. It's parent child menu in oracle webcenter portal. I can build the hierarchy but the only issue is none of the parent nodes are navigable. Each tree is navigable only at lowest node.
Thanks in advance.
-- Bhoopathi