Hai para developer pemula.. hehe. Kali ini BGowa akan membagikan artikel bagaimana cara membuat menu navigasi atau navbar dengan html dan css.
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.
Sekian dulu artikel BGowa – cara membuat menu navigasi atau navbar kali ini, semoga bermanfaat.
Lihat hasilnya, semoga berhasil.
Sekian dulu artikel BGowa – cara membuat menu navigasi atau navbar kali ini, semoga bermanfaat.
berkunjung juga ya om http://www.ruangblogger.gq/
BalasHapustampilan di androidnya gimana bagus gak ?
BalasHapusMampir
BalasHapusmampir juga ya bro fitodroid.blogspot.com
BalasHapusMampir ke mfimGstm.blogspot.com
BalasHapusMampir gan di rumh sya
BalasHapusKangipul.xyz
Best Bet in Malaysia 메리트카지노총판 메리트카지노총판 카지노사이트 카지노사이트 188bet 188bet 797Captain Jack Casino: Welcome Bonus & Promo Codes - Viecasino
BalasHapusHarrah's Cherokee Casino Resort - JM Hub
BalasHapusHarrah's 태백 출장샵 Cherokee Casino Resort is a Native American Casino in 동해 출장마사지 Murphy, North 순천 출장안마 Carolina. 춘천 출장샵 The casino opened 정읍 출장샵 on June 14, 2003, in the early 2000s.