CSS3 animato scivolo/nascondere la navigazione di influenzare altri elementi

Question

mi piacerebbe avere una transizione animata regolare di 1 & 2, quando 1 viene attivato da visualizzare. L'ho realizzato qui: http://codepen.io/jacksonbeale/pen/epjcs utilizzando un margine superiore negativo, ma il problema è che l'altezza di 1 varierà a seconda del numero di elementi nella navigazione, quindi non funzionerà per me.

nav { 
    margin-top:-95px; 
    width:100%; 
    box-sizing:border-box; 
    z-index:5; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    &.showmenu { 
     margin-top:0; 
    } 
    } 

Il mio progetto attuale non mi permette di utilizzare jQuery, e qualsiasi js ha bisogno di essere scritto da un altro sviluppatore. Ho solo il controllo su html & css. Mi sembra di essere in esecuzione a questo problema un po 'quindi sarebbe bello se qualcuno potesse offrire un suggerimento su un metodo di css puro per realizzare ciò di cui ho bisogno.

Answer 1

Si potrebbe fare questo:

• Aggiungere un contenitore all'interno del menu e il contenuto
• Posizionare il contenuto assolutamente
• Poi, quando il contenitore ha solo l'altezza del menu (il contenuto è fuori di flusso con position:absolute;) è possibile utilizzare translateY per togggle il menu dentro e fuori con translateY(-100%)/translateY(0)

DEMO

HTML:

<div class="test"> 
    <div><span class="menulink">Menu</span></div> 
    <div class="content"> 
    <nav> 
     <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Three</li> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Three</li> 
     </ul> 
    </nav> 
    <div>content</div> 
    </div> 
</div> 

CSS: (mi dispiace non sono abituato a SCSS)

.test { 
    width:400px; 
    position:relative; 
    > div, nav { 
    border:3px solid #CCC; 
    } 
    > div:first-child { 
    height:30px; 
    z-index:10; 
    background:teal; 
    position:relative; 
    z-index:1; 
    span { 
     float:right; 
     display:table; 
     height:100%; 
     &:hover { 
     cursor:pointer; 
     } 
    } 
    } 
    nav { 
    width:100%; 
    box-sizing:border-box; 
    z-index:5; 
    &.showmenu { 
     margin-top:0; 
    } 
    } 
} 
.content > div{ 
    min-height:200px; 
    position:absolute; 
    left:-3px; top:100%; 
    width:100%; 
    border:3px solid #ccc; 
} 
.content{ 
    z-index:0; 
    transform: translateY(-100%); 
    -webkit-transform: translateY(-100%); 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
.content.showmenu{ 
    transform: translateY(0); 
    -webkit-transform: translateY(0); 
} 

jQuery:

$(".menulink").click(function() { 
    $(".content").toggleClass("showmenu"); 
}); 

Answer 2

Aggiungi questo codice nel tuo progetto.

jsfiddle Demo

Set stile css come questo.

<style> 
    .menu { 
     max-width: 500px; 
     background-color: #000; 
    } 
    .menu a{ 
     color: #fff; 
     text-decoration: none; 
    } 
.menu ul{ 
     padding:0px; 
     position:relative; 
     z-index:999;    
} 
    .menu > ul > li{ 
     display: inline;  
     position: relative; 
    } 
    .menu > ul > li a{ 
     display: inline-block; 
     padding: 8px 15px; 
    } 
    .menu li ul{ 
     top: 120%; 
     opacity: 0; 
     visibility: hidden; 
     position: absolute; 
     top: 0; 
     width:100%; 
     max-width: 150px; 
     transition: all 0.5s ease 0s; 
     -webkit-transition: all 0.5s ease 0s; 
     background-color: rgba(0, 0, 0, 0.8); 
    } 
    .menu li ul li{ 
     position: relative; 
     list-style: none; 
    }   
    .menu li:hover > ul{ 
      opacity:1; 
      visibility:visible; 
      top:100%; 
    } 
    .menu ul ul > li > ul{ 
     top: 0% !important; 
     left: 120%; 
    } 
    .menu ul ul li:hover > ul{ 
     left: 100%; 
    } 
.no-padding{ 
     padding-left: 0px; 
     padding-right: 0px; 
    } 

</style 

E impostare il codice HTML in questo modo.

<nav class="menu"> 
      <ul> 
       <li><a href="#">Home</a> 
        <ul> 
         <li><a href="#">Submenu</a></li> 
         <li><a href="#">Submenu</a></li> 
         <li><a href="#">Submenu</a></li> 
         <li><a href="#">Submenu</a> 
          <ul> 
           <li><a href="#">Submenu</a></li> 
           <li><a href="#">Submenu</a></li> 
           <li><a href="#">Submenu</a></li> 
           <li><a href="#">Submenu</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">contact</a></li> 
      </ul> 
    </nav>