Menu Navigasi Melayang Pengaruh Slide Dengan Css

Berbicara Menu navigasi Memang tidak ada habisnya . Seperti yang sudah aku 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 dikala cursor berada diatas link dan Menu Navigasi ini juga dilengkapi dengan Font Awesome mengakibatkan tampilan lebih keren.

Demo   CODE

Silahkan Anda menuju Editor Template, lalu Anda dengan memakai CTRL+F Anda cari isyarat ]]></b:skin>., lalu Anda salin isyarat 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 hidangan */
-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 isyarat <b:skin><![CDATA[ lalu copy isyarat 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'>, lalu Anda pasangkan isyarat 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!

Share this post