Cara membuat daftar menu di html

Menu navigasi adalah bagian dari website yang digunakan untuk mengarahkan ke bagian atau halaman tertentu dari sebuah website. Menu navigasi ini tentunya akan memudahkan pengguna untuk menjelajahi konten yang telah disajikan. Menu navigasi biasanya berbentuk seperti kotak atau bar persegi panjang dengan background tertentu. Jika user menggerakkan pointer mouse diatas bar, maka warna box bar akan berubah sebagai tanda bahwa user siap mengakses menu dan akan diarahkan ke halaman tertentu.

Menu navigasi suatu website dapat disesuaikan dengan konsep desain website. Menu bisa ditampilkan apa adanya atau bisa juga diberi styling tersendiri. Pada saat pengguna pertama kali mengakses halaman website, menu navigasi dapat disembunyikan dan diganti dengan tombol menu hamburger dan jika pengguna mengklik menu hamburger, menu navigasi akan ditampilkan

Penempatan normal menu navigasi terletak di bagian atas halaman website. Menu navigasi juga dapat ditambahkan di bagian bawah halaman website yang berfungsi sebagai menu navigasi tambahan jika konten website terlalu panjang untuk memudahkan pengguna memilih tampilan menu tanpa harus menggulir layar ke atas.

Pada menu navigasi horizontal, menu ini disusun berjajar dari kiri ke kanan. Dan pada menu vertikal, urutan menu navigasi ditampilkan dari atas ke bawah

Menu navigasi horizontal merupakan menu yang paling umum dan paling banyak digunakan untuk membuat website. Menu ini menggunakan tata letak blok inline CSS sehingga akan ditampilkan secara horizontal atau memanjang ke samping

Untuk membuat menu ini hal pertama yang harus dilakukan adalah membuat halaman HTML itu sendiri. Dalam tutorial ini, saya menggunakan un-ordered list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   Membuat Menu Horizontal HTML
   


   
   

     
Home

     
Portfolio

     
Contact

     
About me

   

   
   Latihan Membuat Menu Horizontal Pada HTML

Kemudian pengaturan gaya pada CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

body,* {
   font-family: 'Roboto', sans-serif;
   background:#eee;
}
nav {
   width: 100%;
   height: 100px;
   background-color: #eee;
}
nav ul {
   margin: 0;
   padding: 0;
}
nav ul li {
   list-style-type: none;
   display: inline-block;
   float: left;
   line-height: 100px;
}
nav ul li a {
   text-decoration: none;
   margin: 5px;
   padding: 14px 20px;
   color: navy;
   background-color: #ffba93;
   border-radius: 5px;
}
nav ul li a:hover {
   color : #fff;
   background-color: #f37121;
}

Jika dijalankan akan menghasilkan tampilan

Penjelasan
Dalam HTML, menu navigasi dibuat menggunakan tag

) detail daftar lengkap (
• ). Dalam
• , isi menu disisipkan dengan menggunakan link anchor(). Ketika pengguna mengklik tautan jangkar (), tautan tersebut akan mengarahkan halaman ke halaman tujuan (baris 9 sampai 14)

  Dalam CSS-nya, tag nav menggunakan pengukuran lebar penuh (width. 100%) untuk ditampilkan secara maksimal dengan ukuran layar (baris ke-5). Daftar daftar ditampilkan tanpa menggunakan bullet (list-style-type. tidak ada;), dan juga dalam bentuk blok-sebaris. Inline-block ini adalah kunci agar menu dapat ditampilkan berjajar secara horizontal (baris 16). Kemudian pada link anchor, fitur underline pada link dihilangkan dengan text-decoration. tidak ada; . #ffba93; . Saat pengguna mengarahkan kursor (mengarahkan mouse ke tautan), warna latar diubah menjadi warna latar. #f37121;

  Menu Navigasi Vertikal

  Menu navigasi dalam bentuk vertikal dapat diimplementasikan pada sebuah website. Namun karena bentuknya vertikal, menu ini akan terasa mengganggu karena menutupi sebagian halaman atas web. Biasanya menu vertikal ditampilkan tidak apa adanya melainkan menggunakan tombol bantu berupa tombol hamburger yang jika pengguna mengklik tombol tersebut maka akan ditampilkan menu vertikal

  Untuk membuat menu navigasi vertikal di HTML, diperlukan tag

  sebagai wadah menu, dan juga daftar dalam bentuk
  Konten menu ada di tautan jangkar (tag). Saat halaman HTML pertama kali dimuat, menu vertikal tidak ditampilkan tetapi tombol hamburger akan ditampilkan. Tombol hamburger ini ditempatkan di dalam tag

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34

  
  
  
     Latihan Membuat Menu Vertikal Pada HTML
     
  
  
  ≡
  
  
     
  Home
  
     
  Portfolio
  
     
  Contact
  
     
  About me
  
  
  
  Latihan Membuat Menu Vertikal Pada HTML
  
  
  

  Gaya file. css

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42

  body,* {
     font-family: 'Roboto', sans-serif;
     background:#eee;
  }
  nav {
     display:none;
     clear: both;
     width: 100%;
     background-color: #eee;
  }
  nav ul {
     margin: 0;
     padding: 0;
  }
  nav ul li {
     list-style-type: none;
  }
  nav ul li a {
     display: block;
     text-decoration: none;
     margin: 5px;
     padding: 14px 20px;
     color: navy;
     background-color: #ffba93;
     border-radius: 5px;
  }
  nav ul li a:hover {
     color:#fff;
     background-color: #f37121;
  }
  #hamburger{
     float:right;
     padding: 7px 10px;
     margin: 5px;
     color: navy;
     background-color: #ffba93;
     border-radius: 5px;
  }
  #hamburger:hover{
     color: #fff;
     background-color: #f37121;
  }

  Jika dijalankan langsung di browser

  

  Jika menjalankan pengguna mengklik tombol hamburger

  

  Penjelasan
  Dalam HTML, tag elemen digunakan sebagai wadah untuk tombol hamburger. elemen tag

  dibuat dengan menggunakan id="vertical_menu", id ini diperlukan oleh javascript untuk menampilkan atau tidak menampilkan menu vertikal saat pengguna mengklik tombol hamburger. Bagian menu menggunakan daftar (
  ) dilengkapi dengan rincian daftar (
  • )

    Di CSS, hal pertama yang harus dilakukan saat halaman pertama kali dimuat adalah menyembunyikan menu nav itu sendiri dari tampilan. tidak ada;. Pada tautan jangkar, Anda harus menggunakan gaya tampilan blok. blok;

    Dalam Javascript, Ketika pengguna mengklik elemen html dengan id="hamburger", jika elemen berisi tanda silang maka nav dengan id="vertical_menu" akan disembunyikan dengan metode pengaturan gaya display=none; . getElementById('vertical_menu'). gaya. display="none";) dan jika tidak maka nav dengan id="vertical_menu" akan ditampilkan dengan metode pengaturan gaya display=block; . getElementById('vertical_menu'). gaya. tampilkan="blok";)