#Nambah Ilmu , Berbagi Bersama , Penuh Warna , Cheat all Games

Tuesday, May 28, 2013

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:



Sumber :


Terimakasih Telah Membaca Artikel Saya ~~ SEMOGA BERMANFAAT !!
Reaksi:

0 komentar:

Translate

Visitors

Pengikut

--------------------------

Joe Martine Sihombing. Powered by Blogger.