Masih seputar Pure CSS. Kali ini kita akan Membuat Vertical Menu dengan Pure CSS. Â Di dalam class Pure CSS sendiri terdapat class vertical menu yang langsung bisa panggil. Membuat vertical menu artinya kita membuat menu berada pada posisi vertical. Bisa lihat gambar di bawah ini.
Seperti pada contoh di atas itu adalah vertical menu. Nah kali ini saya akan membagikan trik bagaimana cara Membuat Vertical Menu dengan Pure CSS.
Kalian bisa buka text editor kalian dan ketikan kode HTML berikut dan beri nama dengan index.html
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical Menu Pure CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5">
<div class="pure-menu custom-restricted-width pure-menu-fixed">
<span class="pure-menu-heading">Your Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="about.html" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="info.html" class="pure-menu-link">Info</a></li>
<li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-4-5" style="height: 1500px;background: #666;">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Lalu kalian buat halaman about.html
About.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical Menu Pure CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5">
<div class="pure-menu custom-restricted-width pure-menu-fixed">
<span class="pure-menu-heading">Your Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="about.html" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="info.html" class="pure-menu-link">Info</a></li>
<li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-4-5" style="height: 1500px;
background: #123;">
<h1>About</h1>
</div>
</div>
</body>
</html>
Lalu kalian buat info.html
Info.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical Menu Pure CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5">
<div class="pure-menu custom-restricted-width pure-menu-fixed">
<span class="pure-menu-heading">Your Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="about.html" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="info.html" class="pure-menu-link">Info</a></li>
<li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-4-5" style="height: 1500px;
background: #4183D7;">
<h1> Info </h1>
</div>
</div>
</body>
</html>
Lalu kalian buat contact.html.
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical Menu Pure CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-5">
<div class="pure-menu custom-restricted-width pure-menu-fixed">
<span class="pure-menu-heading">Your Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="about.html" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="info.html" class="pure-menu-link">Info</a></li>
<li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-4-5" style="height: 1500px;
background: #336E7B;">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
Terakhir kalian buat file style.css
style.css
.custom-restricted-width {
display: inline-block;
}
h1{
color: #fff;
text-align: center;
line-height: 600px;
font-size: 50px;
}
Sekian tutorial Membuat vertical Menu dengan Pure CSS, semoga bermanfaat.. Keep Coding :D.