CSS 3 ożywione poślizg/ukryć nawigacyjnego wpływać na inne elementy

Question

Chciałbym mają gładkie przejście animowany 1 & 2, po 1 uruchamia się w celu wyświetlenia. Osiągnąłem to tutaj: http://codepen.io/jacksonbeale/pen/epjcs używając ujemnego górnego marginesu, ale problem polega na tym, że wysokość 1 będzie się różnić w zależności od liczby elementów w nawigacji, więc to nie będzie działać dla mnie.

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; 
    } 
    } 

Mój obecny projekt nie pozwala mi używać jQuery, a każdy js musi być napisany przez innego programistę. Mam tylko kontrolę nad html & css. Wydaje mi się, że trochę biegłbym w tej kwestii, więc byłoby wspaniale, gdyby ktoś mógł zaoferować sugestię na temat czystej metody css, aby osiągnąć to, czego potrzebuję.

Answer 1

Można to zrobić:

• Dodaj pojemnik po menu i treści
• Pozycja treść absolutnie
• Potem, gdy pojemnik ma tylko wysokość menu (zawartość jest obecnie przepływu z position:absolute;) można użyć translateY do togggle menu i wyjść z 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: (przepraszam nie jestem przyzwyczajony do 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

Dodaj ten kod do swojego projektu.

jsfiddle Demo

Set css styl tak.

<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 

I ustaw kod HTML w ten sposób.

<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>