Membuat Menu Sidebar Keren

blog-agustutorial~Membuat Menu Sidebar Keren

     Tutorial Kali ini saya memberikan teman-teman sebuah tutorial yaitu Membuat Menu Sidebar Keren dan beserta Effect Animasinya. Menu Sidebar merupakan sebuah menu navigasi yang sama seperti menu lainnya tetapi penempatan menu ini lebih cenderung di bagian kiri atau kanan dari content sebuah website. 

    Nah, ditutorial ini saya hanya menggunakan sintak html5 dan css3 untuk pembuatanya. Pada bagian animasi saya menggunakan kode dari CSS3 yaitu keyframes, fungsi dari keyframes ini sendiri ialah untuk mengatur waktu /timming sebuah animasi yang akan kita buat nantinya dan juga menggunakan sintak animation untuk penamaan animasi tersebut. Ok langsung saja perhatikan kode dibawah ini :

1. Langkap pertama silahkan teman-teman buat terlebih dahulu sintak htmlnya, seperti berikut :


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Sidebar Menu</title>
 <link rel="stylesheet" href="Assets/css/style.css">
 <link rel="stylesheet" href="Assets/css/font-awesome.css">
</head>
<body>
 <aside>

 <div class="brand">
  <img src="Assets/img/AT.png" alt="">
  <h2>My Logo</h2>
 </div>
 
  <ul class="menu">
   <li><a href=""><i class="fa fa-home"></i> &nbsp;Home</a></li>
   <li><a href=""><i class="fa fa-phone"></i> &nbsp;Contact</a></li>
   <li><a href=""><i class="fa fa-inbox"></i> &nbsp;Service</a></li>
   <li><a href=""><i class="fa fa-user"></i> &nbsp;Profile</a></li>
  </ul>
 </aside>

</body>
</html>


2. Langkah kedua buat sebuah style CSS dengan nama style.css :


