Hallo kawan, dropdown menu memang sering digunakan oleh blogger untuk diletakkan di navigasi blog. Dropdown ini berguna agar menu pada pilihan dinavigasi mempunyai "Anak" sehingga menu dinavigasi bisa lebih banyak dan juga hemat tempat. Lalu bagaimana cara membuat menu dropdown di template blogger.
Berikut ini kami menyediakn referensi membuat menu dropdown yang bisa ditempatkan di template kawan, berikut point-point yang ada pada artikel ini.
Cara Membuat Menu Dropdown Navigasi
Adapun beberapa point-point cara membuat menu dropdown navigasi ini sebagai berikut.- Membuat file HTML
- Konsep CSS dropdown menu
- Penerapan kode CSS ke HTML
- Melembutkan dropdown menu
Membuat file HTML
Hal yang pertama kita harus membuat sebuah file dengan nama file index.html atau anda bisa memakai website yang akan buatkan navigasi dropdown-nya. Silahkan copy kode berikut dan paste ke file index.html.
Kode index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Coba simpan dan jalankan script tersebut.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Konsep CSS dropdown menu
Setelah anda jalankan dari script di atas maka akan ada bullets di sisi kiri dari tulisan, selanjutnya langkah yang harus kita lakukan adalah menghilangkan bullets dan menjadikannya berjejer horizontal.Buatlah sebuah file css dengan nama
styles.css dan kita buat konsep mengubah code <ul> dan <li> berikut beberapa penjelasan dari script css.
Mengubah link pada navigasi
Kita ubah link pada navigasi agar tidak ada underline atau garis bawah pada link di navigasi.
hilangkan underline
nav a:hover {
text-decoration: none;
}
text-decoration: none;
}
Hapus Bullets
hapus bullets
nav ul {
list-style: none;
}
list-style: none;
}
Buat navigasi horizontal
Buat navigasi horizontal
nav ul li {
float: left;
padding: 5px 20px;
}
float: left;
padding: 5px 20px;
}
Background saat cursor menyentuh menu
Background saat cursor menyentuh menu
nav ul li:hover {
background-color: #2980b9;
}
background-color: #2980b9;
}
Hilangkan menu anak bullets
Hilangkan menu anak bullets
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
display: none;
list-style: none;
margin-left: -20px;
}
Buat menu anak bullets vertikal
Buat menu anak bullets vertikal
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
float: none;
padding: 5px 20px;
margin-left: -40px;
}
Ubah background anak bullets saat cursor menyentuh
Ubah background anak bullets saat cursor menyentuh
nav ul li ul li:hover {
background-color: #2980b9;
}
background-color: #2980b9;
}
Tampilkan anak bullets saat cursor menyentuh menu utama
Tampilkan anak bullets saat cursor menyentuh menu utama
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
display: block;
position: absolute;
background: #ddd;
}
Ubah warna link saat cursor menyentuh
Ubah warna link saat cursor menyentuh
nav ul li:hover > a {
color: #fff;
}
color: #fff;
}
Kode lengkap
Berikut kode lengkap dari penjelasan css diatas.
Kode lengkap
nav a:hover {
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
Penerapan kode CSS ke HTML
Untuk penerapan kode css ke html maksudnya disini adalah kita memanggil filestyles.css untuk bisa mengisi tampilan di index.html. Berikut kodenya dan letakkan di atas kode </head> jika sudah ada anda tidak perlu meletakkannya lagi.
<link rel="stylesheet" type="text/css" href="styles.css"/>
Melembutkan dropdown menu
Jika anda sudah berhasil membuat dropdown menu navigasi maka anda tentu akan melihat hovernya (saat cursor menyentuh) agak sedikit kaku tidak ada kelembutan dari css tersebut. Sekarang kita coba untuk mengubah css hovernya menjadi lebih lembut. berikut scriptnya dan letakan di styles.css padanav ul li:hover dan nav ul li ul li:hover.
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
Jika anda kesulitan dalam penempatannya anda bisa menggantinya dengan script berikut.
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
Dan lihatlah ada sedikit ke-lembutan pada menu navigasi dropdown-nya. Untuk script lengkapnya anda bisa lihat di bawah ini.
Kode lengkap index.html
Kode lengkap index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown menu navigasi - www.pemulabelajar.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1</a>
<ul>
<li><a href="#">Menu list 1</a></li>
<li><a href="#">Menu list 2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Kode lengkap styles.css
Kode lengkap styles.css
nav a:hover {
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}
nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}
nav ul li:hover > a {
color: #fff;
}
Semoga artikel toturial CSS tentang Tutorial CSS - Membuat Dropdown Menu Navigasi dapat bermanfaat bagi anda yang sedang belajar tutorial web dan dapat mengembangkan lagi website / blog anda. Jika terdapat kekurangan saya minta maaf dan jika anda ada sedikit pertanyaan anda bisa menanyakannya di kolom komentar, anda juga dapat membagikan artikel ini keteman-teman anda dengan cara meng-klik button pada menu bagikan dibawah. Salam dan Terima kasih :)
