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.