*{
 margin: 0 auto;
 font-family: Segoe UI;
 box-sizing: border-box;
}
aside{
 box-shadow: 0px 0px 10px black;
 float: left;
 margin: 10px;
 background: white;
 max-width: 100%;
 width: 300px;
}
img{
 display: block;
 max-width: 100%;
}
aside .brand img{
 height: 200px;
}
aside .brand h2 {background:#0088FF; color: white; text-align: center; padding: 10px;}

ul.menu{list-style: none; padding: 0;}
ul.menu li{position: relative;}
/*bagian animasi*/
ul.menu li:hover:before{
 position: absolute;
 top: 10px;
 color: #0088FF;
 font-weight: bold;
 right: 10px;
 content: ':';
 border-radius: 50%;
 width: 40px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-top: 2px solid #0088FF;
 border-bottom: 2px solid #0088FF;
 /*ini untuk membuat animasi*/
 -webkit-animation: circle .4s ease-in-out infinite;
 -mox-animation: circle .4s ease-in-out infinite;
 -o-animation: circle .4s ease-in-out infinite;
}
/* bagian setting animasi  */
@-webkit-keyframes circle
{
 0%{transform: rotate(0deg);}
 50%{transform: rotate(120deg);}
 100%{transform: rotate(360deg);}
}

/*effect hover pada link menu*/
ul.menu li a{
 text-decoration: none;
 padding: 20px;
 color: #0088FF;
 display: block;
 border-bottom: 1px solid #eee;
 -webkit-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
ul.menu li:hover a
{
 padding-left: 30px;
 border-left: 4px solid #0088FF;
}

Jika Sudah silahkan teman-teman simpan dan lihat hasilnya di browser masing-masing. Tampilannya seperti gambar dibawah ini :

blog-agustutorial~Membuat Menu Sidebar Keren

Untuk memperlancar proses pembelajaran ini saya menyertakan sebuah video untuk teman-teman bisa download atau tonton nantinnya. Silahkan teman-teman tonton video dibawah ini :



Bagi teman-teman yang ingin download source kodenya silahkan klik tombol download dibawah ini :



Sekian dulu ya teman,Semoga tutorial dari saya bermanfaat untuk kalian semua dan saya ucapkan terima kasih .

Comments

Post a Comment

Popular posts from this blog

Membuat Palindrome Checker

Image
Tutorial kali ini saya ingin sharing tentang bagaimana membuat palindrome checker atau bahasa lainnya mendeteksi palindrome itu sendiri, mungkin dari kita belum mengetahui apa itu palindrome checker bukan ? sebelum melihat codenya saya akan membahas sedikit apa itu palindrome. Apa itu Palindrome ? Palindrom adalah sebuah kata, frasa, angka maupun susunan lainnya yang dapat dibaca dengan sama baik dari depan maupun belakang (spasi antara huruf-huruf biasanya diperbolehkan). dikutip dari  :  https://id.wikipedia.org/wiki/Palindrom Logika dari pembuatan program sederhana ini adalah : Kata pertama yang dimasukan disimpan di dalam sebuah variabel A. Lalu variabel A ini kita jadikan sebuah array dan membalikannya dari urutan nilai array terbesar ke terkecil. Hasil pengurutan itu kita simpan di sebuah variabel bernama B. Nah, sekarang kita samakan kata B dan A tersebut dengan menggunakan Kondisi IF. Jika variabel A sama dengan B maka itu disebut Palindrome, jika tidak maka bukan pali...
Read more

Menampilkan Bilangan Genap dan Ganjil dengan PHP

Image
Kali ini masih dengan tutorial yang sama yaitu php, nah pada kesempatan ini saya ingin sharing mengenai cara untuk  Menampilkan Bilangan Genap dan Ganjil dengan PHP . Disini logikanya untuk bilangan genap dan ganjil adalah bilangan genap ialah bilangan yang habis dibagi 2  dan bilangan ganjil ialah bilangan yang tidak  habis dibagi 2 maka akan menghasilkan sisa 1 atau lebih . Maka dari itu disini saya akan menggunakan fungsi Operator Aritmatika yaitu  Modulus ( Sisa Bagi ) yang dilambangkan dengan % . Ok langsung saja silahkan lihat sintaknya dibawah ini : Cara pertama menggunakan for : $genap = ""; $ganjil = ""; for($i=1;$i<=10;$i++){ $i%2==0 ? $genap .= $i." " : $ganjil .= $i." "; } echo "Bilangan Genap adalah $genap<br/>"; echo "Bilangan Ganjil adalah $ganjil<br/>"; /* hasilnya : Bilangan Genap adalah 2 4 6 8 10 Bilangan Ganjil adalah 1 3 5 7 9 */ Penjelasan : Pada sintak diatas terlihat ter...
Read more

Menghitung Jumlah Digit Suatu Karakter PHP

Image
Kembali lagi membahas tutorial tentang php, kali ini saya ingin sharing bagaimana cara  Menghitung Jumlah Digit Suatu Karakter . Disini saya menggunakan fungsi strlen pada php. Apa itu strlen ? strlen adalah sebuah fungsi dari php yang mempermudahkan kita untuk menghitung sebuah deretan angka atau huruf. Sebagai penjelasan dan contoh bisa dilihat dibawah ini : Menghitung digit tipe data integer : $var = 1234567; echo is_numeric($var) ? "Jumlah digit dari bilangan ".$var." adalah ".strlen($var) : 'Bukan Termasuk Angka'; Penjelasan : $var = 1234567 adalah nama variable untuk menampung nilai is_numeric($var) adalah fungsi pada php untuk mengecek apakah data yang ada divariable $var bertipe integer atau bukan, jika bertipe integer maka akan menampilkan jumlah digit, jika bukan maka akan menampilkan Bukan Termasuk Angka . Menghitung digit tipe data string : $var = "ininamaku"; echo is_string($var) ? "Jumlah digit dari huruf $var adalah ".st...
Read more