Jika anda membuka suatu website, pastinya website tersebut terdapat berbagai macam menu yang akan memudahkan kita untuk menuju link yang akan dituju. Misalnya anda membuka website berita, biasanya menu-menu tersebut isinya berbagai kategori berita, contohnya politik, lifestyle, technology, otomotif, dan lain-lain. Untuk itu kita akan mencoba membuat menu standar yang biasa digunakan pada website
Jika anda ingin mencoba membuatnya,
bukalah notepad++ anda.
buatlah program untuk menampilkan menu-menu
<html>
<head>
<title>Hadi kurniawan</title>
</head>
<body bgcolor="00072d"><center><h2>ALGORITMA-CYBER.BLOGSPOT.COM</h2>
<div id="menu_wrapper">
<div></div>
<ul id="menu">
<li class="active"><a href="http://ALGORITMA-CYBER.BLOGSPOT.COM">HOME</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
simpan file tersebut dengan nama menu.html
jika anda coba jalankan program tersebut,
akan keluar output seperti gambar dibawah ini:
Sekarang buatlah file baru dengan nama style.css .
dan buatlah programnya seperti ini:
body {
padding: 30px;
}
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
margin: 30px 0;
padding: 0;
list-style-type: none;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu_wrapper ul {
margin-left: 12px;
border-top: 2px solid black;
border-bottom: 2px solid black;
background: #333;
width:700;
-webkit-border-radius:10px;
}
#menu_wrapper li a {
color: #CCC;
}
#menu_wrapper li a:hover, #menu_wrapper li.active a {
color: #999;
background: #031882;
border-bottom: 2px solid #444;
-webkit-border-radius:2px;
}
h2{
color:white;
}
simpan program anda,
dan sekarang kembali pada program menu.html
tambahkan skrip berikut tepat dibawah kode </title>
<link rel="stylesheet" href="style.css">
simpan program anda,
dan coba anda jalankan lagi.
jika berhasil akan keluar output seperti gambar dibawah ini:
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia