Catatan Hadi : Membuat Menu Standard Pada Website

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:

Catatan Hadi

Pages

Sabtu, 27 April 2013

Membuat Menu Standard Pada Website

Tidak ada komentar:

Posting Komentar