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 saat cursor berada diatas link dan Menu Navigasi ini juga dilengkapi dengan Font Awesome menimbulkan tampilan lebih keren.
Karena hidangan navigasi ini diciptakan memakai properti CSS, tentunya tidak menciptakan loading Blog menjadi berat. Bagaimana Anda tertarik ingin memasangnya di Blog, yuk pribadi saja berikut ini langkah-langkahnya :
Silahkan Anda menuju Editor Template, lalu Anda dengan memakai CTRL+F Anda cari instruksi ]]></b:skin>., lalu Anda salin instruksi dibawah ini dan pasangkan diatasnya.
Lalu Anda cari instruksi <b:skin><![CDATA[ lalu copy instruksi dibawah ini dan terapkan diatasnya
Selanjutnya Anda cari kode <div id='main-wrapper'>, lalu Anda pasangkan instruksi dibawah ini dibawahnya atau sesudahnya.
Semoga bermanfaat!
Sumber http://www.websiteedukasi.com/
Untuk kali ini Menu Navigasi Melayang Efek Slide yang akan kita ulas tercipta dari properti CSS, Menu Navigasi ini dilengkapi dengan fitur Slide saat cursor berada diatas link dan Menu Navigasi ini juga dilengkapi dengan Font Awesome menimbulkan tampilan lebih keren.
Karena hidangan navigasi ini diciptakan memakai properti CSS, tentunya tidak menciptakan loading Blog menjadi berat. Bagaimana Anda tertarik ingin memasangnya di Blog, yuk pribadi saja berikut ini langkah-langkahnya :
Silahkan Anda menuju Editor Template, lalu Anda dengan memakai CTRL+F Anda cari instruksi ]]></b:skin>., lalu Anda salin instruksi 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 instruksi <b:skin><