Kuliah Saya - Baik buat
kalian yang baru aja belajar desain web. Saya akan memberikan script membuat
menu navigasi yang biasanya berada di
bawah header.yang berisi daftar kategori artikel yang terdapat pada sebuah website atau blog. Menu
navigasi memudahkan pengunjung menemukan sebuah halaman pada sebuah web. Dengan
hanya mengklik salah satu link pada menu navigasi. Maka otomatis tampilan langsung
akan menuju kepada halaman yang diinginkan. Tapi disini karena ini saya hanya
mau berbagi materi kuliah saya, dan masih tahap belajar juga. Jadi membuatnya
ini htmlnya pisah dengan script cssnya. Oke
langsung saja berikut ini adalah script HTMLnya dengan format html:
<html>
<head>
<link
rel="stylesheet" href="#nama file.css"
type="text/css">
</head>
<body>
<nav>
<ul>
<li><a href="#ganti dengan link halaman">AWAL</a></li>
<li><a href="#ganti dengan link halaman">BERITA</a>
<ul>
<li><a href="#ganti dengan link halaman">SOSIAL</a></li>
<li><a href="#ganti dengan link halaman">HIBURAN</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Tampilanya akan seperti ini sebelum disisipkan file
css :
SCRIPT
CSS dengan format css isikan pada link rel href pada html. sesuaikan namanya :
nav ul{
list-style:none;
// menghilangkan tanda pada pinggir list-style
width:900px;
height:50px;
}
nav ul a{
text-decoration:none;
//menghilangkan efek text atau link, di sini kita gunakan untuk menghilangkan
garis bawah link
}
nav ul li ul{
display:none;
//menyembunyikan menu saat pointer tidak sedang di atasnya
padding-left:0px;
//mengatur padding-left
witdh:150px;
}
nav ul li:hover ul{
display:block;
//menampilkan menu saat pointer di atasnya
}
nav ul li:hover{
background:grey;
}
nav ul li{
float:left;
width:150px;
height:35px;
background:black;
text-align:center;
padding-top:15px;
}
nav a{
color:#fff;
font-family:sans-serif;
font-size:12px;
}
setelah disisipkan css maka tampilan akan menjadi seperti dibawah ini, untuk warna anda bisa merubah sesuai dengan keinginan, pada code script color
Catatan : file HTML dan file css harus dalam satu folder yang sama
EmoticonEmoticon