fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove dropdown-nav-item appear animation

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-28 11:04:30 +03:00
parent 0b5df35dbf
commit 1f0b2dfa66
3 changed files with 16 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
galeri.html
View File

@@ -43,12 +43,12 @@
<span class="bar bar4"></span> <span class="bar bar4"></span>
</label> </label>
</header> </header>
<nav class="dropdown hidden dropdown-navbar"> <nav id="drawer">
<a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a> <a class="dropdown-nav-item" href="index.html">Ana sayfa</a>
<a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a> <a class="dropdown-nav-item" href="hakkimizda.html">Hakkımızda</a>
<a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a> <a class="dropdown-nav-item" href="index.html#brands">Markalar</a>
<a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a> <a class="dropdown-nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
<a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a> <a class="dropdown-nav-item" href="iletisim.html">İletişim</a>
</nav> </nav>
<div id="container"> <div id="container">
<main id="content"> <main id="content">

10
resources/css/main.scss
View File

@@ -87,7 +87,7 @@ a {
#drawer { #drawer {
position: fixed; position: fixed;
top: 0; bottom: 0;
right: 0; right: 0;
z-index: 2; z-index: 2;
background: variables.$cg_drawer; background: variables.$cg_drawer;
@@ -100,6 +100,7 @@ a {
.dropdown-nav-item { .dropdown-nav-item {
position: relative; position: relative;
opacity: 0;
margin-top: math.div(variables.$px_horizontalPadding, 4); margin-top: math.div(variables.$px_horizontalPadding, 4);
background: variables.$cg_drawer_navitem; background: variables.$cg_drawer_navitem;
-webkit-background-clip: text; -webkit-background-clip: text;
@@ -108,8 +109,6 @@ a {
color: transparent; color: transparent;
font: 600 28px "Montserrat", sans-serif; font: 600 28px "Montserrat", sans-serif;
text-decoration: none; text-decoration: none;
-webkit-animation: navbar-appear 550ms;
animation: navbar-appear 550ms;
&:first-of-type { &:first-of-type {
margin-top: math.div(variables.$px_horizontalPadding, 2); margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -132,12 +131,15 @@ a {
transform: scaleX(1); transform: scaleX(1);
transform-origin: bottom left; transform-origin: bottom left;
} }
&.visible {
opacity: 1;
}
} }
&.expanded { &.expanded {
width: 100%; width: 100%;
top: unset; top: unset;
bottom: 0;
} }
@include mixins.header_overflow2 { @include mixins.header_overflow2 {

31
resources/scripts/main.js
View File

@@ -22,34 +22,11 @@ async function sleep(milliseconds) {
let navitems = document.getElementsByClassName('dropdown-nav-item'); let navitems = document.getElementsByClassName('dropdown-nav-item');
function showDropdown() { function toggleDropdown() {
el_drawer.classList.remove('hidden');
el_drawer.classList.add('flex');
}
function hideDropdown() {
el_drawer.classList.remove('flex');
el_drawer.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() {
el_drawer.classList.toggle("expanded"); el_drawer.classList.toggle("expanded");
await sleep(500); for (let i = 0; i < navitems.length; i++) {
el_container.classList.toggle("hidden"); navitems[i].classList.toggle("visible");
}
} }
window.addEventListener('load', checkScroll); window.addEventListener('load', checkScroll);