Browse Source

menubar pure js dan css hyahiya

master
dekguh 7 months ago
parent
commit
53cc5f9ad5
7 changed files with 312 additions and 4 deletions
  1. BIN
      .index.php.swp
  2. BIN
      assets/.custom.js.swp
  3. BIN
      assets/.style.css.swp
  4. 16
    0
      assets/custom.js
  5. 189
    0
      assets/grid.css
  6. 86
    0
      assets/style.css
  7. 21
    4
      index.php

BIN
.index.php.swp View File


BIN
assets/.custom.js.swp View File


BIN
assets/.style.css.swp View File


+ 16
- 0
assets/custom.js View File

@@ -0,0 +1,16 @@
1
+'use strict';
2
+
3
+var navClose = document.getElementsByClassName('nav-close');
4
+navClose = navClose[0];
5
+var menu_Nav = document.getElementsByClassName('menu-nav');
6
+menu_Nav = menu_Nav[0];
7
+var navToggler = document.getElementsByClassName('nav-toggler');
8
+navToggler = navToggler[0];
9
+
10
+navClose.addEventListener('click', ()=> {
11
+	menu_Nav.style.width = "0%";
12
+});
13
+
14
+navToggler.addEventListener('click', ()=> {
15
+	menu_Nav.style.width = "60%";
16
+});

+ 189
- 0
assets/grid.css View File

@@ -0,0 +1,189 @@
1
+.row {
2
+	width: 100%;
3
+}
4
+
5
+.col {
6
+	float: left;
7
+	padding: 0 8px;
8
+}
9
+
10
+/* small */
11
+@media (min-width: 0px) {
12
+	.container {
13
+		width: 100%;
14
+		padding: 0 16px;
15
+	}
16
+
17
+	.col.col-sm-1 {
18
+		width: 8.33%;
19
+	}
20
+
21
+	.col.col-sm-2 {
22
+		width: 16.66%;
23
+	}
24
+
25
+	.col.col-sm-3 {
26
+		width: 25%;
27
+	}
28
+
29
+	.col.col-sm-4 {
30
+		width: 33.33%;
31
+	}
32
+
33
+	.col.col-sm-5 {
34
+		width: 41.66%;
35
+	}
36
+
37
+	.col.col-sm-6 {
38
+		width: 50%;
39
+	}
40
+
41
+	.col.col-sm-7 {
42
+		width: 58.33%;
43
+	}
44
+
45
+	.col.col-sm-8 {
46
+		width: 66.66%;
47
+	}
48
+
49
+	.col.col-sm-9 {
50
+		width: 75%;
51
+	}
52
+
53
+	.col.col-sm-10 {
54
+		width: 83.33%;
55
+	}
56
+
57
+	.col.col-sm-11 {
58
+		width: 91.66%;
59
+	}
60
+
61
+	.col.col-sm-12 {
62
+		width: 100%;
63
+	}
64
+}
65
+
66
+/* medium */
67
+@media (min-width: 576px) {
68
+	.container {
69
+		max-width: 576px;
70
+		width: 100%;
71
+		padding: 0;
72
+		margin: 0 auto;
73
+	}
74
+
75
+	.col.col-md-1 {
76
+		width: 8.33%;
77
+	}
78
+
79
+	.col.col-md-2 {
80
+		width: 16.66%;
81
+	}
82
+
83
+	.col.col-md-3 {
84
+		width: 25%;
85
+	}
86
+
87
+	.col.col-md-4 {
88
+		width: 33.33%;
89
+	}
90
+
91
+	.col.col-md-5 {
92
+		width: 41.66%;
93
+	}
94
+
95
+	.col.col-md-6 {
96
+		width: 50%;
97
+	}
98
+
99
+	.col.col-md-7 {
100
+		width: 58.33%;
101
+	}
102
+
103
+	.col.col-md-8 {
104
+		width: 66.66%;
105
+	}
106
+
107
+	.col.col-md-9 {
108
+		width: 75%;
109
+	}
110
+
111
+	.col.col-md-10 {
112
+		width: 83.33%;
113
+	}
114
+
115
+	.col.col-md-11 {
116
+		width: 91.66%;
117
+	}
118
+
119
+	.col.col-md-12 {
120
+		width: 100%;
121
+	}
122
+}
123
+
124
+/* large */
125
+@media (min-width: 768px) {
126
+	.container {
127
+		max-width: 768px;
128
+		width: 100%;
129
+		padding: 0;
130
+		margin: 0 auto;
131
+	}
132
+
133
+	.col.col-lg-1 {
134
+		width: 8.33%;
135
+	}
136
+
137
+	.col.col-lg-2 {
138
+		width: 16.66%;
139
+	}
140
+
141
+	.col.col-lg-3 {
142
+		width: 25%;
143
+	}
144
+
145
+	.col.col-lg-4 {
146
+		width: 33.33%;
147
+	}
148
+
149
+	.col.col-lg-5 {
150
+		width: 41.66%;
151
+	}
152
+
153
+	.col.col-lg-6 {
154
+		width: 50%;
155
+	}
156
+
157
+	.col.col-lg-7 {
158
+		width: 58.33%;
159
+	}
160
+
161
+	.col.col-lg-8 {
162
+		width: 66.66%;
163
+	}
164
+
165
+	.col.col-lg-9 {
166
+		width: 75%;
167
+	}
168
+
169
+	.col.col-lg-10 {
170
+		width: 83.33%;
171
+	}
172
+
173
+	.col.col-lg-11 {
174
+		width: 91.66%;
175
+	}
176
+
177
+	.col.col-lg-12 {
178
+		width: 100%;
179
+	}
180
+}
181
+
182
+/* extra large */
183
+@media (min-width: 992px) {
184
+	.container {
185
+		max-width: 992px;
186
+		width: 100%;
187
+		margin: 0 auto;
188
+	}
189
+}

