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>

Untuk membuat linknya agan bisa menambahkan kode dibawah ini, samakan dengan script dibawah ini gan. Linknya bisa agan ganti dengan yang agan mau.

<a href='Link Tujuan' itemprop='url'> </a>

Sekian yang bisa admin berikan. Terimakasih semoga bermanfaat

Unknown

Saya tinggal di Cirebon dan besar di kota udang ini. Tertarik dengan dunia blog tidak membuat saya lupa dengan pendidikan dan agama. Kunci utama saya adalah percaya bahwa apapun yang terjadi, usaha dan doa itu nomor satu.

Cara Membuat Menu Navigation Side Dengan Animasi pada Blog

Unknown

Artikel Terkait