Cara Membuat Menu Dropdown Menggunakan Pure CSS

Halo teman-teman jumpa lagi pada tutorial dumet school, pada tutorial kali ini saya akan menjelaskan Cara Membuat Menu Dropdown Menggunakan Pure CSS, Dropdown Menu juga sering digunakan pada website atau pun blog, cara kerja dari dropdown ini yaitu ketika kursor kita arah kan pada menu tersebut maka akan muncul pilihan-pilhan atau menu-menu yang lainnya, untuk membuat menu dropdown kali ini kita menggunakan sebuah framework CSS yang bernama Pure CSS.

Oke teman-teman tanpa berlama-lama kita langsung saja masuk kestudy casenya tentang Cara Membuat Menu Dropdown Menggunakan Pure CSS, Untuk membuat menu dropdown menggunakan pure CSS ini teman-teman bisa mengikuti step by step seperti dibawah ini.

Langkah pertama silahkan teman-buka text editornya dan silahkan teman-teman simpan script dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous"> 
</head>
    <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">menu 1</a></li>
            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">menu 2</a></li>
            <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                <a href="#" id="menuLink1" class="pure-menu-link">menu 3</a>
                <ul class="pure-menu-children">
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">menu 1</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">menu 2</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">menu 3</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">menu 4</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">menu 5</a></li>
                </ul>
            </li>
            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">menu 4</a></li>
            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">menu 5</a></li>
        </ul>
    </div>
<body>
</body>
</html>

Pada file index.html kita menggunakan sebuah script seperti dibawah ini,

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">

Script tersebut berfungsi untuk mengambil file CSS yang terdapat pada pure CSS, atau teman-teman bisa mendownload file Pure CSSnya pada https://purecss.io/

Selanjutnya silahkan disave file index.html nya, jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini.

Pada gambar diatas jika kita arahkan kursor pada menu 3, maka akan muncul menu-menu yang lainya.

Bagaimana teman-teman cukup mudah bukan Cara Membuat Menu Dropdown Menggunakan Pure CSS-nya, sekian dulu tutorial saya kali ini tenang Cara Membuat Menu Dropdown Menggunakan Pure CSS semoga bermanfaat

Terimakasih

Cara Membuat Menu Dropdown Menggunakan Pure CSS

Kategori