Membuat Menu Navigasi
codekku - Untuk tutorial kali ini saya akan mengajak anda membuat tutorial menu navigasi dibawah header.
Membuat file HTML untuk Menu Navigasi
Baiklah kita langsung saja , ketikkan kode HTML untuk membuat menu navigasi dibawah ini :
<html>
<head>
<title>Membuat Menu Navigasi</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="menu">
<a href="#">Beranda</a>
<a href="#">News</a>
<a href="#">Code</a>
<a href="#">Kontak</a>
<a href="#">About</a>
<a href="#">Sitemap</a>
</div>
</div>
</body>
</html>
Keterangan dari kode HTML diatas:
•Kode tersebut saya ambil hanya bagian menu navigasi saja dari file HTML layout website yang nantinya bisa di gabung lagi sehingga bisa membentuk sebagai website utuh.
•Disini saya hanya menambahkan navigasi mulai Home sampai dengan About, anda bisa merubah sesuai dengan keinginan anda sendiri, dan saya sendiri sudah memberikan link yang isinya hanya “#”.
Buatlah folder baru dengan nama Membuat Menu Navigasi dan simpan file HTML diatas dengan nama menu_navigasi.html
Membuat File CSS dari Menu Navigasi
Selanjutnya anda buat lagi file CSS berikut ini :
#container{
width:1000px;
margin:0 auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, Haettenschweiler;
}
#menu{
background-color:#1000f0;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
a:link{
background-color: ;
color:#ffffff;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#1000f0;
color:#ffffff;
font-weight:bold;
text-decoration: ;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}
Penjelasan dari CSS rule diatas sebagai berikut ini :
•#container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah.
•#menu {…} untuk membuat background menu dengan warna
#993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.
•a:link {…} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px.
•a:hover {…} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih ( #FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.
•a:active {…} dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebalan saya kembalikan lagi seperti asal.
Setelah itu simpan file ini dengan nama style.css didalam folder sama dengan file HTML, lalu anda jalankan.
Hasilnya akan seperti gambar dibawah ini:
 |
| Gambar Menu Navigasi |
Kelihatannya anda makin menyukai dengan penggunaan CSS ini, cukup mudah bukan membuat menu navigasi itu?
Silahkan anda membuat kreasi sendiri dengan merubah nilai dari CSS rule ini dan anda juga bisa mengganti tulisan dengan gambar semoga bermanfaat.
