tried to blur background
Browse files- index.html +1 -1
- script.js +4 -4
- style.css +24 -5
index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
| 9 |
<body>
|
| 10 |
<nav>
|
| 11 |
<h1>SopKit<span>.</span> <div class="nav-close hidden">+</div> </h1>
|
| 12 |
-
<ul>
|
| 13 |
<div class="nav-close hidden">X</div>
|
| 14 |
<li><a href="https://sopkit.github.io/SopKit#">Tools</a></li>
|
| 15 |
<li><a href="https://github.com/SopKit">GitHub</a></li>
|
|
|
|
| 9 |
<body>
|
| 10 |
<nav>
|
| 11 |
<h1>SopKit<span>.</span> <div class="nav-close hidden">+</div> </h1>
|
| 12 |
+
<ul class="">
|
| 13 |
<div class="nav-close hidden">X</div>
|
| 14 |
<li><a href="https://sopkit.github.io/SopKit#">Tools</a></li>
|
| 15 |
<li><a href="https://github.com/SopKit">GitHub</a></li>
|
script.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
| 1 |
|
| 2 |
|
| 3 |
-
document.
|
| 4 |
let navbarToggler = document.querySelector("nav ul");
|
| 5 |
-
navbarToggler.classList.toggle("
|
| 6 |
-
})
|
| 7 |
-
|
|
|
|
| 1 |
|
| 2 |
|
| 3 |
+
document.querySelectorAll(".nav-close").forEach((e)=>e.addEventListener( "click", () => {
|
| 4 |
let navbarToggler = document.querySelector("nav ul");
|
| 5 |
+
navbarToggler.classList.toggle("active");
|
| 6 |
+
})
|
| 7 |
+
)
|
style.css
CHANGED
|
@@ -4,11 +4,15 @@
|
|
| 4 |
padding: 0;
|
| 5 |
}
|
| 6 |
body {
|
| 7 |
-
|
| 8 |
font-family: Poppins, sans-serif;
|
| 9 |
min-height: 100vh;
|
|
|
|
| 10 |
}
|
| 11 |
|
|
|
|
|
|
|
|
|
|
| 12 |
|
| 13 |
nav {
|
| 14 |
background: #19274d;
|
|
@@ -115,9 +119,6 @@ nav ul li a:hover {
|
|
| 115 |
margin: auto;
|
| 116 |
flex-grow: 3;
|
| 117 |
}
|
| 118 |
-
.hidden {
|
| 119 |
-
display: none;
|
| 120 |
-
}
|
| 121 |
|
| 122 |
@media (max-width:700px) {
|
| 123 |
nav {
|
|
@@ -126,13 +127,28 @@ nav ul li a:hover {
|
|
| 126 |
/* height: 100%; */
|
| 127 |
}
|
| 128 |
nav ul {
|
| 129 |
-
display:
|
| 130 |
position: absolute;
|
| 131 |
height: 100%;
|
| 132 |
background: #5582f3;
|
| 133 |
width: 50%;
|
| 134 |
z-index: 2;
|
| 135 |
padding-top: 50px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 136 |
}
|
| 137 |
nav ul li a {
|
| 138 |
width: 100%;
|
|
@@ -149,6 +165,9 @@ nav ul li a:hover {
|
|
| 149 |
cursor: pointer;
|
| 150 |
margin-right: 20px ;
|
| 151 |
}
|
|
|
|
|
|
|
|
|
|
| 152 |
|
| 153 |
|
| 154 |
|
|
|
|
| 4 |
padding: 0;
|
| 5 |
}
|
| 6 |
body {
|
| 7 |
+
|
| 8 |
font-family: Poppins, sans-serif;
|
| 9 |
min-height: 100vh;
|
| 10 |
+
overflow-x: hidden;
|
| 11 |
}
|
| 12 |
|
| 13 |
+
.hidden {
|
| 14 |
+
display: none;
|
| 15 |
+
}
|
| 16 |
|
| 17 |
nav {
|
| 18 |
background: #19274d;
|
|
|
|
| 119 |
margin: auto;
|
| 120 |
flex-grow: 3;
|
| 121 |
}
|
|
|
|
|
|
|
|
|
|
| 122 |
|
| 123 |
@media (max-width:700px) {
|
| 124 |
nav {
|
|
|
|
| 127 |
/* height: 100%; */
|
| 128 |
}
|
| 129 |
nav ul {
|
| 130 |
+
display: none;
|
| 131 |
position: absolute;
|
| 132 |
height: 100%;
|
| 133 |
background: #5582f3;
|
| 134 |
width: 50%;
|
| 135 |
z-index: 2;
|
| 136 |
padding-top: 50px;
|
| 137 |
+
transition: all 0.3s ease;
|
| 138 |
+
}
|
| 139 |
+
nav ul::before {
|
| 140 |
+
content: "";
|
| 141 |
+
position: absolute;
|
| 142 |
+
display: block;
|
| 143 |
+
width: 5000px;
|
| 144 |
+
height: 100vh;
|
| 145 |
+
background: rgba(255, 0, 0, 0);
|
| 146 |
+
backdrop-filter: blur(20px);
|
| 147 |
+
z-index: -1;
|
| 148 |
+
}
|
| 149 |
+
nav .active {
|
| 150 |
+
transition: all 0.3s ease;
|
| 151 |
+
display: inline-block;
|
| 152 |
}
|
| 153 |
nav ul li a {
|
| 154 |
width: 100%;
|
|
|
|
| 165 |
cursor: pointer;
|
| 166 |
margin-right: 20px ;
|
| 167 |
}
|
| 168 |
+
.hiddenonmobile {
|
| 169 |
+
display: none;
|
| 170 |
+
}
|
| 171 |
|
| 172 |
|
| 173 |
|