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
31body,* {
   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

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
42body,* {
   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";)