[ MATERI TIK KELAS 11] Cara Membuat Dropdown menu dengan HTML ~ SMA PGRI NARINGGUL

Pada kesempatan kali ini, Saya akan membagikan tentang bagaimana Cara Membuat Dropdown menu dengan HTML dan CSS. Menu ini berupa daftar link yang mana jika kita sorot akan menampilkan menu lagi di bawahnya (Pull down menu). Untuk pembuatan menu tersebut, ada beberaapa editor HTML / JavaScript seperti Adobe Dreamweaver, PHP, ataupun yang paling sederhana yaitu Notepad seperti yang saya gunakan. Untuk lebih jelasnya silahkan lihat tutorial dibawah ini:

Pertama-tama kita persiapkan dulu aplikasi editor HTML, saya sendiri menggunakan Notepad biar lebih praktis.

1. Buka aplikasi Notepad klik Start – Accessories – Notepad

2. Selanjutnya kita akan membuat style CSS terlebih dahulu ketikan kode HTML di Bawah ini:

<!DOCTYPE html>

<html>

<head>

<title>Tutorial Membuat Dropdown Menu bersama Ajah Hidayat</title>

<style type="text/css">

body {

background: #eee;

font-size: 0.8em;

}

.utama {

width: 50%;

margin: 50px 25%;

}

.bersih {

clear: both;

}

h1, p {

text-align: justify;

}

a, a:hover, a:link, a:active {

color: #000;

display: block;

text-decoration: none;

}

.menu {

width: 100%;

margin: 0;

padding: 0;

list-style: none;

background: #333;

background: -moz-linear-gradient(#444, #333);

background: linear-gradient(#444, #333);

border-radius: 10px;

box-shadow: 0 2px 1px #9c9c9c;

transition: 1s ease-in-out;

-moz-transition: 1s ease-in-out;

}

.menu li {

float: left;

padding: 0;

position: relative;

}

.menu a {

float: left;

padding: 10px 20px 7px 20px;

color: #999;

text-transform: uppercase;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

.menu li:hover > a {

color: #eee;

}

.menu li:hover > ul {

display: block;

}

.menu:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.menu ul {

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 9999;

background: #333;

background: -moz-linear-gradient(#444, #333);

background: linear-gradient(#444, #333);

border-radius: 10px;

box-shadow: 0 2px 1px #9c9c9c;

}

.menu ul li {

float: none;

margin: 0;

padding: 0;

display: block;

box-shadow: 0 1px 0 #111, 0 2px 0 #777;

}

.menu ul a {

padding: 10px;

height: auto;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

.menu ul a:hover {

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

.menu ul li:first-child a {

border-radius: 5px 5px 0 0;

}

.menu ul li:first-child a:after {

content: " ";

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #333;

}

.menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

.menu ul li:last-child {

box-shadow: none;

}

.menu ul li:last-child a {

border-radius: 0 0 5px 5px;

}

</style>

</head>

3. Bagian style / CSS sudah kita buat, namun jangan dulu di save, karena kita akan menambahkan bagian <Body> di bawah kode CSS tadi. Selanjutnya ketikan kode HTML dibawah ini untuk bagian body:

<body>

<article class="Utama">

<h1>Tutorial Membuat Dropdown menu bersama Ajah Hidayat</h1>

<ul class="menu">

<li><a href="#">BERANDA</a></li>

<li><a href=#">Layanan</a>

<ul>

<li><a href="#">WEB DESAIN</a></li>

<li><a href="#">Dekstop Programing</a></li>

</ul>

</li>

<li><a href="#">Profile</a></li>

<li><a href="#">Account</a></li>

<li><a href="#">Log Out</a></li>

</ul>

<section class="bersih"> </section>

<p><a href="http:smapgrinaringgul.sch.id/">Masuk ke halaman web</a></p>

</article>

</body>

</html>

4. Semuanya sudah selesai, langkah selanjutnya tinggal simpan kode tersebut dalam format html dokumen dengan cara klik menu file pada notepad, kemudian beri nama file “Tutorial-menu.html”. perlu diperhatikan bahwa file notepad secara default adalah “.txt” maka anda rubah menjadi “.html” seperti pada nama file yang saya tandai dengan huruf merah di atas.