ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fis dropdown

Browse Source
This commit is contained in:
samaradel
2022-11-24 15:46:42 +02:00
parent 621c9c6d71
commit ed4f5f4888
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/js/custom.js
View File

@@ -55,6 +55,17 @@ function showMenu(menuName) {
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden", "");
let children = document.querySelectorAll('.nav_menu')
for (let i = 0; i < children.length; i++) {
if (menuElement !== children[i]) {
let btnId = `${children[i].id}-btn`;
let btn = document.getElementById(btnId);
if (btn && !children[i].classList.contains('hidden')) {
children[i].classList.add('hidden')
btn.lastElementChild.classList.replace("rotate-0", "-rotate-90")
}
}
}
setTimeout(function () {
menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0");
}, 10);

2
templates/partials/header.html
View File

@@ -126,7 +126,7 @@
{% set menu_id = header_label ~ "-menu" | slugify %}
<nav>
<div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div id="{{menu_id}}" class="nav_menu mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
{{header_menu | safe }}