Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya
» » Dasar Membuat Horizontal List atau Menu

Dasar Membuat Horizontal List atau Menu

Oleh
Dasar Membuat Horizontal List atau Menu - Postingan sinahu coding kali ini masih kelanjutan dari pembahasan sebelumnya tentang html list. Beberapa yang sudah dibahas adalah ordered list, unordered list, description list dan nested list. Nah, sekarang kita akan mengulas jenis html list yang terakhir, yaitu horizontal list.

Dari namanya saja sudah terbayang, horizontal. Artinya, membuat list atau menu dalam bentuk berjajar secara horizontal. Jenis horizontal list ini adalah yang paling populer digunakan dibanding dengan style html list yang lain. Terutama biasa digunakan oleh para blogger dan webmaster untuk menghias menu di bawah header.

Langsung saja perhatikan contoh di bawah ini :


<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>
<body>

<h2>Contoh Dasar Horizontal List</h2>
<br>
<ul id="menu">
  <li>Makan</li>
  <li>Minum</li>
  <li>Makanan Ringan</li>
  <li>Aneka Jajan</li>
</ul>  

</body>
</html>

Dari kode tersebut hasilnya akan seperti ini :

Contoh Dasar Horizontal List



Contoh di atas adalah kode dasar dalam membuat horizontal list yang masih belum dipoles sedikitpun. Yang menjadikannya tampil horizontal adalah adanya keterangan inline. Kode dasar ini kemudian bisa dikembangkan dengan model style CSS yang beragam. Di bawah ini akan disajikan contoh sederhana cara modifikasi horizontal list.


<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: green;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: red;
}
</style>
</head>
<body>

<h2>Contoh Modifikasi Horizontal List</h2>
<br>
<ul id="menu">
  <li><a href="/">Makan</a></li>
  <li><a href="/">Minum</a></li>
  <li><a href="/">Aneka Kue</a></li>
  <li><a href="/">Gorengan</a></li>
</ul>  

</body>
</html>

Hasilnya seperti ini :

Contoh Modifikasi Horizontal List




Bagaimana konco sinahu? bisa dipahami ya. Silahkan bereksperimen dengan mengotak-atik angka dan keterangan style CSS nya untuk memahami lebih jauh. Good luck.


0 Komentar untuk "Dasar Membuat Horizontal List atau Menu"

Back To Top