Pure CSS3 Fancy Menu

In this example below you will see how to do a Pure CSS3 Fancy Menu with some HTML / CSS and Javascript

Besides menus, there are other interface elements you can create using only CSS, e.g. modals. These CSS modals do not require JavaScript, and are compatible back to Internet Explorer 8. They adapt to the screen size and look great on mobile devices unlike most “lightbox” or modal plugins you find out there.

Thumbnail
This awesome code was written by taqiniazi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright taqiniazi ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pure CSS3 Fancy Menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--

Created by TAQI RAZA KHAN
Phone: +92-345-7372343
Website: http://www.taqirazakhan.com
Facebook: https://www.facebook.com/taqiniazi
Twitter: https://www.twitter.com/taqiniazi

-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="fancy_menu-wrap">
	<h1 class="center-text">Pure CSS3 Fancy Menu</h1>
	<nav class="menu">  
		<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
		<label class="menu-open-button" for="menu-open">
			<span class="fancy_menu fancy_menu-1"></span>
			<span class="fancy_menu fancy_menu-2"></span>
			<span class="fancy_menu fancy_menu-3"></span>
		</label>    
		<a href="#" class="menu-item"> <i class="fa fa-th"></i> </a>
		<a href="#" class="menu-item"> <i class="fa fa-user"></i> </a>
		<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
		<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
		<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
	</nav>
	<!-- filters -->
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<defs>
			<filter id="shadowed-goo">
				<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
				<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
				<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
				<feOffset in="shadow" dx="1" dy="1" result="shadow" />
				<feBlend in2="shadow" in="goo" result="goo" />
				<feBlend in2="goo" in="SourceGraphic" result="mix" />
			</filter>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
				<feBlend in2="goo" in="SourceGraphic" result="mix" />
			</filter>
		</defs>
	</svg>
	
	<p class="back center-text"> <a href="http://www.taqirazakhan.com" > Back to Portfolio </a></div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/taqiniazi/pure-css3-fancy-menu-RpMBjm */
/*
Created by TAQI RAZA KHAN
Phone: +92-345-7372343
Website: http://www.taqirazakhan.com
Facebook: https://www.facebook.com/taqiniazi
Twitter: https://www.twitter.com/taqiniazi
*/

.fancy_menu-wrap{
	width: 500px;
	margin:30px auto;
	padding: 30px 0;
	border: 1px dashed #f5f5f5;
	overflow:hidden;
}

.text-center{
	text-align: center;
}

body {
  background: teal;
  color: white;
  text-align: center;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  margin-bottom: 10px;
  margin-top: 10px;
}

h1 {
  font-size: 3em;
}

.menu {
  -webkit-filter: url("#shadowed-goo");
          filter: url("#shadowed-goo");
}

.menu-item, .menu-open-button {
  background: firebrick;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: white;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.fancy_menu {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.fancy_menu-1 {
  -webkit-transform: translate3d(0, -8px, 0);
          transform: translate3d(0, -8px, 0);
}

.fancy_menu-2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.fancy_menu-3 {
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .fancy_menu-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
          transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .fancy_menu-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
          transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .fancy_menu-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
          transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  position: absolute;
  left: 50%;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;
  width: 380px;
  height: 250px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item:hover {
  background: white;
  color: #ff4081;
}
.menu-item:nth-child(3) {
  -webkit-transition-duration: 70ms;
          transition-duration: 70ms;
}
.menu-item:nth-child(4) {
  -webkit-transition-duration: 130ms;
          transition-duration: 130ms;
}
.menu-item:nth-child(5) {
  -webkit-transition-duration: 190ms;
          transition-duration: 190ms;
}
.menu-item:nth-child(6) {
  -webkit-transition-duration: 250ms;
          transition-duration: 250ms;
}
.menu-item:nth-child(7) {
  -webkit-transition-duration: 310ms;
          transition-duration: 310ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
          transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
          transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
  -webkit-transition-duration: 160ms;
          transition-duration: 160ms;
  -webkit-transform: translate3d(114.42548px, 11.48084px, 0);
          transform: translate3d(114.42548px, 11.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  -webkit-transition-duration: 240ms;
          transition-duration: 240ms;
  -webkit-transform: translate3d(77.18543px, 85.2491px, 0);
          transform: translate3d(77.18543px, 85.2491px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  -webkit-transition-duration: 320ms;
          transition-duration: 320ms;
  -webkit-transform: translate3d(0.09158px, 114.99996px, 0);
          transform: translate3d(0.09158px, 114.99996px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
          transform: translate3d(-77.04956px, 85.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  -webkit-transition-duration: 480ms;
          transition-duration: 480ms;
  -webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
          transform: translate3d(-114.40705px, 11.66307px, 0);
}
.fa{
	margin-top:30px;
}

.back{
	margin-top: 90px;
	font-size: 20px;
	font-weight: bold;
	border-top: 1px dashed #f5f5f5;
	overflow:hidden;
	padding: 20px 0 0;
}
.back a{
	text-decoration: none;
	color: #f5f5f5;
	border:1px dashed #f5f5f5;
	padding: 10px;
	display: inline-block;

}

/*Downloaded from https://www.codeseek.co/taqiniazi/pure-css3-fancy-menu-RpMBjm */
/*
Created by TAQI RAZA KHAN
Phone: +92-345-7372343
Website: http://www.taqirazakhan.com
Facebook: https://www.facebook.com/taqiniazi
Twitter: https://www.twitter.com/taqiniazi
*/

Comments