Labkom99.com- Jika pada bagian pertama kita telah mencoba membuat template. Bagian ini kita mempelajari Cara Membuat Menu Navigasi Horisontal Menggunakan HTML dan CSS. Hari ini saya akan membagikan contoh manu yang dibuat oleh HTML dan CSS.
Alat / bahan baku
Notepad
Untuk membuat menu pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML
Baca Juga : Belajar HTML + CSS: Penggunaan Dan Penjelasan Element CSS Float
Seperti yang ditunjukkan pada gambar di bawah ini, menu navigasi umumnya berasal dari perintah div dengan tag ul dan li.
<div>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>HTML</a></li>
<li><a href=””>CSS</a></li>
<li><a href=””>JQuery</a></li>
<li><a href=””>PHP</a></li>
</ul>
</div>Setelah selesai menulis tata letak menu , mulailah menulis CSS Style untuk navigasi, seperti yang ditunjukkan pada gambar.
Baca Juga : Belajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3
*{
margin: 0;
padding: 0;
}Kemudian cari div bar navigasi. Di sini saya akan menggunakan posisi absolut untuk memusatkannya. Jika kalian dapat mengganti jika memiliki metode pemusatan bar navigasi lainnya
div{
background-color:#70a298;
width: 1000px;
position:absolute;
left:50%;
margin-left: -500px;
}Kemudian atur menu navigasi agar melayang ke kiri, dan hapus titik-titik di depan li untuk membuat bilah navigasi terlihat lebih baik.
Baca Juga : Belajar HTML Membuat Paragraf
div ul li{
float:left;
list-style-type: none;
}Kemudian atur tab navigasi tingkat tab, dan lebar dan tinggi menu navigasi, warna teks, dan warna latar belakang dan menghapus garis bawah tab.
div ul li a{
display: block;
width: 200px;
text-align: center;
line-height: 40px;
border:#0b0101;
text-decoration: none;
}Baca Juga : Software Sederhana untuk Membuat Homepage
Kemudian atur mouse untuk berubah warna melalui menu bar navigasi.
div ul li a:hover{
background: #f2f1eb;
}Pada akhirnya, menu bar navigasi sempurna selesai dan dibawah ini ada code lengkapnya
<! Doctype html>
<html lang = “en”>
<head>
<title>LabKom99.Com</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”keywords” content=”Belajar HTML, Template HTML “>
<meta name=”description” content=”Belajar HTML Dengan Cepat”>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color:#70a298;
width: 1000px;
position:absolute;
left:50%;
margin-left: -500px;
}
div ul li{
float:left;
list-style-type: none;
}
div ul li a{
display: block;
width: 200px;
text-align: center;
line-height: 40px;
border:#0b0101;
text-decoration: none;
}
div ul li a:hover{
background: #f2f1eb;
}
</style>
<body>
<div>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>HTML</a></li>
<li><a href=””>CSS</a></li>
<li><a href=””>JQuery</a></li>
<li><a href=””>PHP</a></li>
</ul>
</div>
</body>
</html>Hasilnya
Kesimpulan
Pada membuat bagian ini adalah bagian dasar dalam membuat sebuah desain website. Menu merupakan bagian penting dalam alur navigasi website. Hanya dengan menggunakan tol notepad kalian sudah dapat mempraktikan artikel ini. Cukup copi paste kode yang sudah disediaakan. Untuk warna dan gaya silahkan sesuaikan dengan keinginan anda. Selamat Mencoba..
