Membuat Navbar dengan HTML dan CSS

Haii sobat, kembali lagi dengan masdita.com, kali ini saya akan memberikan tutorial bagaimana cara membuat navbar dengan html dan css. Buat para calon programmer tentunya ini sangat bermanfaat nantinya. Kenapa bisa bermanfaat? Karena navbar merupakan element navigasi pada sebuah halaman website yang akan kita buat, tanpa navbar website akan sulit untuk berpindah halaman. Belum lagi jika kita ingin bermain dengan google adsense tentunya tanpa navbar kita akan selalu ditolak google adsense dong sob. Bagi sobat yang sudah paham membuat navbar mungkin bisa berlanjut langsung bagiaman membuat tabel dengan html yang sudah saya buat.

Biasanya menu navbar diletakkan paling atas di halaman website, ada juga yang meletakkan dibawah heading, semua tergantung selera. Navbar biasanya ada yang berupa satu menu saja, ada juga navbar dengan dropdown dimana didalam menu ada sub menu lagi. Ditutorial kali ini saya akan membahas kedua cara diatas. Bagaimana cara membuat navbar dengan html dan css.

Oke langsung saja kita mulai ya sob,

1. Buat file yang bernama index.php

Gambar diatas adalah hasil dari code dibawah ini,

2. Buat file yang bernama navigasi.php

Gambar diatas adalah hasil dari code dibawah ini,

}
#kepala{
    float: right;
    width: 640px;
}
#kepala a {
    line-height: 65px;
    text-decoration: none;
    padding-left: 200px;
    color:#FFF;
    font-family: arial;
    font-size: 30px;
}
#navigasi {
    background:blue;
    width: 100%;
    height: 65px;
    margin: 0px;
    padding: 0px;   
}
#navigasi ul {
    list-style: none;
}
#navigasi ul li {
    float: left;
    line-height: 65px
}
#navigasi ul li a {
    float:left; 
    width:100px; 
    display:block; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
}
#navigasi ul ul {
    display:none; 
    list-style:none; 
    position:absolute; 
    background-color:red;
    float: none;
    top:65px; 
    width:190px;
}
#navigasi ul li a:hover {
    background-color:brown; 
    display:block;
}
#navigasi ul li:hover ul {
    display:block;
}
#navigasi ul ul li a {
    display:block;
    padding-left:30px; 
    text-align:left; 
    width:160px;
    height: 60px;
    line-height: 60px;
}
#navigasi ul ul li a:hover {
    color:#fff;
}
</style>
<!DOCTYPE html>
<html>
<head>
    <title>Navigator</title>
</head>
<body>
<nav id="navigasi">
     <ul>
        <div id="kepala">
            <a href="#">Masdita.com</a></li>
</div>
<li><a href="#">Beranda</a></li>
<li><a href="#">Pemrograman</a>
            <ul>
<li> <a href="#">php</a></li>
<li> <a href="#">css</a></li>
</ul>
</li>
<li><a href="#">Tekno</a>
            <ul>
<li> <a href="#">gadget</a></li>
<li> <a href="#">aplikasi</a></li>
</ul>
</li>
<li><a href="#">Pemrograman</a>
            <ul>
<li> <a href="#">php</a></li>
<li> <a href="#">css</a></li>
</ul>
</li>
</ul>
</nav>
</html>

Dari 2 percobaan diatas terlihat ya sob mana yang lebih menarik, untuk yang pertama adalah dasaran dalam membuat navbar, untuk yang kedua adalah setelah pengembangan dalam membuat navbar dengan menambahkan code css. Jadi begitulah cara membuat navbar dengan html dan css, semoga tutorial yang saya berikan bermanfaat ya sob, terus dapatkan tutorial, tips dan trik terbaru di masdita.com

1 Komentar untuk "Membuat Navbar dengan HTML dan CSS"

lovemachoco27 Mei, 2019
numpang share ya min ^^
bosan tidak tahu harus mengerjakan apa ^^
daripada begong saja, ayo segera bergabung dengan kami di
F*A*N*S*P*O*K*E*R cara bermainnya gampang kok hanya dengan minimal deposit 10.000
ayo tunggu apa lagi buruan daftar di agen kami ^^
|| WA : +855964283802 || LINE : +855964283802 ||
BalasHapus
Balasan