Cara Membuat Mainmenu pada Website
Kali ini, saya akan membahas tentang cara membuat mainmenu pada template website, dimana mainmenu ini berguna bagi Anda yang berkeinginan untuk membuat halaman perdana website bagi pemula. Oke, tidak usah basa-basi lagi. Cekidot!
 |
| Tampilan perdana saat kursor bukan berada pada lingkungannya |
2. Setelah menginstal, jalankan aplikasinya.
3. Tulis coding-nya pada tempat koding seperti di bawah ini.
<html>
<title>Mainmenu</title>
<link rel="stylesheet"
type="text/css" href="menulatihan.css"/>
</head>
<body>
<div id="menu">
<div class="mainmenu">
<a
href="home.php"> Home</a>
<a
href="tampil_about.php">About</a>
<a
href="service.php">Service</a>
<a
href="products.php">Products</a>
<a
href="contact.php">Contact</a>
</div>
</body>
</html>
Kode diatas, di Save-As pada menu File. Simpan dengan nama 'mainmenu.html'. Jangan pakai tanda petik ya Sob!
Sekedar info nih guys.
Title itu berguna untuk memberi nama program kamu pada saat dijalankan.
Link href berguna untuk mengubah tampilan tapi bukan tampilan pokoknya melainkan tampilan style-nya.
<div class="mainmenu"> itu berguna untuk menampilkan menu utama apa yang diinginkan. Kalo menu utama saya terdiri dari Home, About, Service, Products, dan Contact.
Setelah itu buat koding stylenya, untuk memperindah tampilan. Jangan lupa Save-As dengan nama 'menulatihan.css' (sesuai link href-nya) Tinggal copy-paste saja Sob!
/*style menu*/
.mainmenu a{
color:#ff0000;
background-color:#1cfd02;
font-weight:
bold;
text-decoration:
none;
font-size:
20px;
padding:
10px 15px;
float:
left;
}
#beranda{
border-top-left-radius:
15px;
border-bottom-left-radius:
15px;
border-left:
15px;
}
.mainmenu a:hover{
color:#f40bef;
background-color:#423cc4;
padding:
10px 15px;
}
For more information, kalian bisa milih color sesuai keinginan kok, color itu dimaksudkan untuk warna font pada mainmenu, sedangkan background-color itu untuk warna latar belakangnya. Ingat, pilih perpaduan warna yang mencolok seperti biru-kuning, hijau-hitam. Jangan seperti merah tua-merah. Gak menarik!
Sedangkan .mainmenu a:hover{ berguna untuk mengubah tampilan mainmenu saat kursor berada dalam lingkungannya. Sama seperti diatas ya guys, color itu untuk font sedangkan background-color untuk dasarnya. Ini akan menarik jika kalian membedakan keduanya. Setelah tulis koding jangan lupa ya untuk save.
4. Jalankan hasilnya, dengan cara mengklik dua kali pada file yang berbentuk browser tempat dimana kamu menyimpan file keduanya..
 |
| Tampilan mainmenu saat kursor berada pada lingkungannya |
Selamat Mencoba!
0 komentar:
Posting Komentar