Hugging Face's logo

Spaces:
SopKit
/
tools
Running

App Files Community
sh20raj commited on
Commit
7ce00fa
·
1 Parent(s): b0be169

nav responsiveness completed op

Browse files
Files changed (3) hide show
  1. index.html +4 -2
  2. script.js +7 -0
  3. style.css +13 -1
index.html CHANGED
@@ -8,9 +8,9 @@
8
  </head>
9
  <body>
10
  <nav>
11
- <h1>SopKit<span>.</span></h1>
12
-
13
  <ul>
 
14
  <li><a href="https://sopkit.github.io/SopKit#">Tools</a></li>
15
  <li><a href="https://github.com/SopKit">GitHub</a></li>
16
  <li><a href="#">Contact</a></li>
@@ -32,5 +32,7 @@
32
  </section>
33
  </main>
34
 
 
 
35
  </body>
36
  </html>
 
8
  </head>
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>
16
  <li><a href="#">Contact</a></li>
 
32
  </section>
33
  </main>
34
 
35
+ <script src="script.js"></script>
36
+
37
  </body>
38
  </html>
script.js ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+
2
+
3
+ document.querySelector(".nav-close").addEventListener( "click", () => {
4
+ let navbarToggler = document.querySelector("nav ul");
5
+ navbarToggler.classList.toggle("hidden");
6
+ });
7
+
style.css CHANGED
@@ -115,6 +115,9 @@ nav ul li a:hover {
115
  margin: auto;
116
  flex-grow: 3;
117
  }
 
 
 
118
 
119
  @media (max-width:700px) {
120
  nav {
@@ -135,7 +138,16 @@ nav ul li a:hover {
135
  width: 100%;
136
  }
137
  nav ul li a:hover {
138
- background: #5582f3;
 
 
 
 
 
 
 
 
 
139
  }
140
 
141
 
 
115
  margin: auto;
116
  flex-grow: 3;
117
  }
118
+ .hidden {
119
+ display: none;
120
+ }
121
 
122
  @media (max-width:700px) {
123
  nav {
 
138
  width: 100%;
139
  }
140
  nav ul li a:hover {
141
+ background: #5582f39a;
142
+ }
143
+ .nav-close {
144
+ display: block;
145
+ float: right;
146
+ color: white;
147
+ font-weight: bold;
148
+ transition: all 0.3s ease;
149
+ cursor: pointer;
150
+ margin-right: 20px ;
151
  }
152
 
153