menubar pure js dan css hyahiya

3 years ago · 53cc5f9ad5
--- a/.index.php.swp
+++ b/.index.php.swp
--- a/assets/.custom.js.swp
+++ b/assets/.custom.js.swp
--- a/assets/.style.css.swp
+++ b/assets/.style.css.swp
--- a/assets/custom.js
+++ b/assets/custom.js
@ -0,0 +1,16 @@
 'use strict';

 var navClose = document.getElementsByClassName('nav-close');
 navClose = navClose[0];
 var menu_Nav = document.getElementsByClassName('menu-nav');
 menu_Nav = menu_Nav[0];
 var navToggler = document.getElementsByClassName('nav-toggler');
 navToggler = navToggler[0];

 navClose.addEventListener('click', ()=> {
 	menu_Nav.style.width = "0%";
 });

 navToggler.addEventListener('click', ()=> {
 	menu_Nav.style.width = "60%";
 });
--- a/assets/grid.css
+++ b/assets/grid.css
@ -0,0 +1,189 @@
 .row {
 	width: 100%;
 }

 .col {
 	float: left;
 	padding: 0 8px;
 }

 /* small */
@media (min-width: 0px) {
 	.container {
 		width: 100%;
 		padding: 0 16px;
 	}

 	.col.col-sm-1 {
 		width: 8.33%;
 	}

 	.col.col-sm-2 {
 		width: 16.66%;
 	}

 	.col.col-sm-3 {
 		width: 25%;
 	}

 	.col.col-sm-4 {
 		width: 33.33%;
 	}

 	.col.col-sm-5 {
 		width: 41.66%;
 	}

 	.col.col-sm-6 {
 		width: 50%;
 	}

 	.col.col-sm-7 {
 		width: 58.33%;
 	}

 	.col.col-sm-8 {
 		width: 66.66%;
 	}

 	.col.col-sm-9 {
 		width: 75%;
 	}

 	.col.col-sm-10 {
 		width: 83.33%;
 	}

 	.col.col-sm-11 {
 		width: 91.66%;
 	}

 	.col.col-sm-12 {
 		width: 100%;
 	}
 }

 /* medium */
@media (min-width: 576px) {
 	.container {
 		max-width: 576px;
 		width: 100%;
 		padding: 0;
 		margin: 0 auto;
 	}

 	.col.col-md-1 {
 		width: 8.33%;
 	}

 	.col.col-md-2 {
 		width: 16.66%;
 	}

 	.col.col-md-3 {
 		width: 25%;
 	}

 	.col.col-md-4 {
 		width: 33.33%;
 	}

 	.col.col-md-5 {
 		width: 41.66%;
 	}

 	.col.col-md-6 {
 		width: 50%;
 	}

 	.col.col-md-7 {
 		width: 58.33%;
 	}

 	.col.col-md-8 {
 		width: 66.66%;
 	}

 	.col.col-md-9 {
 		width: 75%;
 	}

 	.col.col-md-10 {
 		width: 83.33%;
 	}

 	.col.col-md-11 {
 		width: 91.66%;
 	}

 	.col.col-md-12 {
 		width: 100%;
 	}
 }

 /* large */
@media (min-width: 768px) {
 	.container {
 		max-width: 768px;
 		width: 100%;
 		padding: 0;
 		margin: 0 auto;
 	}

 	.col.col-lg-1 {
 		width: 8.33%;
 	}

 	.col.col-lg-2 {
 		width: 16.66%;
 	}

 	.col.col-lg-3 {
 		width: 25%;
 	}

 	.col.col-lg-4 {
 		width: 33.33%;
 	}

 	.col.col-lg-5 {
 		width: 41.66%;
 	}

 	.col.col-lg-6 {
 		width: 50%;
 	}

 	.col.col-lg-7 {
 		width: 58.33%;
 	}

 	.col.col-lg-8 {
 		width: 66.66%;
 	}

 	.col.col-lg-9 {
 		width: 75%;
 	}

 	.col.col-lg-10 {
 		width: 83.33%;
 	}

 	.col.col-lg-11 {
 		width: 91.66%;
 	}

 	.col.col-lg-12 {
 		width: 100%;
 	}
 }

 /* extra large */
@media (min-width: 992px) {
 	.container {
 		max-width: 992px;
 		width: 100%;
 		margin: 0 auto;
 	}
 }
--- a/assets/style.css
+++ b/assets/style.css
@ -0,0 +1,86 @@
 * {
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
 }

 html {
 	overflow-x: hidden;
 	height: 100%;
 }

 body {
 	font-size: 16px;
 	color: #171717;
 	font-family: Arial, sans-serif;
 }

 a {
 	text-decoration: none;
 }

 /* Global Class */
 .clearfix {
 	clear: both;
 }

 /* menunav */
 .menunav {
 	background-color: #171717;
 	color: #FFFFFF;
 	padding: 8px 16px;
 }

 .menunav a,
 .menunav a:hover {
 	color: #FFF;
 }


 .menunav .nav-brand {
 	font-size: 20px;
 	line-height: 1.5;
 	vertical-align: middle;
 }

 .menunav .nav-toggler {
 	color: #FFF;
 	padding: 4px 8px;
 	border: 1px solid #FFF;
 	border-radius: 2px;
 	float: right;
 }

 .menu-nav {
 	position: fixed;
 	width: 60%;
 	height: 100%;
 	z-index: 999;
 	top: 0;
 	right: 0;
 	background-color: #171717;
 	text-align: center;
 	transition: width 0.6s;
 	-webkit-transition: width 0.6s;
 }

 .menu-nav .nav-item {
 	display: block;
 	color: #FFF;
 	padding: 4px 0;
 }

 .menu-nav .nav-item:first-child {
 	margin-top: 32px;
 }

 .nav-close {
 	display: block;
 	color: #fff;
 	font-size: 20px;
 	margin: 32px 0;
 }

@media (min-width: 767.98px){
 	
 }
--- a/index.php
+++ b/index.php
@ -3,12 +3,29 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Belajar Cuk</title>
 		<title>The Pacifier? More Like Bore: Ragnarok!</title>
 		<link rel="stylesheet" href="assets/style.css">
 		<link rel="stylesheet" href="assets/grid.css">
 	</head>
 	<body>
 		<h1>Belajar JS</h1>
 		<p>Never Walk ALone <strong>But Too Strong</strong></p>

 		<div class="main-wrapper">
 			<!-- menu nav -->
 			<div id="menunav" class="menunav">
 				<div class="container">
 					<a class="nav-brand" href="#">DEKGUH</a>
 					<a class="nav-toggler" href="#"><i class="fas fa-bars"></i></a>
 					<div class="clearfix"></div>
 				</div>
 			</div>
 			<div id="nav-menu" class="menu-nav">
 				<a class="nav-close" href="#"><i class="fas fa-times"></i></a>
 				<a class="nav-item" href="#">Beranda</a>
 				<a class="nav-item" href="#">Blog</a>
 				<a class="nav-item" href="#">Tentang</a>
 			</div>	
 		</div>
 		
 		<script src="https://kit.fontawesome.com/901bde055c.js" crossorigin="anonymous"></script>
 		<script src="assets/custom.js"></script>
 	</body>
 </html>