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

Refactor drawer toggle usage

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-22 14:12:44 +03:00
parent 7676e5e8d7
commit 5185d05ca4
6 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
aydinlatma.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a> <a class="nav-item" href="iletisim.html">İletişim</a>
</nav> </nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off"> <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle"> <label for="toggle" id="toggle-label">
<span class="bar bar1"></span> <span class="bar bar1"></span>
<span class="bar bar2"></span> <span class="bar bar2"></span>
<span class="bar bar3"></span> <span class="bar bar3"></span>

4
hakkimizda.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a> <a class="nav-item" href="iletisim.html">İletişim</a>
</nav> </nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off"> <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle"> <label for="toggle" id="toggle-label">
<span class="bar bar1"></span> <span class="bar bar1"></span>
<span class="bar bar2"></span> <span class="bar bar2"></span>
<span class="bar bar3"></span> <span class="bar bar3"></span>

4
iletisim.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="#">İletişim</a> <a class="nav-item" href="#">İletişim</a>
</nav> </nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off"> <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle"> <label for="toggle" id="toggle-label">
<span class="bar bar1"></span> <span class="bar bar1"></span>
<span class="bar bar2"></span> <span class="bar bar2"></span>
<span class="bar bar3"></span> <span class="bar bar3"></span>

4
index.html
View File

@@ -32,8 +32,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a> <a class="nav-item" href="iletisim.html">İletişim</a>
</nav> </nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off"> <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle"> <label for="toggle" id="toggle-label">
<span class="bar bar1"></span> <span class="bar bar1"></span>
<span class="bar bar2"></span> <span class="bar bar2"></span>
<span class="bar bar3"></span> <span class="bar bar3"></span>

4
kamera.html
View File

@@ -30,8 +30,8 @@
<a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a> <a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
<a class="nav-item" href="iletisim.html">İletişim</a> <a class="nav-item" href="iletisim.html">İletişim</a>
</nav> </nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off"> <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle"> <label for="toggle" id="toggle-label">
<span class="bar bar1"></span> <span class="bar bar1"></span>
<span class="bar bar2"></span> <span class="bar bar2"></span>
<span class="bar bar3"></span> <span class="bar bar3"></span>

24
resources/styles/main.css
View File

@@ -576,14 +576,14 @@ h1 {
#header #toggle { #header #toggle {
display: none; display: none;
} }
#header .dropdown-toggle { #header #toggle-label {
margin: 0; margin: 0;
width: 36px; width: 36px;
height: 36px; height: 36px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
#header .dropdown-toggle .bar { #header #toggle-label .bar {
padding: 0; padding: 0;
width: 36px; width: 36px;
height: 4px; height: 4px;
@@ -593,18 +593,18 @@ h1 {
transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
position: absolute; position: absolute;
} }
#header .dropdown-toggle .bar1 { #header #toggle-label .bar1 {
transform-origin: 5%; transform-origin: 5%;
} }
#header .dropdown-toggle .bar4 { #header #toggle-label .bar4 {
transform-origin: 5%; transform-origin: 5%;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .dropdown-toggle { #header #toggle-label {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
#header .dropdown-toggle .bar { #header #toggle-label .bar {
width: 28px; width: 28px;
} }
} }
@@ -627,33 +627,33 @@ h1 {
#header .bar4 { #header .bar4 {
bottom: 0; bottom: 0;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar1 { #header #toggle:checked + #toggle-label > .bar1 {
transform: rotate(45deg); transform: rotate(45deg);
height: 3px; height: 3px;
width: 50px; width: 50px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar1 { #header #toggle:checked + #toggle-label > .bar1 {
width: 39px; width: 39px;
} }
} }
#header .toggle:checked + label > .dropdown-toggle > .bar3 { #header #toggle:checked + #toggle-label > .bar3 {
transform: rotate(45deg); transform: rotate(45deg);
height: 3px; height: 3px;
background-color: transparent; background-color: transparent;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar2 { #header #toggle:checked + #toggle-label > .bar2 {
transform: rotate(-45deg); transform: rotate(-45deg);
height: 3px; height: 3px;
background-color: transparent; background-color: transparent;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar4 { #header #toggle:checked + #toggle-label > .bar4 {
transform: rotate(-45deg); transform: rotate(-45deg);
height: 3px; height: 3px;
width: 50px; width: 50px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar4 { #header #toggle:checked + #toggle-label > .bar4 {
width: 39px; width: 39px;
} }
} }