Beranda » CSS » HTML » Cara membuat Horizontal List Dalam HTML

Cara membuat Horizontal List Dalam HTML

Setelah selesai membuat nested list (daftar bersarang), sekarang akan kita lanjutkan membuat horizontal list sederhana. Horizontal list ini berfungsi sebagai menu pada template yang akan kita buat, agar memudahkan pengunjung untuk mencari artikel dalam website kita.

Perhatikan contoh dibawah....

<!DOCTYPE html>  
 <html>  
 <head>  
 <style>  
 ul#menu li {  
   display:inline;  
 }  
 </style>  
 </head>  
 <body>  
 <h2>Horizontal List</h2>  
 <ul id="menu">  
  <li>HTML</li>  
  <li>CSS</li>  
  <li>JavaScript</li>  
  <li>PHP</li>  
 </ul>   
 </body>  
 </html>

Bagaimanan?? Hasilnya masih sanagat sederhana bukan... Agar lebih kelihatan bagus kita bisa menambahkan css kedalamnya, dan membuat link tujuan untuk itemnya. Perhatikan kembali contoh dibawah..

<!DOCTYPE html>  
 <html>  
 <head>  
 <style>  
 ul#menu {  
   padding: 0;  
 }  
 ul#menu li {  
   display: inline;  
 }  
 ul#menu li a {  
   background-color: black;  
   color: white;  
   padding: 10px 20px;  
   text-decoration: none;  
   border-radius: 4px 4px 0 0;  
 }  
 ul#menu li a:hover {  
   background-color: orange;  
 }  
 </style>  
 </head>  
 <body>  
 <h2>Horizontal List</h2>  
 <ul id="menu">  
  <li><a href="#">HTML</a></li>  
  <li><a href="#">CSS</a></li>  
  <li><a href="#">JavaScript</a></li>  
  <li><a href="#">PHP</a></li>  
 </ul>   
 </body>  
 </html>

Sekarang bagaimana hasilnya? Anda bisa mengedit script diatas agar kelihatan lebih menarik.. Selamat Berkreasi...........

Belum ada tanggapan untuk "Cara membuat Horizontal List Dalam HTML "

Post a Comment