mirror of
https://github.com/ivabus/www
synced 2024-11-10 07:15:15 +03:00
Added arrow to dropdown button
This commit is contained in:
parent
b3882e7705
commit
2f8d53ea27
|
@ -22,13 +22,17 @@
|
|||
{{- 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>
|
||||
<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">
|
||||
Additional Install Options
|
||||
<span id="arrow" class="arrow" style="font-size:16px;">›</span>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
|
@ -105,22 +109,38 @@
|
|||
content: "\00a0"; /* non-breaking space character */
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.3s;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
function toggleDropdown() {
|
||||
var dropdown = document.getElementById("myDropdown");
|
||||
var arrow = document.getElementById("arrow");
|
||||
dropdown.classList.toggle("show");
|
||||
arrow.classList.toggle("rotated", dropdown.classList.contains("show"));
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropbtn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
var arrows = document.getElementsByClassName("arrow");
|
||||
for (var i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
var arrow = arrows[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
arrow.classList.remove('rotated');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue