Adding Vertical Slide Animation to Navigation Bar - CSS ONLY

Question

I have been challenged by my mentor to add vertical, slide animation to my nav bar in my sandbox-type project USING ONLY CSS & HTML. I have tried countless things at this point and need some help -- at the very least some direction. I have tried: several animation names, transform and translate3d, shifting elements on their axis & rotating, etc.

.collapsible-menu label {
    font-family: 'Chiller';
    font-size: 70px;
    display: block;
    cursor: pointer;
    background: url(C:/Users/audre/workspace/basic/assets/menu.png) no-repeat left center;
    background-size: 15%;
    padding: 10px 0px 0px 50px;
}

input#menu {
    display: none;
}

.menu-content {
    max-height: 0;
    font-family: 'Oswald', sans-serif; 
    padding: 0 0 0 50px;
    animation: 3s linear running slidein;
}

/* Toggle Effect */
input:checked +label {
    background-image: url(C:/Users/audre/workspace/basic/assets/cancel.png);  
}

input:checked ~ .menu-content {
    max-height: 100%;
}
/*Icons made by https://www.flaticon.com/authors/cole-bemis from www.flaticon.com/ */

.collapsible-menu {
    background-color: rgb(255, 255, 255);
    padding: 0px 30px;
    width: 200px;
    border-bottom: 3px solid #490000;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    z-index: 5;
}

.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}

.collapsible-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

 <div class="collapsible-menu">
        <input type="checkbox" id="menu">
        <label for="menu">Menu</label>
        <nav class="menu-content">
            <ul>
                <li><a class="active" href="#home"></a>Home</li>
                <li><a href="./about.html" target="_blank"></a>About Audrey</li>
                <li><a href="#shop"></a>Shop</li>
                <li><a href="#contact"></a>Contact</li>
            </ul>
        </nav>
    </div>

Any help or tips are greatly appreciated! I'm a little bit at a loss here.

What I have tried (cliffnotes version):

@keyframes definition for a "slidein" rule
transition declaration with various adjustments/toying around with
animation declaration with various adjustments/toying around with

EDITS/UPDATES:

Edited code to be the minimal reproducible example
Cleaned up code of unnecessary declarations
Added summary of what I have tried thus far

could paste here your html code too? – Nbody Nov 03 '20 at 05:17 — Nbody, Nov 03 '20 at 05:17
@ThomasRyan - pasted! Thanks – audreywrong Nov 03 '20 at 20:41 — audreywrong, Nov 03 '20 at 20:41

score 2 · Accepted Answer · answered Nov 04 '20 at 18:50

Here's another question with some useful information that can help inform an answer.

I also found this article helpful.

The below snippet is one way to solve your issue. I would point out two key issues with the prior implementation:

It was trying to use a CSS animation called slideIn, but the animation was not defined.
When using transition instead of animation on the max-height property, at least for me, a destination value of max-height: 100%; did not work. I had to specify it in pixels.

.collapsible-menu label {
  display: block;
  cursor: pointer;
}

input#menu {
  display: none;
}

.menu-content {
  max-height: 0;
  overflow-y: hidden;
}

input:checked~.menu-content {
  max-height: 1000px;
  transition: max-height 5s linear;
}

.collapsible-menu {
  width: 200px;
  border-bottom: 3px solid #490000;
}

.collapsible-menu ul {
  list-style-type: none;
  padding: 0;
}

.collapsible-menu a {
  display: block;
}

<div class="collapsible-menu">
  <input type="checkbox" id="menu">
  <label for="menu">Menu</label>
  <nav class="menu-content">
    <ul>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
    </ul>
  </nav>
</div>

Adding Vertical Slide Animation to Navigation Bar - CSS ONLY

1 Answers1