mirror of
https://github.com/ivabus/www
synced 2024-11-22 16:25:06 +03:00
Added arrow to dropdown button
This commit is contained in:
parent
b3882e7705
commit
2f8d53ea27
1 changed files with 26 additions and 6 deletions
|
@ -22,13 +22,17 @@
|
||||||
{{- partial "click-to-copy.html" . -}}
|
{{- partial "click-to-copy.html" . -}}
|
||||||
<p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand‐alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including <span class="tea brew-install no-break pe-2">brew install</span> .</p>
|
<p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand‐alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including <span class="tea brew-install no-break pe-2">brew install</span> .</p>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button onclick="toggleDropdown()" class="dropbtn hbtn-light hb-light-fill-right">Additional Install Options</button>
|
<button onclick="toggleDropdown()" class="dropbtn hbtn-light hb-light-fill-right">
|
||||||
<div id="myDropdown" class="dropdown-content">
|
Additional Install Options
|
||||||
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#a-fancy-one-liner">fancy one-liner</a>
|
<span id="arrow" class="arrow" style="font-size:16px;">›</span>
|
||||||
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-homebrew">hombrew</a>
|
</button>
|
||||||
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-docker">via docker</a>
|
<div id="myDropdown" class="dropdown-content">
|
||||||
|
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#a-fancy-one-liner">fancy one-liner</a>
|
||||||
|
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-homebrew">hombrew</a>
|
||||||
|
<a href="https://docs.tea.xyz/getting-started/install-tea/without-installer#via-docker">via docker</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -105,22 +109,38 @@
|
||||||
content: "\00a0"; /* non-breaking space character */
|
content: "\00a0"; /* non-breaking space character */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
transition: transform 0.3s;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotated {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
function toggleDropdown() {
|
function toggleDropdown() {
|
||||||
var dropdown = document.getElementById("myDropdown");
|
var dropdown = document.getElementById("myDropdown");
|
||||||
|
var arrow = document.getElementById("arrow");
|
||||||
dropdown.classList.toggle("show");
|
dropdown.classList.toggle("show");
|
||||||
|
arrow.classList.toggle("rotated", dropdown.classList.contains("show"));
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onclick = function(event) {
|
window.onclick = function(event) {
|
||||||
if (!event.target.matches('.dropbtn')) {
|
if (!event.target.matches('.dropbtn')) {
|
||||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||||
|
var arrows = document.getElementsByClassName("arrow");
|
||||||
for (var i = 0; i < dropdowns.length; i++) {
|
for (var i = 0; i < dropdowns.length; i++) {
|
||||||
var openDropdown = dropdowns[i];
|
var openDropdown = dropdowns[i];
|
||||||
|
var arrow = arrows[i];
|
||||||
if (openDropdown.classList.contains('show')) {
|
if (openDropdown.classList.contains('show')) {
|
||||||
openDropdown.classList.remove('show');
|
openDropdown.classList.remove('show');
|
||||||
|
arrow.classList.remove('rotated');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue