mobil görünümde açılır menüye geçiş etkisi vermek için

Question

Web sitemde açılır geçiş efektini kullanmayı denemek istiyorum.

transition: all 2s ease-in-out 

'u denemeyi denedim, ancak sonuç vermedi. Bazı geçiş efektleriyle mobil görünümde vurguluyken açılır menüyü göstermek istiyorum. Şu anda bazı bootstrap sınıfını kullanıyorum. İşte benim HTML dilimde için üzgün

   <!-- Brand and toggle get grouped for better mobile display --> 

        <div class="navbar-header pull-left"> 
         <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> --> 
         <a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/Schweizerisch-Japanische-Gesellschaft.png" class="img-responsive showabove"></a> 
        <a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/logomiddle.png" class="img-responsive showinbetween"></a> 
        <a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/logosmall.png" class="showless"></a> 

        </div> 
        <div class="navbar-header pull-right"> 
         <ul class="nav pull-left"> 
         <!-- <li class="navbar-text pull-left">User Name</li> --> 
         <li class="dropdown pull-right"> 
         <div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="#">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div>       </li> 
         </ul> 

         <!-- Required bootstrap placeholder for the collapsed menu --> 
         <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
        </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
        <div class="navbar-collapse navbar-right collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 21px;"> 


           <ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="#">Startseite</a></li> 
      <li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-580"><a href="#">Uber Uns</a> 
    <ul class="sub-menu"> 
<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="#">Ziel und Zweck</a> 
     <ul class="sub-menu"> 
    <li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226"><a href="#">testing</a></li> 
</ul> 
</li> 
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="#">Leitbild</a></li> 
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="#">Entstehungsgeschichte</a></li> 
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="#">Vorstand</a></li> 
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="#">Aktueller Jahresbericht</a></li> 
<li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217"><a href="#">Archiv Jahresberichte</a></li> 
</ul> 
</li> 
<li id="menu-item-581" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-581"><a href="#">Veranstaltungen</a> 
<ul class="sub-menu"> 
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="#">Jubiläum 2014</a></li> 
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href=#">Aktuelle Veranstaltungen</a></li> 
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="#">Vergangene Veranstaltungen</a></li> 
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="#">Fotogalerie</a></li> 
</ul> 
</li> 
<li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-582"><a href="#">Mitgliedschaft</a> 
<ul class="sub-menu"> 
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="#">Aufnahme-Bedingungen</a></li> 
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="#">Beitrittsgesuch</a></li> 
</ul> 
</li> 
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Varia</a></li> 
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="#">Links</a></li> 
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href=#">Kontakt</a></li> 
</ul>    
          </div> 

      </div> 

     </div> 

bu. Birisi, hangi sınıfta geçiş yapmam gerektiğini söyleyebilsin diye, açılırken ya da tıklama eylemindeyken açılır menüyü yapmak için bana bir şey söyleyebilir miyim? Aşağıda

denilen açılır sınıf için css sub-menu geçerli:

@media (max-width: 900px) 
    .navbar-nav ul { 
    position: static; 
    visibility: visible; 
    opacity: 1; 
    margin: 0; 
    background: none; 
    box-shadow: none; 
    display: none; 
    } 

@media (max-width: 900px) 
    .navbar-nav { 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    left: 0; width: 100%; 
    z-index: 10; 
    background: #f8f6f6; 
    overflow: visible; 
    } 

@media (max-width: 900px) 
    .navbar-nav li { 
    background: #fff; 
    position: static; 
    display: block; 
    float: none; 
    border: 0; 
    margin: 0; 
    border-bottom: 1px solid #fff; 
    border-top: 1px solid #999; 
    } 

Answer 1

önyükleme varsayılan olarak display:none olan açılır menüsünü ve vurgulu üzerinde o display:block ama css kuralına göre transition mülkiyet üzerinde çalışır gelmez verir olmasıdır saklanma durumunu göster.

Başka bir efektle kendi açılır menünüzü oluşturmalısınız veya bir eklenti kullanabilirsiniz.