July 24, 2024

Menu Horizontal dengan Element List pada HTML dan CSS

1 min read

List item yang seringkali berfungsi sebagai suatu format untuk membuat daftar urutan dengan bentuk memanjang kebagian bawah sehingga daftar urutan menjadi lebih rapi. List item pada HTML dapat dibuat menu sebuah content website, menu dapat dibuat dengan bentuk vertikal maupun horizontal. Menu horizontal akan dibuat dengan menggunakan teknik penggunaan float (posisi), posisi objek dapat dipilih kebagian kiri atau kanan sehingga list akan menjadi mendatar kebagian samping bukan kebagian bawah.

Langkah 1

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

[sourcecode]
<div id="kolom_menu">

<ul id="menu_horizontal">

<li><a href="#">Home</a></li>

<li><a href="#">Profil</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Guest Book</a></li>

</ul>

</div>

[/sourcecode]

horizontal1

Langkah 2

Langkah berikutnya adalah membuat halaman CSS tampilan menarik yang disesuaikan dengan warna website dan simpan pada folder yang sama.

[sourcecode]
*     {

margin:auto;

padding:0;

}

#kolom_menu {

width:850px;

height:40px;

border:1px solid #CCCCCC;

margin-top:10px;

}

#menu_horizontal li {

float: left;

list-style: none;

background: linear-gradient(#687587, #404853);

list-style: none;

padding-bottom: 10px;

padding-top: 10px;

}

#menu_horizontal li a {

border-left: 1px solid rgba(0, 0, 0, 0.2);

border-right: 1px solid rgba(255, 255, 255, 0.1);

color: white;

text-decoration: none;

padding: 10px 20px;

font-family:Tahoma;

font-size:12px;

}

[/sourcecode]

horizontal2

Langkah 3

Simpan halaman CSS dan hubungkan dengan halaman HTML.

horizontal3

Langkah 4

Buka halaman HTML dan lihat hasilnya.

horizontal4

Leave a Reply

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

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