Membuat Scroll Menu Horizontal dengan Pure CSS
18/03/2017 Maykhel David 2894 Website
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 – Layout Examples – 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.
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
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
