Implement menu.

Author: daggerok

css-gradient-based-app-step-1/package.json

@@ -9,7 +9,7 @@
     "build": "parcel build src/index.html",
     "postbuild:not-fully-working": "parcel build 'public/**/*'",
     "postbuild": "ncp ./public ./dist --filter '**/*.*'",
-    "dev": "parcel src/index.html",
+    "dev": "parcel src/index.html --no-cache",
     "start": "pm2 start 'npm run dev' --name app",
     "restart": "pm2 restart app",
     "stop": "pm2 kill",

css-gradient-based-app-step-1/src/css/main.css

@@ -53,3 +53,43 @@ figcaption {
     font-size: 1.3em;
     font-weight: bolder;
 }
+
+/* menu */
+
+nav {
+    background: #fff;
+}
+
+ul {
+    display: none;
+}
+
+ul.active {
+    display: block;
+    position: absolute;
+    background: #fff;
+    height: 100%;
+    width: 50%;
+    left: 0;
+    top: 0;
+}
+
+ul {
+    margin-top: 0;
+    padding-left: 0;
+    list-style-type: none;
+}
+
+ul li a {
+    color: #000;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: .8em;
+    display: block;
+    padding: 1.5em 3em;
+    background-color: rgba(255, 255, 255, .35);
+}
+
+ul li a:hover {
+    background-color: rgba(232, 232, 232, 0.35);
+}

css-gradient-based-app-step-1/src/index.html

@@ -17,6 +17,14 @@
       <figcaption>Max Simko</figcaption>
     </figure>
     <img src="../public/images/menu.svg" alt="image">
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About me</a></li>
+        <li><a href="#">Portfolio</a></li>
+        <li><a href="#">Contacts</a></li>
+      </ul>
+    </nav>
   </aside>
   <main>
     <!-- main site content -->

css-gradient-based-app-step-1/src/js/app.js

@@ -9,3 +9,28 @@ WebFont.load({
     ],
   },
 });
+
+function $(selector) {
+  return document.querySelector(selector);
+}
+
+function findMenu() {
+  return $('aside nav ul');
+}
+
+function findImg() {
+  return $('img');
+}
+
+function toggleMenu(e) {
+  const menu = findMenu();
+  // menu.display = !menu || !menu.display || menu.display !== 'block' ? 'block' : 'none';
+  menu.classList.toggle('active');
+  e.preventDefault();
+}
+
+function onDomContentLoaded() {
+  findImg().addEventListener('click', toggleMenu, false);
+}
+
+document.addEventListener('DOMContentLoaded', onDomContentLoaded, false);