Membuat Scroll Menu Horizontal dengan Pure CSS

Hallo semuanya, perkembangan desain website semakin hari semakin banyak variasi dan inovasi baru yang memungkinkan kita melihat sangat banyak referensi dari website unik seperti banyak website yang sangat unik pada portal website Awwwards.com yang memperlihatkan kumpulan website yang sangat unik dan istimewa. Baik secara tampilan dan juga sangat fungsional yang membuat pengguna bisa berdecak kagum saat mengunjungi website tersebut.

Pada kesempatan kali ini kita akan membahas sedikit trik untuk mempercantik tampilan webste kalian. trik ini cukup jarang digunakan, Namun saya kira ini adalah trik yang sangat unik karena tidak sebua website memakai trik seperti ini.

Pada kasus ini kita akan membuat sebuah menu dengan tema yang bergaya flat design menggunakan framework responsive Pure CSS. Sebenarnya trik ini sangat mudah, kalian bias melihatnya langsung pada website resminya.

Pertama – tama kalian coba buka dulu text editor kalian, lalu untuk membuat scroll menu horizontal menggunakan pure css bias kalian masukkan kode dibawah ini dan kalian simpan dengan nama index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Showcases a horizontal menu that hides at
     small window widths, and which scrolls when revealed.">
    <title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title>
    
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">  
</head>
<body>

<div class="custom-menu-wrapper">
    <div class="pure-menu custom-menu custom-menu-top">
        <a href="#" class="pure-menu-heading custom-menu-brand">Logo</a>
    </div>
    <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
        <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">About</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">Blog</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
        </ul>
    </div>
</div>

</body>
</html>

Selanjutnya kita akan membuat styling untuk membuatnya menjadi lebih berwarna dengan memberikan CSS seperti berikut. Dan simpan dengan nama style.css

.custom-menu-top{
            background: #e67e22;
        }
        .custom-menu-brand{
            color:#fff;
        }
        .pure-menu-horizontal{
            background: #d35400;
        }
        .pure-menu-list a{
            color: #fff
        }
        .pure-menu-list a:hover{
            color: #fff;
            background: #e67e22
        }

 

Jika kalian sudah simpan, maka sekarang kita akan coba tampilkan pada browser, maka tampilanya akan seperti ini.

Membuat Scroll Menu Horizontal dengan Pure CSS

Baiklah semuanya, saya kira itu saja artikel tentang cara membuat scroll menu horizontal menggunakan pure css yang sudah kita bahas kali ini sampai bertemu pada artikel selanjutnya

18 Maret 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat