Home » belajar html » cara membuat menu horisontal dengan css

Hallo saya mau bagi bagi ilmu tentang bagaimana cara membuat menu horisontal dengan menggunakan CSS, sudah tau sendiri kan CSS itu apa? Sedikit info Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Pasangan CSS ini adalah HTML. HTML itu apa? HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Jadi dalam pembuatan tampilan halaman website sudah pasti ada html dan css nya. Ok kita langsung ke topik utama yaitu membuat menu horisontal dengan css. Berikut adalah cara yang sudah saya gunakan dan berhasil :

1. buat dulu file html dan isi dengan code berikut :

<html>
<head>
<title>membuat menu horisontal dangan css</title>
</head>

<body>

<div id=”menu”>
<ul>
<li><a href=””>My first item</a></li>
<li><a href=””>My second item</a>
</li>
<li><a href=””>My third item</a></li>
<li><a href=””>My fourth item</a></li>
<li><a href=””>My fifth item</a></li>
</ul>
</div>

</body>

</html>

2. kemudian masukan kode berikut di bawah tag </head> :

<style type=”text/css” media=”screen”>
body {
margin: 0;
}
#menu {
background: #0075B8;
padding: 10px;
margin-bottom: 10px;
}
#menu ul {
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}
#menu a {
font: normal 12px/24px Arial;
color: #fff;
text-decoration: none;
padding: 5px;
background: #57a8d6;
}
#menu a:hover {
background: #5fb8eb;
}

</style>

3. sehingga kode lengkapnya seperti ini :

<html>
<head>
<title>membuat menu horisontal dangan css</title>
</head>

<style type=”text/css” media=”screen”>
body {
margin: 0;
}
#menu {
background: #0075B8;
padding: 10px;
margin-bottom: 10px;
}
#menu ul {
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}
#menu a {
font: normal 12px/24px Arial;
color: #fff;
text-decoration: none;
padding: 5px;
background: #57a8d6;
}
#menu a:hover {
background: #5fb8eb;
}

</style>

<body>

<div id=”menu”>
<ul>
<li><a href=””>My first item</a></li>
<li><a href=””>My second item</a>
</li>
<li><a href=””>My third item</a></li>
<li><a href=””>My fourth item</a></li>
<li><a href=””>My fifth item</a></li>
</ul>
</div>

</body>

</html>

4. simpan dengan nama menu dropdown.html atau apa aja boleh yng penting ekstensi file nya .html yah..

lalu jalankan di browser dan jreng….

hasilnya seperti ini :

menu horisontal dengan css

Selamat mencoba…

Incoming search terms:

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

What is 10 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Google+ Plus Follow on Twitter Like On Facebook Email to us

Latest

cara menampilkan kode html dalam postingan
Cara cek artikel yang sudah di index oleh mesin pencari google
Cara disable pesan update notification di wordpress
Cara Merubah URL Login WordPress
menghapus watermark WonderPlugin Slider Free Version 4.3

Recent Posts

Visitor Counter