Code: Animating Drop down Menu

Tired of usual menus? This is a new drop down menu for you. It is animating and the cells fly in and out. It makes your site more interesting and attractive.
<!-- this script got from www.cssfreecode.com -->

<!DOCTYPE html>
<html lang="en">
<head>
<style>
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F3F4F8;
}

ul.nav {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  max-width: 70%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: #907dda;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
ul.nav > li {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  height: 60px;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  line-height: 60px;
  letter-spacing: 1px;
  color: #e7e6f1;
  cursor: pointer;
}
ul.nav > li:hover {
  background: rgba(0, 0, 0, 0.1);
}
ul.nav > li:hover ul.dropdown {
  visibility: visible;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
  z-index: 0;
}
ul.nav > li:hover ul.dropdown > li {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
ul.nav > li:first-child {
  border-top-left-radius: 6px;
}
ul.nav > li:last-child {
  border-top-right-radius: 6px;
}

ul.dropdown {
  visibility: hidden;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  margin: 0;
  padding: 5px 0 30px;
  list-style: none;
  color: #333;
  background: #e5e4ea;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.15), 0px 4px 14px -1px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate(0, -60px);
          transform: translate(0, -60px);
  transition: opacity 0.2s, z-index 0s 0.2s, -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s;
  transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s, -webkit-transform 0.2s ease-out;
  opacity: 0;
  z-index: -1;
}
ul.dropdown > li {
  font-size: 14px;
  cursor: pointer;
}
ul.dropdown > li:hover {
  background: rgba(0, 0, 0, 0.06);
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate(-25%, 0);
            transform: translate(-25%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate(-25%, 0);
            transform: translate(-25%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<nav class="navbar">
<ul class="nav">
<li>
Home
<ul class="dropdown">
<li>M 1</li>
<li>M 2</li>
<li>M 3</li>
<li>M 4</li>
 <li>M 5</li>
<li>M 6</li>
</ul>
</li>
<li>
About
<ul class="dropdown">
<li>M 1</li>
<li>M 2</li>
<li>M 3</li>
<li>M 4</li>
<li>M 5</li>
<li>M 6</li>
<li>M 7</li>
<li>M 8</li>
<li>M 9</li>
</ul>
</li>
<!--
<li>
Pricing
<ul class="dropdown">
<li>M 1</li>
<li>M 2</li>
<li>M 3</li>
</ul>
</li>
<li>
Docs
<ul class="dropdown">
<li>M 1</li>
<li>M 2</li>
</ul>
</li>
-->
<li>
Contact
<ul class="dropdown">
<li>M 1</li>
<li>M 2</li>
<li>M 3</li>
<li>M 4</li>
<li>M 5</li>
</ul>
</li>
</ul>
</nav>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
;(function(){
	
	// Create Elements
	var videoLink = document.createElement('a');
	var videoInfo = document.createElement('div');
	var videoThumbnail = document.createElement('div');
	var videoTitle = document.createElement('div');
	var videoMeta = document.createElement('div');
	var videoCTA = document.createElement('div');
	var videoCTAText = document.createElement('div');
	var videoCTALogo = document.createElement('div');
	var youtubeLogo = '<svg class="youtube-logo" enable-background="new 0 0 128 128" height="128px" id="Layer_1" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle cx="64" cy="64" fill="#CC191E" r="64"/></g><path d="M103.201,48.004c0,0-0.781-5.513-3.18-7.939c-3.043-3.187-6.453-3.203-8.016-3.389  c-11.191-0.81-27.988-0.81-27.988-0.81h-0.036c0,0-16.795,0-27.988,0.81c-1.564,0.186-4.972,0.201-8.015,3.389  c-2.399,2.426-3.18,7.939-3.18,7.939S24,54.478,24,60.953v6.071c0,6.471,0.799,12.947,0.799,12.947s0.781,5.51,3.18,7.938  c3.044,3.189,7.041,3.088,8.82,3.422c6.401,0.615,27.202,0.805,27.202,0.805s16.81-0.025,28.005-0.834  c1.564-0.188,4.975-0.203,8.016-3.391c2.4-2.43,3.182-7.939,3.182-7.939S104,73.496,104,67.023v-6.071  C104,54.478,103.201,48.004,103.201,48.004 M54.729,75.428l-0.003-24.581l23.637,12.332L54.729,75.428z" fill="#FFFFFF"/></svg>';
	
	// Return Video URL from Meta Tag
	function getVideoURL() { 
		 var metas = document.getElementsByTagName('meta'); 

		 for (var i=0; i<metas.length; i++) { 
				if (metas[i].getAttribute("property") == "video-url") { 
					 return metas[i].getAttribute("content"); 
				} 
		 } 

			return "";
	}	

	// Return Video Title from Meta Tag
	function getVideoTitle() { 
		 var metas = document.getElementsByTagName('meta'); 

		 for (var i=0; i<metas.length; i++) { 
				if (metas[i].getAttribute("property") == "video-title") { 
					 return metas[i].getAttribute("content"); 
				} 
		 } 

			return "";
	}	
	
	// Return Video URL from Meta Tag
	function getVideoThumbail() { 
		 var metas = document.getElementsByTagName('meta'); 

		 for (var i=0; i<metas.length; i++) { 
				if (metas[i].getAttribute("property") == "video-thumbnail") { 
					 return metas[i].getAttribute("content"); 
				} 
		 } 

			return "";
	}	
	
	// Return Video Meta from Meta Tag
	function getVideoMeta() { 
		 var metas = document.getElementsByTagName('meta'); 

		 for (var i=0; i<metas.length; i++) { 
				if (metas[i].getAttribute("property") == "video-meta") { 
					 return metas[i].getAttribute("content"); 
				} 
		 } 

			return "";
	}
	
	// Return Video CTA from Meta Tag
	function getVideoCTA() { 
		 var metas = document.getElementsByTagName('meta'); 

		 for (var i=0; i<metas.length; i++) { 
				if (metas[i].getAttribute("property") == "video-cta") { 
					 return metas[i].getAttribute("content"); 
				} 
		 } 

			return "";
	}	
	
	
})();	
</script>
<script >
      $(document).ready(function () {

  // Loop through each nav item
  $('nav.navbar').children('ul.nav').children('li').each(function (indexCount) {

    // loop through each dropdown, count children and apply a animation delay based on their index value
    $(this).children('ul.dropdown').children('li').each(function (index) {

      // Turn the index value into a reasonable animation delay
      var delay = 0.1 + index * 0.03;

      // Apply the animation delay
      $(this).css("animation-delay", delay + "s");
    });
  });
});

    </script>

</body>
</html>

<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>
If you don't know how to use this code or need more information Click here!

	You can leave comments once you sign in/up.
CSS Best Codes

Code: Animating Drop down Menu

You can leave comments once you sign in/up.

Links
