...

2022-07-07 23:32:24 +03:00
parent 45ab291d4b
commit 99c794d8bc
5 changed files with 162 additions and 13 deletions
--- a/index.html
+++ b/index.html
@@ -32,11 +32,11 @@
        </label>
    </header>
    <nav class="dropdown hidden dropdown-navbar">
-        <a class="dropdown-nav-item" href="index.html">Ana sayfa</a>
-        <a class="dropdown-nav-item" href="hakkimizda.html">Hakkımızda</a>
-        <a class="dropdown-nav-item" href="#brands">Markalar</a>
-        <a class="dropdown-nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-        <a class="dropdown-nav-item" href="iletisim.html">İletişim</a>
+        <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+        <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+        <a class="dropdown-nav-item hidden" href="#brands">Markalar</a>
+        <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
    </nav>
    <div id="container">
        <div id="content">
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -38,6 +38,10 @@ html, body {
  display: flex;
 }

+.inline-block {
+  display: inline-block;
+}
+
 #header {
  // Layout, details and children is set in partials/header.scss
  height: 10vh;
@@ -59,7 +63,6 @@ html, body {
  align-items: center;

  .dropdown-nav-item {
-    display: inline-block;
    position: relative;
    margin-top: math.div(variables.$px_horizontalPadding, 4);
    background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
@@ -67,6 +70,8 @@ html, body {
    -webkit-text-fill-color: transparent;
    font: 600 28px "Montserrat", sans-serif;
    text-decoration: none;
+    -webkit-animation: navbar-appear 550ms;
+    animation: navbar-appear 550ms;

    &:first-of-type {
      margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -97,6 +102,11 @@ html, body {
  animation: drawer-close 550ms;
 }

+.dropdown-nav-item_close_animation {
+  -webkit-animation: navbar-disappear 550ms;
+  animation: navbar-disappear 550ms;
+}
+
@-webkit-keyframes drawer-close {
  from {
    -webkit-transform: translate3d(0, 0, 0);
@@ -147,6 +157,56 @@ html, body {
  }
 }

+@-webkit-keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
 #container {
  height: 90vh;
  display: grid;
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -165,6 +165,7 @@ $social-button_inner_margin: 10px;
    width: auto;
    border: 2px solid white;
    border-radius: 50%;
+    margin: 0 10px 0 0;

    img {
      margin: 10px;
@@ -179,5 +180,9 @@ $social-button_inner_margin: 10px;
        filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
      }
    }
+
+    &:last-of-type {
+      margin: 0;
+    }
  }
 }
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -2,18 +2,44 @@ async function sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
 }

+let dropdown = document.getElementsByClassName('dropdown')[0];
+let navitems = document.getElementsByClassName('dropdown-nav-item');
+
+function showDropdown() {
+    dropdown.classList.remove('hidden');
+    dropdown.classList.add('flex');
+}
+
+function hideDropdown() {
+    dropdown.classList.remove('flex');
+    dropdown.classList.add('hidden');
+}
+
+function showNavitems() {
+    for (let i = 0; i < navitems.length; i++) {
+        navitems[i].classList.remove('hidden');
+        navitems[i].classList.add('inline-block');
+    }
+}
+
+function hideNavitems() {
+    for (let i = 0; i < navitems.length; i++) {
+        navitems[i].classList.remove('inline-block');
+        navitems[i].classList.add('hidden');
+    }
+}
+
 async function toggleDropdown() {
-    let dropdown = document.getElementsByClassName('dropdown')[0];
-    let navitems = document.getElementsByClassName('dropdown-nav-item');
    if (dropdown.classList.contains('hidden')) {
-        dropdown.classList.remove('hidden');
-        dropdown.classList.add('flex');
+        showDropdown();
+        await sleep(200);
+        showNavitems();
    }
    else {
        dropdown.classList.add('dropdown_close_animation');
        await sleep(550);
        dropdown.classList.remove('dropdown_close_animation');
-        dropdown.classList.add('hidden');
-        dropdown.classList.remove('flex');
+        hideDropdown();
+        hideNavitems();
    }
 }
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -142,6 +142,7 @@
  width: auto;
  border: 2px solid white;
  border-radius: 50%;
+  margin: 0 10px 0 0;
 }
 .social .social-button img {
  margin: 10px;
@@ -154,6 +155,9 @@
 .social .social-button:hover img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
 }
+.social .social-button:last-of-type {
+  margin: 0;
+}

 #header {
  background: #FDFFFF;
@@ -379,6 +383,10 @@ html, body {
  display: flex;
 }

+.inline-block {
+  display: inline-block;
+}
+
 #header {
  height: 10vh;
 }
@@ -400,7 +408,6 @@ html, body {
  align-items: center;
 }
 .dropdown .dropdown-nav-item {
-  display: inline-block;
  position: relative;
  margin-top: 50px;
  background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
@@ -408,6 +415,8 @@ html, body {
  -webkit-text-fill-color: transparent;
  font: 600 28px "Montserrat", sans-serif;
  text-decoration: none;
+  -webkit-animation: navbar-appear 550ms;
+  animation: navbar-appear 550ms;
 }
 .dropdown .dropdown-nav-item:first-of-type {
  margin-top: 100px;
@@ -434,6 +443,11 @@ html, body {
  animation: drawer-close 550ms;
 }

+.dropdown-nav-item_close_animation {
+  -webkit-animation: navbar-disappear 550ms;
+  animation: navbar-disappear 550ms;
+}
+
@-webkit-keyframes drawer-close {
  from {
    -webkit-transform: translate3d(0, 0, 0);
@@ -478,6 +492,50 @@ html, body {
    transform: translate3d(0, 0, 0);
  }
 }
+@-webkit-keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes navbar-appear {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@-webkit-keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes navbar-disappear {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
 #container {
  height: 90vh;
  display: grid;