3d Menu Bar Dengan Effect Css 100% Responsive

3d Menu Bar Dengan Effect Css 100% Responsive

Untuk menggunakan 3d Menu Bar Dengan Effect Css pastikan blog sobat belum memiliki jenis menu seperti apapun sebelumnya atau menu sebelumnya dapat dihapus terlebih dahulu untuk pemasangan jenis menu ini.
Cara Membuat Awesome 3d Menu Dengan Effect Css dan Responsive
Step : 1 Link jQuery
Link jquery berikut diletakan di atas </head> template
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script charset='utf-8' src='https://googledrive.com/host/0B_hteeh9PGFiWTNsbW1LU2NsSnM' type='text/javascript'/>
Step : 2 Css
Kode Css berikut diletakan di bawah ]]></b:skin> template atau juga boleh di atas </head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none;}
#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}
#cssmenu > ul {background: #3db2e1;}
#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}
#cssmenu.align-center > ul {font-size: 0;text-align: center;}
#cssmenu.align-center > ul > li {display: inline-block;float: none;}
#cssmenu.align-right > ul > li {float: right;}
#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;
  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);
  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before { background: #3db2e1;}
#cssmenu.small-screen {width: 100%;}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}
#cssmenu.small-screen #menu-button:after {
  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}
</style>
Step : 3 Penerapan HTML
Kode berikut di letakan dibawah </head> template
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
Terakhir simpan template blog sobat dan cek hasilnya.