Membuat Menu dengan Pure CSS

Selamat datang kembali di kursuswebsite.org, kali ini kita akan belajar salah satu Framework CSS yaitu Pure CSS, sama seperti bootstrap, Pure CSS merupakan framework CSS juga, tapi dengan ukuran file yang kecil dan juga simple di gunakan, kita tidak membahas mana yang bagus mana yang tidak di sini tujuan kita hanya belajar. Cukup basa basi nya, oke langsung saja kita praktekan yah teman teman bagaimana Membuat Menu dengan Pure CSS

siapkan text editor kalian disini saya menggunakan sublime text sebagai text editor saya, kalian bisa download kalo belum punya text editor sublime ini di link ini https://www.sublimetext.com/ , lalu kalian siapkan file baru html beri nama dengan nama index.html dan ketikan kode berikut di bawah ini

ini kode untuk vertical menu di css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Pure CSS </title>
	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
</head>
<body>
	<div class="pure-g" >
	   <div class="pure-u-1-3" > </div >
	   <div class="pure-u-1-3" >
	   	<h2 style =" color: #666; text-align: center; " > Vertical Menu Pure CSS </h2 >
			<div class="pure-menu custom-restricted-width">
			    <span class="pure-menu-heading">Yahoo Sites</span>

			    <ul class="pure-menu-list">
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
			        <li class="pure-menu-heading">More Sites</li>
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</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">OMG!</a></li>
			    </ul>
			</div>
	   </div>
	   <div class="pure-u-1-3"> </div >
	</div>
</body>
</html>

hasilnya di bawah ini

ini kode untuk horizontal menu di pure css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Pure CSS </title>
	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
</head>
<body>
	<div class="pure-g" >
	   <div class="pure-u-1-3" > </div >
	   <div class="pure-u-1-3" >
	   	<h2 style =" color: #666; text-align: center; " > Horizontal Menu Pure CSS </h2 >
			<div class="pure-menu pure-menu-horizontal">
			    <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
			    <ul class="pure-menu-list">
			        <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">Sports</a></li>
			        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
			    </ul>
			</div>
	   </div>
	   <div class="pure-u-1-3"> </div >
	</div>
</body>
</html>

hasilnya seperti di bawah ini

ini kode untuk Dropdown menu di pure css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Pure CSS </title>
	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
</head>
<body>
	<div class="pure-g" >
	   <div class="pure-u-1-3" > </div >
	   <div class="pure-u-1-3" >
	   	<h2 style =" color: #666; text-align: center; " > Dropdown Menu Pure CSS </h2 >
			<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">Home</a></li>
			        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
			            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
			            <ul class="pure-menu-children">
			                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</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">Tumblr Blog</a></li>
			            </ul>
			        </li>
			    </ul>
			</div>
	   </div>
	   <div class="pure-u-1-3"> </div >
	</div>
</body>
</html>

nah cukup mudah bukan teman teman , untuk lebih jelasnya kalian bisa buka di dokumentasinya di sini https://purecss.io/menus/

sekian tutorial Membuat Menu dengan Pure CSS semoga bermanfaat yah teman teman 😀

Kategori