Dropdown CSS animation examples.

dropdown-css-animation-examples.markdown

Dropdown CSS animation examples.

Learning to make dropdown menus and use for loops in Jade and Sass, with the excellent Dev Tips on Youtube. https://www.youtube.com/user/DevTipsForDesigners

A Pen by Ed Southgate on CodePen.

License.

index.jade

.container
  .nav
    ul
      - for(x = 1; x < 5; x++)
        li STYLE #{x}
          ul(class="drop-menu menu-#{x}")
            li ONE
            li TWO
            li THREE
            li FOUR
            li FIVE
            li SIX
            
.container
  .nav
    ul
      - for(x = 5; x < 9; x++)
        li STYLE #{x}
          ul(class="drop-menu menu-#{x}")
            li ONE
            li TWO
            li THREE
            li FOUR
            li FIVE
            li SIX
            
        
      

style.sass

html, body
  padding: 0
  margin: 0
  background-color: #555
  font-family: sans-serif

ul
  list-style: none  

.container
  background-color: #fff
  width: 600px
  height: 450px
  margin: 50px auto
  border: 1px solid #333
  border-radius: 4px
  position: relative
  
.nav
  display: inline-block
  padding: 50px
  text-align: center
  margin: 0px 10px
  position: absolute
  li:hover
    background: #3B95C4 + 20
  
  > ul
    list-style: none
    padding: 0
    margin: 0
    display: inline-block
    background: #3B95C4
    border-radius: 5px
    color: rgba(255,255,255,0.7)
    
    > li
      float: left
      width: 120px
      height: 50px
      line-height: 50px
      position: relative
      font-size: 14px
      cursor: pointer
      
ul.drop-menu
  position: absolute
  top: 100%
  left: 0%
  width: 100%
  padding: 0
  
  li
    background: #3B95C4 - 10
    &:hover
      background: #3B95C4 + 10
    &:first-child
      border-radius: 2px 2px 0 0
    &:last-child
      border-radius: 0 0 5px 5px
    
ul.drop-menu li
  display: none
  
li:hover > ul.drop-menu li
  display: block

// Menu 1 ------------------------

li:hover > ul.drop-menu.menu-1 
  perspective: 1000px
  li
    transform-origin: top left
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-1
          duration: 300ms
          delay: (150ms * $i) - 300ms
          fill-mode: forwards
          timing-function: ease-in-out
        

  
  @keyframes menu-1
    0%
      opacity: 0
      transform: rotateZ(90deg)
    70%
      transform: skewX(10deg)
    100%
      opacity: 1
      transform: rotateZ(0deg)
    
// Menu 2 ------------------------

li:hover > ul.drop-menu.menu-2 
  perspective: 1000px
  li
    transform-origin: top center
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-2
          duration: 300ms
          delay: (150ms * $i) - 300
          fill-mode: forwards
          timing-function: ease-in-out
        

  
  @keyframes menu-2
    0%
      opacity: 0
      transform: rotateX(-90deg)
    
    50%
      transform: rotateX(20deg)
    
    100%
      opacity: 1
      transform: rotateX(0deg)
    
    
// Menu 3 ------------------------

li:hover > ul.drop-menu.menu-3 
  perspective: 1000px
  li
    transform-origin: top center
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-3
          duration: 300ms
          delay: (150ms * $i) - 300
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-3
    0%
      opacity: 0
      transform: rotateY(90deg)

    70%
      transform: rotateY(-10deg)

    100%
      opacity: 1
      transform: rotateY(0deg)

// Menu 4 ------------------------

li:hover > ul.drop-menu.menu-4 
  perspective: 1000px
  li
    transform-origin: top center
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-4
          delay: (150ms * $i) - 300
          duration: 300ms
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-4
    0%
      opacity: 0
      transform: translateX(-100px)
    
    70%
      transform: translateX(20px)
    100%
      opacity: 1
      transform: translateX(0px)
    
// Menu 5 ------------------------

li:hover > ul.drop-menu.menu-5 
  perspective: 1000px
  li
    transform-origin: top center
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-5
          duration: (300ms * $i) / 2
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-5
    0%
      opacity: 0
      transform: scale(0)
    50%
      opacity: 1
    90%
      transform: scale(1.1)
    100%
      transform: scale(1)
      opacity: 1
    
// Menu 6 ------------------------

li:hover > ul.drop-menu.menu-6 
  perspective: 1000px
  li
    transform-origin: top right
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-6
          delay: (150ms * $i) - 300ms
          duration: 300ms
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-6
    0%
      opacity: 0
      margin-top: 50px
      transform: rotate(-45deg)

    90%
      margin-top: -10px
      transform: rotate(0deg)
    100%
      opacity: 1
      margin-top: 0px

// Menu 7 ------------------------

li:hover > ul.drop-menu.menu-7 
  perspective: 1000px
  li
    transform-origin: top left
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-7
          delay: (150ms * $i) - 300ms
          duration: 600ms
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-7
    0%
      opacity: 0
      transform: rotateY(90deg)
      margin-top: -100px

    80%
      margin-top: 0px
      transform: rotateY(90deg)
    90% 
      transform: rotateY(-10deg)
      margin-top: 5px
    100%
      opacity: 1
      margin-top: 0px
      transform: rotateY(0deg)
 
// Menu 8 ------------------------

li:hover > ul.drop-menu.menu-8 
  perspective: 1000px
  li
    transform-origin: top left
    opacity: 0
    @for $i from 1 through 6
      &:nth-child(#{$i})
        animation:
          name: menu-8
          delay: (150ms * $i) / 2
          duration: 300ms
          fill-mode: forwards
          timing-function: ease-in-out



  @keyframes menu-8
    0%
      opacity: 0
      transform: skewX(45deg) skewY(-45deg)
    80%
      transform: skewX(-10) skewY(-10)
    100%
      opacity: 1
      transform: skewX(0deg) skewY(0deg)