Home » CSS, Tips dan Trik » CSS Trick : Membuat Menu Bar Horizontal dengan Sintaks List

Tulisan ini mungkin bisa menjadi jawaban bagi Anda yang bertanya tentang tampilan menubar horizontal dengan sintaks list html. Seperti yang kita ketahui, sintaks list selalu dimulai dengan kode <ol> atau <ul>, dan di dalamnya terdapat item-item yang dimulai dengan kode <li>. Trik ini mencoba memaparkan tampilan list dengan model horizontal, bukan vertikal. Keadaan ini biasanya digunakan untuk membuat menubar utama yang terdapat pada sebuah website. Saya sempat mengakali pembuatan menubar dengan menyusun <div> secara horizontal. Tetapi sepertinya cara ini tidak biasa dilakukan. Sebut saja untuk themes wordpess, hampir setiap menubar yang digunakan oleh theme wordpress menggunakan perintah list. Perintah list yang di representasikan dalam bentuk list secara horizontal. Nah berikut ini saya tuliskan listing sintaks html dan css untuk membuat menubar secara horizontal dengan menggunakan List

Contoh Tampilan

<html>
<head>
<style type="text/css">
.menubar { 
color : black; font-size:16px; font-weight:bold;
}
.menubartes ul {
list-style-type:none;
margin:0;
padding:0;
}
.menubartes li {
display:inline;
}
.menubartes li a {
text-decoration:none;
margin-right:6px;
padding: 10px; background-color:#dddddd;
}
</style>
</head>
<body>
<div class="menubartes">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>

Dari Listing program di atas, perintah “display:inline;” berperan penting dalam menampilkan list secara horizontal.

Sumber : http://www.w3schools.com/css/css_navbar.asp

Isaninside : Yogyakarta November 2011

Share :
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • Google Buzz
  • RSS
  • Technorati
  • Add to favorites
  • email
  • MySpace
  • Plurk

Tentang Isaninside - Muhammad Ihsan Zul

Isaninside - Muhammad Ihsan Zul, Seorang suami dari Rizka Irma Septiani dan bekerja sabagai Dosen di Politeknik Caltex Riau (PCR). Lulusan Pendidikan Teknik Elektronika FT UNP [Padang] tahun 2009 dan menyelesaikan pendidikan Pasca Sarjana di UGM tahun 2012. Ilmu untuk dibagi bukan dipamerkan. Let's Share!
Bookmark and Share Subscribe

One Response to “CSS Trick : Membuat Menu Bar Horizontal dengan Sintaks List”

  1. akhirnya ini lah yang paling gampang.,,,,,

    Reply

Tinggalkan komentar