...

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 hidden" href="index.html">Ana sayfa</a>
-        <a class="dropdown-nav-item" href="hakkimizda.html">Hakkımızda</a>
+        <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
-        <a class="dropdown-nav-item" href="#brands">Markalar</a>
+        <a class="dropdown-nav-item hidden" href="#brands">Markalar</a>
-        <a class="dropdown-nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="dropdown-nav-item hidden" 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="iletisim.html">İletişim</a>
     </nav>
     <div id="container">
         <div id="content">

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;

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;
+    }
   }
 }

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');
+        showDropdown();
-        dropdown.classList.add('flex');
+        await sleep(200);
+        showNavitems();
     }
     else {
         dropdown.classList.add('dropdown_close_animation');
         await sleep(550);
         dropdown.classList.remove('dropdown_close_animation');
-        dropdown.classList.add('hidden');
+        hideDropdown();
-        dropdown.classList.remove('flex');
+        hideNavitems();
     }
 }

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;