1クリックでボトムnavbarの表示/非表示 - CSS

Question

私の携帯電話の画面では、メインコンテンツの一番下に、タイトルがついたナビゲーションバーがあります。

私はタイトルをタッチすると、遷移をアニメーション化して隠れたdiv全体を表示したいと思います。

タイトルをもう一度クリックすると、最初の位置に戻るようにアニメートされます。

私はアニメーションなしでjQueryを使って最初の部分のみを処理しました。 完全なCSSの提案がある場合は、私も興味があります。

$('.open-nav').click(function() { 
 
    $('.navbar-bottom').css('bottom', '0'); 
 
});

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    height: 100vh; 
 
} 
 
.open-nav { 
 
    cursor: pointer; 
 
} 
 
.navbar-bottom { 
 
    height: 158px; 
 
    background-color: yellow; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: fixed; 
 
    bottom: -112px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <p>WHAT OFFER ?</p> 
 
    
 
    
 
    <nav class="navbar-bottom"> 
 
    <div class="open-nav"> 
 
     <h3>DO AN OFFER</h3> 
 
    </div> 
 
    <div class="nav-content"> 
 
     <ul> 
 
      <li> 
 
       <a href="#">OFFER HIM</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">OFFER YOU</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">OFFER THEM</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">OFFER THAT</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
<div>

Answer 1

使用toggleClass()アニメーション

$('.open-nav').click(function() { 
 
    $('.navbar-bottom').toggleClass("opened"); 
 
});

.container { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    height: 100vh; 
 
} 
 

 
.open-nav { 
 
    cursor: pointer; 
 
} 
 

 
.navbar-bottom { 
 
    height: 158px; 
 
    background-color: yellow; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: fixed; 
 
    bottom: -112px; 
 
    width: 200px; 
 
    transition: all .5s; 
 
} 
 

 
.opened { 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <p>WHAT OFFER ?</p> 
 

 

 
    <nav class="navbar-bottom"> 
 
    <div class="open-nav"> 
 
     <h3>DO AN OFFER</h3> 
 
    </div> 
 
    <div class="nav-content"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">OFFER HIM</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">OFFER YOU</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">OFFER THEM</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">OFFER THAT</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <div>