CSS Navbar transition on smugmug menu block

Etienne

Hi,

I would like to know if it exists example of CSS source to animate smug mug navbar menu.

More details :

I used a default smug mug block menu and already add CSS code to customize it ( I put the source code below). I already use transition like "transition: all 400ms ease-in-out;" ....

I would like to have more animated menu like this one :

http://www.creativejuiz.fr/blog/doc/menu-css3-dropdown-max-height.html

A lot of CSS source code example use "li" and "ul" because the menu was created with HTML.

The question is : how to adapt the CSS code with li, ul, ..... ( example : http://www.creativejuiz.fr/blog/tutoriels/menu-deroulant-css3-transition-max-height)

to a smug mug block navbar where I use this code : .sm-page-widget-nav-toplink, yui3-menu-children, yui3-menu-children, .yui3-menu-item .yui3-menu-label .......

I hope the question is understandable. Or perhaps you can help me to add code to have a animated dropdown menu bar like this :

http://www.frogweb.fr/menu-deroulant-horizontal/#menu-demo2




For instance, my CSS code for the menu :

---

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {

margin-right: 1px !important;
width: 100px;
}


.sm-page-widget-nav-toplink {
padding: 10px 0px 10px 0px; /* top right bottom left */
margin-bottom: 1px !important;

background: rgba(224,138,21,0.50);
opacity: 1;

transition: all 400ms ease-in-out;
}

.yui3-menu-children {
opacity: 0;
transition: opacity 0.40s ease-out;
}


.yui3-menu-open > .yui3-menu-children {
opacity: 1;
}



/* Turn the navbar background a different color when the mouse hovers over it */
.sm-page-widget-nav-toplink:hover {

display:block;
background: rgba(224,138,21,1);
opacity: 1;
}


/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage {

display:block;
background: rgba(224,138,21,1);
opacity: 1;

}

/* Make the parent menu nav bar text for the active page a different color */
.sm-page-widget-nav-hasactivepage {

display:block;
background: rgba(224,138,21,1);
opacity: 1;

}

.yui3-menu-children {
margin-top: 15px !important;
background: rgba(224,138,21,0.3) !important;

}

/* Bloc du sous menu */
.yui3-menu {
background: rgba(224,138,21,0);

}

/* Set the default navbar submenu background color and transition sous menu*/

.yui3-menu-item .yui3-menu-label {
background: rgba(224,138,21,0.3);
opacity: 1;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;

}


/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: rgba(224,138,21,0.7);

}


Thanks

Etienne