+ 86
- 0
assets/style.css View File

@@ -0,0 +1,86 @@
1
+* {
2
+	box-sizing: border-box;
3
+	padding: 0;
4
+	margin: 0;
5
+}
6
+
7
+html {
8
+	overflow-x: hidden;
9
+	height: 100%;
10
+}
11
+
12
+body {
13
+	font-size: 16px;
14
+	color: #171717;
15
+	font-family: Arial, sans-serif;
16
+}
17
+
18
+a {
19
+	text-decoration: none;
20
+}
21
+
22
+/* Global Class */
23
+.clearfix {
24
+	clear: both;
25
+}
26
+
27
+/* menunav */
28
+.menunav {
29
+	background-color: #171717;
30
+	color: #FFFFFF;
31
+	padding: 8px 16px;
32
+}
33
+
34
+.menunav a,
35
+.menunav a:hover {
36
+	color: #FFF;
37
+}
38
+
39
+
40
+.menunav .nav-brand {
41
+	font-size: 20px;
42
+	line-height: 1.5;
43
+	vertical-align: middle;
44
+}
45
+
46
+.menunav .nav-toggler {
47
+	color: #FFF;
48
+	padding: 4px 8px;
49
+	border: 1px solid #FFF;
50
+	border-radius: 2px;
51
+	float: right;
52
+}
53
+
54
+.menu-nav {
55
+	position: fixed;
56
+	width: 60%;
57
+	height: 100%;
58
+	z-index: 999;
59
+	top: 0;
60
+	right: 0;
61
+	background-color: #171717;
62
+	text-align: center;
63
+	transition: width 0.6s;
64
+	-webkit-transition: width 0.6s;
65
+}
66
+
67
+.menu-nav .nav-item {
68
+	display: block;
69
+	color: #FFF;
70
+	padding: 4px 0;
71
+}
72
+
73
+.menu-nav .nav-item:first-child {
74
+	margin-top: 32px;
75
+}
76
+
77
+.nav-close {
78
+	display: block;
79
+	color: #fff;
80
+	font-size: 20px;
81
+	margin: 32px 0;
82
+}
83
+
84
+@media (min-width: 767.98px){
85
+	
86
+}

+ 21
- 4
index.php View File

@@ -3,12 +3,29 @@
3 3
 	<head>
4 4
 		<meta charset="utf-8">
5 5
 		<meta name="viewport" content="width=device-width, initial-scale=1">
6
-		<title>Belajar Cuk</title>
6
+		<title>The Pacifier? More Like Bore: Ragnarok!</title>
7
+		<link rel="stylesheet" href="assets/style.css">
8
+		<link rel="stylesheet" href="assets/grid.css">
7 9
 	</head>
8 10
 	<body>
9
-		<h1>Belajar JS</h1>
10
-		<p>Never Walk ALone <strong>But Too Strong</strong></p>
11
-
11
+		<div class="main-wrapper">
12
+			<!-- menu nav -->
13
+			<div id="menunav" class="menunav">
14
+				<div class="container">
15
+					<a class="nav-brand" href="#">DEKGUH</a>
16
+					<a class="nav-toggler" href="#"><i class="fas fa-bars"></i></a>
17
+					<div class="clearfix"></div>
18
+				</div>
19
+			</div>
20
+			<div id="nav-menu" class="menu-nav">
21
+				<a class="nav-close" href="#"><i class="fas fa-times"></i></a>
22
+				<a class="nav-item" href="#">Beranda</a>
23
+				<a class="nav-item" href="#">Blog</a>
24
+				<a class="nav-item" href="#">Tentang</a>
25
+			</div>	
26
+		</div>
27
+		
28
+		<script src="https://kit.fontawesome.com/901bde055c.js" crossorigin="anonymous"></script>
12 29
 		<script src="assets/custom.js"></script>
13 30
 	</body>
14 31
 </html>

Loading…
Cancel
Save