Membuat Menu Menggunakan HTML dan CSS
- buatlah sebuah dokumen baru dengan nama misalnya "index.html" lalu buat juga file css eksternalnya misalnya "style.css"
- Setelah itu copy script ini ke dalam file "index.html" sobat.
- Setelah itu copy juga file CSS nya ke dalam file "style.css"
body{margin:0} .menu{background:#3498DB;width:70%;height:80px;margin:0 auto} .menu ul{list-style:none;padding:0;margin:0} .menu li{float:left;line-height:80px;padding:0 15px;border-right:1px solid #ddd} .menu li:last-child{border:none} .menu li:hover{background:#2980B9} .menu a{text-decoration:none;color:#fff;font-size:18px}
- Setelah itu save dan lihatlah hasilnya maka sobat akan melihat menu yang lumayan bagus dan ya bisa dipalajari oleh sobat bagaimana strukturnya.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>
Untuk lebih jelasnya sobat bisa mengikuti tutorial yang sudah saya sediakan untuk sobat berikut ini.