in General Discussion by iceferret (3.2k points)
edited by iceferret
In case anyone is interested here is the css3 code i'm using to fade in drop down menus in a Joomla template. Works in Safari, I.E (10+), Firefox and Chrome. As long as the class is the same i imagine it will work in Wordpress and Drupal as well though I could be wrong. I find a 1 second (1s) delay works for me but of course it can be changed to suit. Cut and paste into the 'general-Css' in TT. Hope it's usefull.

 

/************Main menu animation, fade in from opacity 0-1 over 1 second*******/

ul.navbar-nav .dropdown-menu

 {

   animation-name: fadein ;
   animation-duration: 1s;

  -moz-animation-name: fadein; /* Firefox < 16 */
   -moz-animation-duration: 1s; /* Firefox < 16 */

   -webkit-animation: fadein ; /* Safari, Chrome and Opera > 12.1 */
   -webkit-animation-duration: 1s;/* Safari, Chrome and Opera > 12.1 *
   
   -ms-animation-name: fadein ; /* Internet Explorer */
   -ms-animation-duration: 1s; /* Internet Explorer */
   
   -o-animation-name: fadein; /* Opera < 12.1 */
   -o-animation-duration: 1s; /* Opera < 12.1 */
  
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/*******************end fade in animation*******************/

1 Answer

by james (5.3k points)
Hello,

Thanks for the information which you have shared with us.We appreciate you for doing this kind of work.
by iceferret (3.2k points)
Thanks James, I will add to this over time if thats OK? Could we have a section of the forum for useful code perhaps?
by james (5.3k points)
Its OK, you can share  your codes in General Discussion, that would be helpful to other users as well.
Interested in localizing/Translating TemplateToaster Software in your native language in exchange of a Pro License ? Contact Us
...