Sebelumnya kita bahas dulu apa itu menu navigasi atau navbar. Navigasi atau navbar merupakan bagian dari sebuah situs yang berfungsi sebagai cara untuk berpindah dari halaman satu ke halaman lainnya, navigasi merupakan elemen yang penting dan harus ada. Navigasi bisa dihadirkan dalam banyak bentuk dan interaksi dalam sebuah situs sesuai kreativitas masing-masing. Menu Navigasi paling umum diletakan pada bagian atas halaman yang diposisikan pada kiri , tengah atau kanan web tersebut biasanya sejajar dengan logo. Namun ada juga yang meletakan menu navigasi ditempat lain misalnya di bawah header, dalam footer dan masih banyak lagi lainya sesuai selera dari pemilik situs.
Tampilan menu navigasi terkadang tidak hanya seperti yang tampil atau apa yang kita lihat saja biasanya juga terdapat menu di dalam menu yang ada seperti dropdown. Dropdown ini umumnya berisi sub-menu dari menu utama yang ada pada navigasi website tersebut. Dalam membuat menu navigasi kita akan menggunakan tag <ul> dan <li> sebagaimana yang perna saya bahas pada artikel
Gambar di atas merupakan tampilan atau contoh dari menu navigasi yang akan kita buat. Seperti yang kita lihat terdapat tiga menu utama yaitu Beranda, Artikel, Gambar dan lain -lain . Kemudian pada menu List terdapat dua sub-menu atau dropdown menu Tips Sukses dan Cara Memasak Mie. Pada contoh di atas terdapat link atau perintah menuju halaman yang kita inginkan akan tetapi belum befungsi jika diklik karena link pada tujuan belum ada (masih menggunakan #). Anda cukup mengganti tanda # dengan link halaman yang anda inginkan. Ok saatnya kode meluncur... he.2x.
Terdapat dua file yaitu file menu.html dan file style_menu.css, ketik dan simpan masing-masing kode tersebut pada folder yang sama.
menu.html
style.css
Gambar di atas merupakan tampilan atau contoh dari menu navigasi yang akan kita buat. Seperti yang kita lihat terdapat tiga menu utama yaitu Beranda, Artikel, Gambar dan lain -lain . Kemudian pada menu List terdapat dua sub-menu atau dropdown menu Tips Sukses dan Cara Memasak Mie. Pada contoh di atas terdapat link atau perintah menuju halaman yang kita inginkan akan tetapi belum befungsi jika diklik karena link pada tujuan belum ada (masih menggunakan #). Anda cukup mengganti tanda # dengan link halaman yang anda inginkan. Ok saatnya kode meluncur... he.2x.
Terdapat dua file yaitu file menu.html dan file style_menu.css, ketik dan simpan masing-masing kode tersebut pada folder yang sama.
menu.html
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="menu">
<ul>
<div id="heading">
<a href="#">Bg Art</a></li>
</div>
<li><a href="index.html">Beranda</a></li>
<li><a href="artikel.html">Artikel</a></li>
<li><a href="gambar.html">gambar</a></li>
<li><a href="#">list</a>
<ul>
<li> <a href="ul.html">Tips Sukses (ul)</a></li>
<li> <a href="ol.html">Cara Masak Mie (ol)</a></li>
</ul>
</li>
<li><a href="table.html">Data</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="#">Multimedia</a>
<ul>
<li><a href="audio.html">Audio</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>
</ul>
</nav>
</html>
style.css
*{
margin: 0px;
padding: 0px;
}
body {
font-size: 14px;
font-family: verdana;
}
#heading{
float: left;
width: 640px;
}
#heading a {
line-height: 65px;
text-decoration: none;
padding-left: 60px;
color:#FFF;
font-family: aardvark cafe;
font-size: 40px;
}
#menu {
background:#26C4C2;
width: 100%;
height: 65px;
margin: 0px;
padding: 0px;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
line-height: 65px
}
#menu ul li a {
float:left;
width:100px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
#menu ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#26C4C2;
float: none;
top:65px;
width:190px;
}
#menu ul li a:hover {
background-color:#2E9EA2;
display:block;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li a {
display:block;
padding-left:30px;
text-align:left;
width:160px;
height: 60px;
line-height: 60px;
}
#menu ul ul li a:hover {
color:#fff;
}
Lihat hasilnya, semoga berhasil.
Lihat hasilnya, semoga berhasil.
0 Comments