got menu working via copy paste code and svg from yarnhelp2.0 into index.html

Author: GingerKiwi

assets/exit.svg

@@ -35,6 +35,30 @@
 
       </fieldset>
     </form>
+    <nav>
+      <img
+      src="assets/menu.svg"
+      class="menu"
+      id="menu-btn"
+      alt="open menu"
+    />
+      <ul class="nav" id="nav">
+          <li class="exit" id="/assets/exit-btn">
+            <img
+            src="assets/exit.svg"
+            class="menu"
+            id="exit-btn"
+            alt="close menu"
+          />
+          </li>
+        <li class="active"><a href="index.html">Home</a></li>
+        <li><a href="howmuchyarn.html">How Much Yarn?</a></li>
+        <li><a href="doctorwho.html">Doctor Who Scarf</a></li>
+        <li><a href="crafting-and-code.html">Crafting and Code Coffee Chats and Discord </a>
+        <li><a href="about.html">About and Contact</a></li>
+        <li><a href="index01.html">Old Site Version 1.0</a></li>
+      </ul>
+    </nav>
     <!-- nav here -->
     <section class="hero">
 
@@ -152,5 +176,6 @@ <h3 class="card__title">Developer Information</h3>
       </div>
     </main>
     <script src="/app.js"></script>
+    <script src="/nav.js"></script>
   </body>
 </html>

assets/menu.svg

@@ -0,0 +1,15 @@
+// -- NAVIGATION -- 
+
+const get = element => document.getElementById(element);
+
+let open = get("menu-btn");
+let nav = get("nav");
+let exit = get("exit-btn");
+
+open.addEventListener('click', () => {
+    nav.classList.add('open-nav');
+})
+
+exit.addEventListener('click', () => {
+    nav.classList.remove('open-nav');
+})

index.html

@@ -321,6 +321,73 @@ margin-bottom: 0.75rem;
     margin: 1rem;
 }
 
+/* Nav */
+
+nav ul {
+    visibility: hidden;
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: var(--clr-body-bg);
+    height: 100vh;
+    margin-top: 5rem;
+    padding-top: 5em;
+    z-index: 100;
+}
+
+nav ul li a {
+    color: var(--clr-heading1);
+    font-size: 1.5em;
+    font-weight: bold;
+    padding: 1em;
+    display: block;
+}
+
+.exit a {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.open-nav {
+    visibility: unset;
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.menu {
+    color: var(--clr-test-lime);
+    fill: currentColor;
+    background-color: antiquewhite;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    text-align: center;
+}
+
+ul.nav {
+    list-style: none;
+}
+
+
+ul.nav li a {
+    font-size: 2rem;
+    padding: 0 1em;
+    font-weight: normal;
+}
+
+ul.nav li:last-child a {
+    padding-right: 0;
+}
+
+ul.nav .active a {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
 /* ---------------------------- */
 /* --- COLOUR THEME PICKER ---  */
 /* ---------------------------- */