July 24, 2024

Menu Vertikal dengan Element List pada HTML dan CSS

2 min read

List item atau yang lebih dikenal dengan bullet and numbering pada aplikasi Microsoft Word adalah sebuah elemen HTML yang digunakan untuk mengurutkan data secara berurutan baik itu berbentuk angka atau berbentuk simbol. List item juga dapat dimanfaatkan untuk mendesain sebuah komponen menu pada sebuah website baik itu menu yang berbentuk vertikal maupun horizontal. Untuk mempercantik tampilan menu pada halaman web yang dibangun dengan bahasa HTML maka dibutuhkan CSS (Cascading Style Sheet) yang berfungsi sebagai komponen untuk memberikan style atau tampilan yang menarik.

Untuk kesempatan kali ini mari kita membahas berbagai bentuk menu vertikal yang dapat dirancang dengan menggunakan komponen List item.

Langkah 1

Langkah 1 yang perlu disiapkan adalah halaman dasar komponen HTML. Halaman ini adalah halaman komponen pembentuk menu vertikal dan simpan file HTML dalam satu folder.

[sourcecode]
<ul id="menu_vertikal">

<li><a href="#">Dini Hari Pertiwi</a></li>

<li><a href="#">Dita Septiana</a></li>

<li><a href="#">Evi Fadilah</a></li>

<li><a href="#">Aqeela Adinda Putri</a></li>

</ul>

[/sourcecode]

vertikal1

Langkah 2

Langkah berikutnya adalah membuat tampilan menarik yang disesuaikan dengan warna website.

[sourcecode]
#menu_vertikal {

width:225px;

margin:0;

padding:0;

font-family:"Trebuchet MS";

font-size:12px;

}

[/sourcecode]

Keterangan:

Pengaturan lebar, jarak dan tulisan pada menu yang akan ditampilkan pada website.

[sourcecode]</p>
#menu_vertikal li {

background: #FF9900;

border-bottom: 1px solid #333333;

list-style: none;

padding: 0.5em;

text-align: center;

width:200px;

}

#menu_vertikal li a   {

color:#FFFFFF;

text-decoration:none;

display:block;

}

#menu_vertikal li:hover   {

color:#3399FF;

background:#FFCC99;

}
<p style="text-align: justify;">[/sourcecode]

vertikal2

Keterangan Fungsi-Fungsi CSS

  • #menu_vertikal li digunakan untuk mengatur bagian list item.
  • #menu_vertikal li a digunakan  untuk mengatur link (hyperlink) pada list item.
  • #menu_vertikal li:hover digunakan untuk mengatur perubahan link saat mouse diarahkan pada link.

Langkah 3

Simpan halaman CSS dan hubungkan dengan halaman HTML.

vertikal3

 

Langkah 4

Buka halaman HTML dan lihat hasilnya.

vertikal4

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.