Tuesday 21 April 2015

ADF Menu | MenuBar | commandMenuItem Skinning

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.
  
download
Reach me if you have any doubts.

16 comments:

  1. Good informative blog venkat ... Thanks for sharing the info....

    ReplyDelete
  2. Good informative blog venkat ... Thanks for sharing the info....

    ReplyDelete
  3. Hello 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?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. HI Alican,

      I 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

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. HI Venkatesh , Any way to navigate to other page on this commandMenyItem without using taskflow.

    ReplyDelete
  6. My menu moves along with the page. how to use the below class in css to stop it.

    .af_menu_scroll-box

    ReplyDelete
    Replies
    1. Hi Rajesh,

      Menu 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.

      Delete
  7. check below jquery code to achieve your requirement.
    $('.yourMenuBar').click(function(){
    $('.af_menu_child-container').css({'position':'fixed','top':'55px'});
    $('.af_menu_child-container').parents().find('.AFPopupMenuPopup').css('position','fixed');
    });

    ReplyDelete
  8. its not working i tried hard but it has no effect

    ReplyDelete
  9. It should work.Tel me exact issue wt u r facing.

    ReplyDelete
  10. I 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

    ReplyDelete
  11. Add active class to the all commandmenu item.In respective jspx page just override that style class add like Internal style.

    ReplyDelete
  12. Hi Venkatesh,

    Very 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

    ReplyDelete