diff --git a/wiki/menu.html b/wiki/menu.html index b6ce233bd387641c51bf7f44642963f2a54e36fa..f3da878888ee28f53dee3d8db276c0db3cb3f9eb 100644 --- a/wiki/menu.html +++ b/wiki/menu.html @@ -132,121 +132,121 @@ </ul> </nav> <script> - // var navbox = document.getElementById("navbox"); - // let navbar = document.getElementById("my-navbar"); - // let items = navbar.children; - // function over(el){ - // for (i = 0; i < 4; i++){ - // items[i].children[0].style.color = "#185A4F"; - // } - // el.children[0].style.color = "#62D881"; - // if (el.children.length > 1){ - // let son = el.children[1]; - // if (getComputedStyle(son,null)["display"]=="none"){ - // setTimeout(function(){ - // son.style.opacity = 1; - // }, 1); - // son.style.display = "block"; - // } - // if (document.documentElement.clientWidth > 1400){ - // navbox.style.height = "320px"; - // } - // else if (document.documentElement.clientHeight < 1120){ - // navbox.style.height = "245px"; - // } - // else{ - // navbox.style.height = "280px"; - // } - // } - // } - // function leave(el){ - // for (i = 0; i < 4; i++){ - // items[i].children[0].style.color = "#185A4F"; - // } - // if (el.children.length > 1){ - // let son = el.children[1]; - // if (getComputedStyle(son,null)["display"]=="block"){ - // son.style.opacity = 0; - // setTimeout(function(){ - // son.style.display = "none"; - // }, 350); - // } - // navbox.style.height = "78px"; - // } - // } -let navbox = document.getElementById("navbox"); -let navbar = document.getElementById("my-navbar"); -let items = navbar.children; - -function over(el) { - resetColors(); - el.children[0].style.color = "#62D881"; - - // Close any open dropdowns except the current one - for (let i = 0; i < items.length; i++) { - if (items[i] !== el) { - closeDropdown(items[i]); + var navbox = document.getElementById("navbox"); + let navbar = document.getElementById("my-navbar"); + let items = navbar.children; + function over(el){ + for (i = 0; i < 4; i++){ + items[i].children[0].style.color = "#185A4F"; + } + el.children[0].style.color = "#62D881"; + if (el.children.length > 1){ + let son = el.children[1]; + if (getComputedStyle(son,null)["display"]=="none"){ + setTimeout(function(){ + son.style.opacity = 1; + }, 1); + son.style.display = "block"; } - } - - // Show the current dropdown - let son = el.children[1]; - if (son) { - son.style.display = "block"; - son.style.opacity = 1; - el.classList.add('active'); - adjustNavHeight(); - } -} - -function leave(el) { - // Do nothing here, as the dropdown should stay open -} - -function closeDropdown(el) { - let son = el.children[1]; - if (son) { - son.style.opacity = 0; - setTimeout(() => { - son.style.display = "none"; - el.classList.remove('active'); - }, 300); // Match this delay with the CSS transition time - } -} - -function resetColors() { - for (let i = 0; i < 4; i++) { - items[i].children[0].style.color = "#185A4F"; - } -} - -function adjustNavHeight() { - if (document.documentElement.clientWidth > 1400) { - navbox.style.height = "320px"; - } else if (document.documentElement.clientHeight < 1120) { - navbox.style.height = "245px"; - } else { - navbox.style.height = "280px"; - } -} - -// Close dropdown when clicking outside the navbar -document.addEventListener('click', function(event) { - let isClickInside = navbox.contains(event.target); - if (!isClickInside) { - for (let i = 0; i < items.length; i++) { - closeDropdown(items[i]); + if (document.documentElement.clientWidth > 1400){ + navbox.style.height = "320px"; + } + else if (document.documentElement.clientHeight < 1120){ + navbox.style.height = "245px"; + } + else{ + navbox.style.height = "280px"; } - navbox.style.height = "78px"; // Reset the height - } -}); - -// Close dropdown on mouseleave for the whole navbar -navbox.addEventListener('mouseleave', function() { - for (let i = 0; i < items.length; i++) { - closeDropdown(items[i]); - } - navbox.style.height = "78px"; // Reset the height -}); + } + } + function leave(el){ + for (i = 0; i < 4; i++){ + items[i].children[0].style.color = "#185A4F"; + } + if (el.children.length > 1){ + let son = el.children[1]; + if (getComputedStyle(son,null)["display"]=="block"){ + son.style.opacity = 0; + setTimeout(function(){ + son.style.display = "none"; + }, 350); + } + navbox.style.height = "78px"; + } + } +// let navbox = document.getElementById("navbox"); +// let navbar = document.getElementById("my-navbar"); +// let items = navbar.children; + +// function over(el) { +// resetColors(); +// el.children[0].style.color = "#62D881"; + +// // Close any open dropdowns except the current one +// for (let i = 0; i < items.length; i++) { +// if (items[i] !== el) { +// closeDropdown(items[i]); +// } +// } + +// // Show the current dropdown +// let son = el.children[1]; +// if (son) { +// son.style.display = "block"; +// son.style.opacity = 1; +// el.classList.add('active'); +// adjustNavHeight(); +// } +// } + +// function leave(el) { +// // Do nothing here, as the dropdown should stay open +// } + +// function closeDropdown(el) { +// let son = el.children[1]; +// if (son) { +// son.style.opacity = 0; +// setTimeout(() => { +// son.style.display = "none"; +// el.classList.remove('active'); +// }, 300); // Match this delay with the CSS transition time +// } +// } + +// function resetColors() { +// for (let i = 0; i < 4; i++) { +// items[i].children[0].style.color = "#185A4F"; +// } +// } + +// function adjustNavHeight() { +// if (document.documentElement.clientWidth > 1400) { +// navbox.style.height = "320px"; +// } else if (document.documentElement.clientHeight < 1120) { +// navbox.style.height = "245px"; +// } else { +// navbox.style.height = "280px"; +// } +// } + +// // Close dropdown when clicking outside the navbar +// document.addEventListener('click', function(event) { +// let isClickInside = navbox.contains(event.target); +// if (!isClickInside) { +// for (let i = 0; i < items.length; i++) { +// closeDropdown(items[i]); +// } +// navbox.style.height = "78px"; // Reset the height +// } +// }); + +// // Close dropdown on mouseleave for the whole navbar +// navbox.addEventListener('mouseleave', function() { +// for (let i = 0; i < items.length; i++) { +// closeDropdown(items[i]); +// } +// navbox.style.height = "78px"; // Reset the height +// }); </script>