Cara Membuat Menu Navigation Side Dengan Animasi pada Blog

Tutorial Lengkap Cara Membuat Menu Navigation Side Dengan Animasi pada Blog - Siang ini admin ingin share cara membuat menu navbar samping dengan animasi yang keren. Menu navbar ini dapat memperbagus blog agan karena terlihat elegan. Tutorial ini lengkap dengan tempat peletakan serta scriptnya. Efek serta icon yang terdapat pada menunya juga bagus gan.

Tutorial ini menggunakan jQuery dan HTML. Kelebihan dari navside ini lebih fleksibel gan, bisa di klik disemua tempat scroll pagenya gan. Karena memang ini melekat pada samping page blognya. Untuk lebih jelasnya, agan bisa cek screenshotnya dibawah ini gan.

Screenshot

Tutorial Pemasangan

Pertama pasang script css dibawah ini pada template agan. Pasang scriptnya tepat diatas kode ]]></b:skin> atau agan bisa juga pasang tepat diatas kode </style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 100%;
background-color: #252a32;
color: #fff;
overflow: hidden;
transition: width .3s ease-in-out;
z-index: 100;
}
.sidebar:hover {
width: 200px;
}
.sidebar:hover .main-nav ul li a {
opacity: 1;
left: 0;
transition-delay: .2s;
}
.sidebar .main-nav ul li {
min-height: 50px;
line-height: 50px;
position: relative;
border-bottom: 1px solid #303641;
transition: all .3s ease-in-out;
}
.sidebar .main-nav ul li.logo a {
text-transform: uppercase;
font-weight: 800;
}
.sidebar .main-nav ul li.logo span:before {
color: #ea4c89;
font-size: 1.5em;
}
.sidebar .main-nav ul li.logo + li {
border-top: 1px solid #303641;
}
.sidebar .main-nav ul li a {
display: block;
padding-left: 50px;
position: relative;
left: 15px;
opacity: 0;
transition: all .3s ease-in-out;
transition-delay: 0s;
cursor: pointer;
font-weight: 300;
}
.sidebar .main-nav ul li span {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
text-align: center;
}
.sidebar .main-nav ul li span:before {
font-size: 1.25em;
transition: all .3s ease-in-out;
}
.sidebar .main-nav ul li:hover {
background-color: #1b1e24;
}
.sidebar .main-nav ul li:hover span:before {
color: #ea4c89;
}

Kedua pasang script html nya gan. Pasang scriptnya tepat dibawah kode <body> atau agan bisa cari sendiri tempat yang tepat.

<aside class='sidebar'>
<div class='main-nav'>
<ul>
<li class='logo'>
<a>Menu</a>

</li>
<li>
<a>Home</a>

</li>
<li>
<a>Features</a>

</li>
<li>
<a>Analytics</a>

</li>
<li>
<a>Premium</a>

</li>
<li>
<a>Account</a>

</li>
<li>
<a>Settings</a>

</li>
</ul>
</div>
</aside>