Membuat Navigation Bar Dropdown Dengan HTML dan CSS
HTML memiliki beberapa element salah satunya adalah <nav>. Navigation adalah element pada HTML yang berfungsi untuk mempresentasikan link navigsai. Bisa dibilang navigasi adalah wadah dari link yang akan men direct ke halaman lain. tetapi link yang berada pada element <nav> biasanya Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman utama,gallery dll.
Pada pengetikan sintaks kita dapat menggunakan berbagai macam code editor, misalkan Notepad++ atau Sublime. Pemilihan code editor bisa bebas sesuai dengan yang kita inginkan.
TAHAP PELAKSANAAN
1. Pertama sediakan dulu filenya yaitu file html , css , dan Font Awesome ( tidak wajib )
2. Tulis script berikut pada file html sobat
<!DOCTYPE html>
<html>
<head>
<title>Membuat Navbar Script Kiddies</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="navigation">
<li class="active"><a href="#"><i class="fa fa-home"></i> HOME</a></li>
<li><a href="#"><i class="fa fa-users"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a></li>
<li><a href="#"><i class="fa fa-globe"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">DROPDOWN <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</li>
<i style="float:right;margin: 5px;margin-left: -14px;color: #fff;background: red;padding: 10px 18px;border-radius: 5px;" class="fa fa-search fa-lg"></i><input class="search" type="text" placeholder=" Search.."></input>
</ul>
</body>
</html>
Maka hasilnya seperti ini
3. Sekarang kita berikan sentuhan CSS. Ketikkan script berikut
body{
font-family: lato;
}
.navigation{
list-style-type: none;
top: 0;
left: 0;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background: #374760;
font-size: 14px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 16px 14px;
font-weight: bold;
}
li a:hover{
background: red;
}
.active{
background: #e31f1f;
color: white;
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover
.dropdown-content {
display: block;
}
.search{
padding: 5px 2px;
position: relative;
color: #e74c3c;
float: right;
margin: 4px;
border: 2px solid #e74c3c;
border-radius: 6px;
width: 14%;
background-color: #fff;
font-size: 15px;
line-height: 1.467;
box-shadow: none;
transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear
}
4. Sedikit penjelasan mengenai kode syntax diatas.
display: block; Digunakan untuk membuat display link menjadi sebuah bentuk.
:hover pada CSS maksudnya adalah action yang kita buat pada selector hover akan berjalan saat cursor kita diarahkan pada object tersebut.
display: inline-table; Berfungsi untuk membuat object sejajar dengan object lainnya.
Bagaimana Dropdown Terjadi ?
Karena saat pertama dijalankan, CSS pada selector nav ul ul ber-display none. Dan pada saat kita hover akan berubah menjadi block. Perubahan tersebut akan memunculkan konten nav ul ul saat kita hover. Dan ditambahkan property-property lain agar rapih.
Mungkin sampai sini saja tutorial kali ini .. Sekian Terima Kasih
Referensi : Code Politan
Tidak ada komentar :
Posting Komentar