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:
0 komentar:
Posting Komentar - Back to Content