Advance ADF UI DVT Component With 3d Menubar

Today i will discus the updated and professional menues using css3 and adf faces componenet these menues have 3d look and they are retrieving from databases
 So i would believe that it will be Very Useful for U people

These are Three D menues and Having Unique Look
u can also see the use of dvt Component of adf
Steps To Create Home Page
1)I create a template Page
2)The menues are on the Template Page
3)create adf skins for whole page
4)define the designing of every componenet
like panel splitter,panel stretch layout,menubar etc
so the code for advance menu bar in adf skin is like that
af|menu::bar-item-open-icon-style {
    background-image: url("/images/select-arrow.png");
    height: 20px;
    width: 20px;
    padding-top: 2px;
}

af|menu::bar-item-text {
 
    font-size: 16px;
 font-family: Rambla ;
line-height: 1em;
color:white;
text-shadow:0px 0px 0 rgb(202,202,202),-1px 1px 0 rgb(158,158,158), -2px 2px 0 rgb(115,115,115),-3px 3px 2px rgba(0,0,0,0.6),-3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);}

}

af|menu::bar-item-text:hover {
    font-size: 17px;
 font-family: Rambla ;
line-height: 1em;
color:white;
text-shadow:0px 0px 0 rgb(202,202,202),-1px 1px 0 rgb(158,158,158), -2px 2px 0 rgb(115,115,115),-3px 3px 2px rgba(0,0,0,0.6),-3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);}
    -webkit-transition: all 2s;
    background-color:white;
}

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: Rambla ;
line-height: 1em;
color:white;
    font-size: 14px;
text-shadow:0px 0px 0 rgb(202,202,202),-1px 1px 0 rgb(158,158,158),
-2px 2px 0 rgb(115,115,115),-3px 3px 2px rgba(0,0,0,0.6),-3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
    height: 20px;
    width: 200px;
}
af|menu::child-container
{
    background-color: #006ba5;
    min-width: 150px;
    border-top: none;
}
af|commandMenuItem::menu-item-text:hover {

    background-color: #003152 !important;
}
af|commandMenuItem::menu-item-text:active {
     background-color: #006ba5;
}
af|commandMenuItem::menu-item-icon-style {
    display: none;
}

af|commandMenuItem::menu-item-open-indicator {
    display: none;
}

af|commandMenuItem::menu-item-accelerator {
    display: none;
}

next topic i will discuss how we can use adf faces component

Hope It will be very useful for Your Adf  Designing Phase
thanx
Mushtaq Wattu