» » »

Tutorial Membuat Menu Menggunakan HTML dan CSS

Tutorial Membuat Menu Menggunakan HTML dan CSS - Selamat pagi sobat, kali ini saya akan berbagi tutorial yang menarik tentunya dan bisa bermanfaat untuk sobat yang sedang belajar HTML dan CSS. tutorial kali ini adalah membuat sebuah elemen yang sangat penting dalam sebuah web, yaitu menu atau navbar. Ini tentunya sangat penting karena jika tidak ada navbar saja di sebuah web maka nanti pengunjung akan agak sulit menemukan kategori atau lainnya yang biasa diletakan di navbar kecuali ada di label. Baiklah sobat mari kita mulai saja tutorial membuat menu dengan bantuan HTML dan CSS.

Tutorial Membuat Menu Menggunakan HTML dan CSS

 Membuat Menu Menggunakan HTML dan  CSS

  1. buatlah sebuah dokumen baru dengan nama misalnya "index.html" lalu buat juga file css eksternalnya misalnya "style.css"
  2. Setelah itu copy script ini ke dalam file "index.html" sobat.
    3. 
<!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>
  3. 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}
  4. Setelah itu save dan lihatlah hasilnya maka sobat akan melihat menu yang lumayan bagus dan ya bisa dipalajari oleh sobat bagaimana strukturnya.
Untuk lebih jelasnya sobat bisa mengikuti tutorial yang sudah saya sediakan untuk sobat berikut ini.

Postingan terkait:

— — , ,