Wie Opencart-Dropdown-Menü zu animieren

Question

So arbeite ich an meinem E-Commerce mit Opencart und ich wollte das Dropdown-Menü mit einer Animation, eine einfache zeigen. Das Problem ist, dass ich den Übergang anwenden, aber es funktioniert nicht. Der Code Teil ist dies eine

.navbar-nav > li > .dropdown-menu { 
    margin-top: 0; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
} 

I usign Version 2.2

Answer 1

Wie .dropdown-menu hat display:none Stil in Bootstrap ist, können Sie es nicht mit reinem CSS animieren ohne zwingende, können Sie es auf diese Weise animieren:

.navbar-nav > li > .dropdown-menu { 
    display: block; /* Override the bootstrap display: none */ 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: opacity 0.3s ease; 
    -webkit-transition: opacity 0.3s ease; 
    visibility: hidden; 
} 
#menu .dropdown:hover .dropdown-menu { 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
} 

Ein weiteres Beispiel:

.navbar-nav > li > .dropdown-menu { 
    display: block; /* Override the bootstrap display: none */ 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    visibility: hidden; 
    top: 200%; 
} 
#menu .dropdown:hover .dropdown-menu { 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
    top: 100%; 
} 

Hinweis: Bearbeiten Sie keine Bootstrap-Dateien, fügen Sie den obigen Code am Ende des Stylesheets Ihres Themes hinzu: stylesheet.css