Navigation Bar

by David Kyle

HTML

<!DOCTYPE HTML>
<html>
<head>
  <title>Navigation Bar</title>
  <meta charset="UTF-8">
</head>
<body>
  <div class="navigation-bar-container">
     <ul class="navigation-bar-list">
     <li class="navigation-bar-item">Home</li>
      <li class="navigation-bar-item">About</li>
      <li class="navigation-bar-item">Contact</li>
      <li class="navigation-bar-item">Cart</li>
    </ul>  
  </div>
</body>
</html>

CSS

.navigation-bar-container {
}

.navigation-bar-list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: darkgrey;
  
  box-shadow: 3px 3px 5px 6px #bbb;
}

.navigation-bar-item {
  float: left;
  margin: 0px;
  padding: 16px;
  transition: all .8s 0s cubic-bezier(.33, .66, .4, .84);
  cursor: pointer;
  
}

.navigation-bar-item:hover {
  background-color: lightgrey;
  transition: all .8s 0s cubic-bezier(.33, .66, .4, .84);
  animation: nav-hover .5s 0s;
}

@keyframes nav-hover {
    0% {
        color: white;
    }

    8% {
        color: #000000 !important;
    }

    15% {
        color: #000000 !important;
        background-color: rgba(255, 255, 255, .6);
    }

    25% {
        color: #565656 !important;
    }
    
    50% {
      background-color: rgba(200, 200, 200, .9);
    }

    100% {
        color: black;
    }
}