diff --git a/static/navbar.css b/static/navbar.css
index f3f6897c027d7eb6352e8edd62618ab643f807d1..c00467f1a52419a118ca15292119d379d2966252 100644
--- a/static/navbar.css
+++ b/static/navbar.css
@@ -90,31 +90,32 @@ body{
opacity: 0;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
-.my-navbar > li:hover .son {
- visibility: visible;
- opacity: 1;
-}
.my-navbar > li {
float: left;
width: 120px;
height: 110%;
margin-right: 25px;
- position: relative; /* Add this to position the dropdown relative to the parent */
+ position: relative; /* Keep this to position dropdowns relative to their parent */
}
.my-navbar > li .son {
- margin-top: 0; /* Remove any margin */
- padding: 0; /* Remove any padding */
- position: absolute; /* Position it absolutely */
- top: 100%; /* Position it directly below the parent li */
- left: 0; /* Align it directly under the parent */
- width: 100%; /* Make sure it is the same width as the parent */
- background-color: #C6EBE8; /* Make sure the background matches the navbar */
- z-index: 1000; /* Ensure it appears above other content */
+ margin-top: 0; /* Remove any margin to avoid indentation */
+ padding: 0; /* Remove padding if not needed */
+ position: absolute; /* Position absolutely */
+ top: 100%; /* Align the dropdown directly below the parent */
+ left: 0; /* Align to the left edge of the parent */
+ width: 100%; /* Make sure the dropdown is as wide as the parent */
+ background-color: #C6EBE8; /* Match the background to the navbar */
+ z-index: 1000; /* Ensure it appears above other elements */
+ display: none; /* Hide the dropdown initially */
+ opacity: 0; /* Start with an invisible dropdown */
+ transition: opacity 0.3s ease-out; /* Smooth transition for visibility */
}
-.my-navbar > li .son li {
- width: 100%; /* Ensure the dropdown items take full width */
+.my-navbar > li:hover .son,
+.my-navbar > li.active .son {
+ display: block; /* Show dropdown on hover or when active */
+ opacity: 1; /* Make it visible */
}
/* Adjust for smaller screens */
diff --git a/wiki/menu.html b/wiki/menu.html
index 39c81fde02c5e32cded83ea8317ae81729f87b62..b6ce233bd387641c51bf7f44642963f2a54e36fa 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -132,87 +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";
+ // 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]);
}
- if (document.documentElement.clientWidth > 1400){
- navbox.style.height = "320px";
+ }
+
+ // 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]);
}
- 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";
- }
- }
-// function over(el) {
-// resetColors();
-// el.children[0].style.color = "#62D881";
-// if (el.children.length > 1) {
-// let son = el.children[1];
-// son.style.display = "block";
-// setTimeout(() => {
-// son.style.opacity = 1;
-// navbox.style.height = getNavboxHeight();
-// }, 0); // No delay for smoother operation
-// }
-// }
-
-// function leave(el) {
-// resetColors();
-// if (el.children.length > 1) {
-// let son = el.children[1];
-// son.style.opacity = 0;
-// setTimeout(() => {
-// son.style.display = "none";
-// navbox.style.height = "78px";
-// }, 300); // Delay matches the CSS transition
-// }
-// }
-
-// function resetColors() {
-// for (let i = 0; i < 4; i++) {
-// items[i].children[0].style.color = "#185A4F";
-// }
-// }
-
-// function getNavboxHeight() {
-// if (document.documentElement.clientWidth > 1400) {
-// return "320px";
-// } else if (document.documentElement.clientHeight < 1120) {
-// return "245px";
-// } else {
-// return "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
+});
</script>