Image result for css3 logo

 

      Untuk sebuah website, menu adalah hal yang penting untuk menunjukan apa isi dari website tersebut. Tampilan yang menarik dan responsive adalah beberapa kriteria yang diperlukan. Untuk itu pembuatan menu yang menarik adalah yang penting pula. Berikut salah satu contoh dari sekian banyak contoh untuk membuat menu yang menarik dan responsive. Tutorial ini dibuat dengan HTML 5, CSS3, Atom Text Editor, dan browser chrome Version 52.0.2743.116 m.

1. Buatlah bentuk dasar menu dengan list pada html. Berikut contohnya:

<ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
   <li><a href="#">Menu 4</a></li>
</ul>

Maka hasilnya akan menjadi:

 

2. Lakukan styling dengan mengimplementasikan css pada kode htmlnya. Letakkan css pada tag <style> di dalam tag <head>. Pada tahap ini membuat list di atas menjadi horizontal layaknya menu ada umumnya. Berikut contohnya kode css nya:

body{
     margin: 0px;
     padding: 0px;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #262626;
    overflow: hidden;
}
li{
    float: left;
    width: 25%;
}
li a {
   color: #ffffff;
   display: block;
   padding: 10% 0 10% 0;
   text-decoration: none;
   font-family: 'Arial',sans-serif;
   text-align: center;
}

 

Maka hasilnya menjadi seperti berikut

3. Selamat anda telah membuat bentuk menu dasar. Selanjutnya pada tahap ini akan membuat menu menjadi responsive, yaitu ketika kursor diarahkan ke menu maka background berubah(hover) dan membuat background menu berubah warna ketika aktif. Berikut contoh kode css nya.

    Untuk hover, yang dikenakan aksi adalah list(li) dan link menu(a):

li a:hover{
   background-color: #404040;}

   Untuk aktif, yang dikenakan aksi adalah menu mana yang akan kita aktifkan. Dalam contoh ini, menu 3 diaktifkan. Namun sebelum      lakukan penyesuaian pada css hover dan kode html link menu 3 agar aktif dapat berkerja. Berikut perubahannya.

       li a:hover:not(.active){
        background-color: #404040;}

     Kode HTML 

     <li><a class="active" href="#">Menu 3</a></li>

     Untuk css aktif nya sebagai berikut

     .active{
         background-color: #ff0066;}

Maka hasilnya sebagai berikut:

       

Gambar di atas menunjukan menu 2 hover dan menu 3 aktif.

Done! Sekian untuk membuat menu responsive part 1. Tips kali ini untuk membuat menu agar responsive menyesuaikan dengan bentuk adalah dengan membuat ukurannya dengan satuan %. Untuk tutorial berikutnya akan dilakukan perubaha bentuk menu pada ukuran tertentu, jadi terus ikutin postnya ya.. :D Jika ada pertanyaan silahkan tanyakan di kolom ask.

#MWJS001307

Bingung tentang sourcecode atau pemrograman yang ingin dipelajari? TANYA DI SINI
Bingung cari modul, soal, pembahasan mata kuliah? CARI DI SINI