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>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></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>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>

4
iletisim.html
View File

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

24
resources/styles/main.css
View File

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