diff --git a/Website/index.html b/Website/index.html
index 9db9a33c5..823ea826d 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -38,6 +38,21 @@
- Home
- About
+
+
+
+
+ -
+
+
+
+
+
- Learn
- Organization
- FAQ
diff --git a/Website/js/script.js b/Website/js/script.js
index 156f9aaa6..7627fc36f 100644
--- a/Website/js/script.js
+++ b/Website/js/script.js
@@ -176,6 +176,20 @@ async function fetchSubdirectoryCounts() {
});
}
+ const dropdownButton = document.getElementById('dropdownButton');
+ const dropdownMenu = document.getElementById('dropdownMenu');
+
+ dropdownButton.addEventListener('click', function(event) {
+ dropdownMenu.classList.toggle('show');
+ event.stopPropagation(); // Prevent click event from bubbling up
+ });
+
+ window.addEventListener('click', function(event) {
+ if (!dropdownButton.contains(event.target)) {
+ dropdownMenu.classList.remove('show');
+ }
+ });
+
const chatbotButton = document.getElementById('chatbot-button');
const chatbot = document.getElementById('chatbot');
const closeChatbot = document.getElementById('close-chatbot');
diff --git a/Website/styles.css b/Website/styles.css
index 9508de6e4..321830581 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -185,6 +185,49 @@ header {
text-decoration: underline;
}
+.dropdown {
+ float: left;
+ overflow: hidden;
+}
+
+.dropbtn {
+ font-size: 16px;
+ border: none;
+ outline: none;
+ color: white;
+ padding: 14px 16px;
+ background-color: inherit;
+ font-family: inherit;
+ margin: 0;
+ cursor: pointer;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: left;
+}
+
+/* Show dropdown on hover */
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.show {
+ display: block;
+}
+
main {
padding: 20px;
flex: 1;