Menu Navigasi Melayang Efek Slide Dengan CSS

Berbicara Menu navigasi Memang tidak ada habisnya . Seperti yang sudah saya ulas sebelumnya yaitu Membuat Floating Menu di Samping Blog dan Cara Membuat Floating Menu/Fixed Menu di Blog.

Untuk kali ini Menu Navigasi Melayang Efek Slide yang akan kita ulas tercipta dari properti CSS, Menu Navigasi ini dilengkapi dengan fitur Slide ketika cursor berada diatas link dan Menu Navigasi ini juga dilengkapi dengan Font Awesome menjadikan tampilan lebih keren.

Karena menu navigasi ini diciptakan menggunakan properti CSS, tentunya tidak membuat loading Blog menjadi berat. Bagaimana Anda tertarik ingin memasangnya di Blog, yuk langsung saja berikut ini langkah-langkahnya :

Demo   CODE

Silahkan Anda menuju Editor Template, kemudian Anda dengan menggunakan CTRL+F Anda cari kode ]]></b:skin>., kemudian Anda salin kode dibawah ini dan pasangkan diatasnya.

/*Menu Navigasi Melayang Efek Slide*/
.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  padding: .4em 0;
  background: #7D294E;
  color: white;
  text-align: center;
  /* Remove 4px gap between
<li> */
font-size: 0;
}
.drawer li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
line-height: 100%;
-webkit-transform: translateZ(0);
}
.drawer a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
/* Reset font-size */
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.3s;
}
.drawer a:active, .drawer a:focus {
background: #B44659;
}
.drawer i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.drawer span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.drawer li:hover ul {
/* Open the fly-out menu */
-webkit-transform: translateX(0);
background: #B44659;
/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
display: block;
/* Add a shadow to the top-level link */
/* Show the shadow when the link is hovered over */
/* Fly out menus */
}
.drawer > li > a {
background: #7D294E;
}
.drawer > li:hover {
z-index: 100;
}
.drawer > li:hover a {
background: #B44659;
}
.drawer > li a:hover {
background: #F56356;
}
.drawer > li > a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
transition: opacity 0.5s;
}
.drawer > li:hover a:after {
opacity: 1;
}
.drawer > li ul {
position: absolute;
/* Stack below the top level */
z-index: -1;
top: 0;
left: 100%;
height: 100%;
width: auto;
white-space: nowrap;
/* Close the menus */
-webkit-transform: translateX(-100%);
background: #B44659;
transition: 0.5s -webkit-transform;
}

/*Not required for demo*/
@-webkit-keyframes circle {
50% {
-webkit-transform: scale(1.26923);
}
}
@-webkit-keyframes initials {
50% {
-webkit-transform: translateY(-8px) translateZ(0);
}
}
.ild-ident {
position: absolute;
right: 20px;
bottom: 20px;
}
.ild-ident svg {
overflow: visible;
-webkit-transform: translateZ(0);
}
.ild-ident svg .circle-holder {
-webkit-transform: translate(-7px, -7px);
}
.ild-ident svg .circle {
-webkit-transform: translate(7px, 7px);
fill: #7D294E;
}
.ild-ident svg.active .i {
-webkit-animation: initials .4s ease-in-out;
}
.ild-ident svg.active .l {
-webkit-animation: initials .4s .2s ease-in-out;
}
.ild-ident svg.active .circle {
-webkit-animation: circle .5s .1s ease-in-out;
}

Lalu Anda cari kode <b:skin><![CDATA[ kemudian copy kode dibawah ini dan terapkan diatasnya

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Selanjutnya Anda cari kode <div id='main-wrapper'>, kemudian Anda pasangkan kode dibawah ini dibawahnya atau sesudahnya.

<ul class="drawer">
<li>
<a href="#">
<i class="fa fa-info-circle"></i>
Info
</a>
<ul>
<li>
<a href="#"" target="_blank">
<i class="fa fa-folder-open"></i>
Portfolio
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-question-circle"></i>
About
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-phone-square"></i>
Contact
</a>
</li>
</ul>
</li>
<li>
<a href="#"">
<i class="fa fa-folder"></i>
Projects
</a>
<ul>
<li>
<a href="#"" target="_blank">
<i class="fa fa-flash"></i>
Hover.css
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-ellipsis-h"></i>
Sequence.js
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-dot-circle-o"></i>
jQuery Parallax
</a>
</li>
</ul>
</li>
<li>
<a href="#"">
<i class="fa fa-share-alt"></i>
Social
</a>
<ul>
<li>
<a href="#"" target="_blank">
<i class="fa fa-google-plus-square"></i>
CodePen
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-twitter"></i>
Twitter
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-github"></i>
GitHub
</a>
</li>
<li>
<a href="#"" target="_blank">
<i class="fa fa-globe"></i>
Web
</a>
</li>
</ul>
</li>
</ul>

Semoga bermanfaat!