Cara Membuat Scroll Menu Menggunakan Pure CSS

Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Membuat Scroll Menu Menggunakan Pure CSS, seperti yang kita ketahui Pure CSS merupakan salah satu framework dari CSS, nah untuk membuat Scroll Menu menggunakan Pure CSS tidak lah sulit teman-teman bisa mengikuti step by step yang terdapat dibawah ini.

Oke teman teman kita langsung saja masuk ke study casenya tentang Cara Membuat Scroll Menu Menggunakan Pure CSS, yaitu langkah pertama yang harus teman-teman lakukan yaitu silahkan teman-teman buka text editornya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Scroll Menu Menggunakan Pure CSS</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">

    <style>
    .custom {
        height: 300px;
        width: 150px;
        border: 1px solid gray;
        border-radius: 4px;
        margin:15px;
    }
    .pure-menu-item{height:35px !important;}
</style>
</head>
<body>
    <div class="pure-menu pure-menu-scrollable custom">
        <a href="#" class="pure-menu-link pure-menu-heading">Google</a>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Document</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Video</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Poto</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Search</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Business</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">forum</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Shop</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
        </ul>
    </div>
</body>
</html>

Pada script diatas kita menggunakan CDN yang terdapat pada Pure CSS nya seperti dibawah ini

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

atau teman-teman bisa mendownload file Pure CSS nya langsung pada https://purecss.io dan pada script diatas kita menggunakan sebuah class “pure-menu pure-menu-scrollable custom-restricted” yang berfungsi sebagai scroll menunya, dan pada script diatas masih banyak lagi class-class yang merupakan bawaan dari Pure CSS nya dan untuk memahami class-class tersebut teman-teman bisa lihat langsung pada https://purecss.io.

Selanjutnya silahkan teman-teman save script yang terdapat diatas, jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini.

Nah bagai mana teman-teman cukup mudah bukan Cara Membuat Scroll Menu Menggunakan Pure CSS nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Scroll Menu Menggunakan Pure CSS, semoga bermanfaat

terimakasih.

Cara Membuat Scroll Menu Menggunakan Pure CSS

Kategori