Membuat Menu atau Navbar sederhana dengan Html dan Css

Membuat Menu atau Navbar sederhana dengan Html dan Css

Hay sobat kak dolop ketemu lagi nih kita hehehe, oke pada artikel kali ini saya akan memberikan ilmu bagaimana cara membuat menu bar atau navbar sederhana dengan html dan css .

Oke langsung saja pertama silahkan buat dulu file dengan nama index.html
lalu silahkan copy kan kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title> Menu bar dengan html dan css </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- wrapper untuk pembungkus layout -->
<div id="wrapper">
<!-- menu untuk membuat menu -->
<div id="menu">
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Programming </a> </li>
<li> <a href="#"> Tentang </a> </li>
</ul>
</div>
</div>
</body>
</html>

setelah selesai silahkan save dan coba buka dan lihat apa yang terjadi? yupp tampilan menunya masih biasa saja kan :D,, ya tentu itu karena kita belum menghiasnya, lalu bagaimana supaya tampilan menunya lebih bagus?, kita harus menggunakan css Oke langsung saja buat satu file lagi kemudian beri nama filenya style.css

lalu copy kan code dibawah ini:
*{
margin: 0;
padding: 0;
}
/* untuk pembungkus webnya */
#wrapper{
margin:50px auto;
width: 960px;
}
/* untuk mempercantik menu web */
/* memberi warna background dan tinggi background */
#menu{
background-color: #5B91BE;
height: 60px;
}
/* menghilangkan style pada list */
#menu ul{
list-style: none;
}
/* mengatur posisi menu dan menghiasnya */
#menu ul li a{
float: left;
text-decoration: none;
padding: 20px 20px;
color: white;
display: block;
}
/* memberikan efek warna ketika kursor diarahkan pada menu tersebut */
#menu ul li a:hover{
background-color: #358A9F;
color: black;
cursor: pointer;
}
kemudian save lalu refresh dan lihatllah jika sukses maka akan seperti gambar ini.
Menu dengan html dan css

Untuk penjelasannya sendiri sudah saya buat didalam source kode tersebut.
Download source kode nya disini [Download Here]

Related Posts:

0 Response to "Membuat Menu atau Navbar sederhana dengan Html dan Css"

Post a Comment

1. Dilarang menggunakan kata-kata kasar atau pornografi.
2. Dilarang menggunakan live link ataupun link biasa.
3. Berkomentarlah dengan komentar yang relevan