Skip to content

Commit 8c01b4f

Browse files
PowershellScriptsPowershellScripts
authored
000-809: extra level navi
1 parent b058d33 commit 8c01b4f

File tree

2 files changed

+131
-7
lines changed

2 files changed

+131
-7
lines changed

‎_includes/header.html‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,42 @@
1010
<span aria-hidden="true"></span>
1111
</a>
1212
</div>
13-
<div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
13+
<div class="navbar-menu" id="navMenu">
1414
<div class="navbar-start">
1515
{% if site.data.navigation %}
1616
{% for item in site.data.navigation %}
1717
{% if item.dropdown %}
18-
<div class="navbar-item has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
19-
<a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}">{{ item.name }}</a>
18+
<!-- First-level dropdown (open on click) -->
19+
<div class="navbar-item has-dropdown">
20+
<a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}" onclick="toggleDropdown(event)">
21+
{{ item.name }}
22+
</a>
2023
<div class="navbar-dropdown">
2124
{% for subitem in item.dropdown %}
22-
<a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
25+
{% if subitem.dropdown %}
26+
<!-- Second-level dropdown (hoverable) -->
27+
<div class="navbar-item has-dropdown is-hoverable">
28+
<a href="{{ subitem.link | relative_url }}" class="navbar-link">{{ subitem.name }}</a>
29+
<div class="navbar-dropdown">
30+
{% for subsubitem in subitem.dropdown %}
31+
<a href="{{ subsubitem.link | relative_url }}" class="navbar-item">{{ subsubitem.name }}</a>
32+
{% endfor %}
33+
</div>
34+
</div>
35+
{% else %}
36+
<a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
37+
{% endif %}
2338
{% endfor %}
2439
</div>
2540
</div>
2641
{% else %}
42+
<!-- Non-dropdown first-level link -->
2743
<a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
2844
{% endif %}
2945
{% endfor %}
3046
{% endif %}
3147
</div>
48+
3249
<div class="navbar-end">
3350
<a href=""><img src="../../../../flag.png"/></a>
3451
<a class="navbar-item" href="#">
@@ -39,4 +56,37 @@
3956

4057
</div>
4158
</div>
42-
</nav>
59+
</nav>
60+
61+
<script>
62+
function toggleDropdown(event) {
63+
event.preventDefault();
64+
65+
// Find the parent dropdown container
66+
const parentItem = event.target.closest('.has-dropdown');
67+
68+
// Toggle the active state
69+
if (parentItem.classList.contains('is-active')) {
70+
parentItem.classList.remove('is-active');
71+
} else {
72+
// Close all other dropdowns
73+
document.querySelectorAll('.navbar-item.has-dropdown.is-active').forEach(item => {
74+
item.classList.remove('is-active');
75+
});
76+
77+
// Open the clicked dropdown
78+
parentItem.classList.add('is-active');
79+
}
80+
}
81+
82+
// Close dropdowns when clicking outside
83+
document.addEventListener('click', function (event) {
84+
const target = event.target;
85+
if (!target.closest('.has-dropdown')) {
86+
document.querySelectorAll('.navbar-item.has-dropdown.is-active').forEach(item => {
87+
item.classList.remove('is-active');
88+
});
89+
}
90+
});
91+
</script>
92+

‎_sass/_main.scss‎

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,80 @@ $hero-darken: $dark !default;
1717
@import "showcase";
1818
@import "../node_modules/bulma-block-list/src/block-list.scss";
1919

20-
.gh-sponsor {
21-
color: #ea4aaa;
20+
21+
/* Position third-level dropdown */
22+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown .navbar-dropdown {
23+
display: none; /* Hide third-level dropdown by default */
24+
position: absolute;
25+
left: 100%; /* Position it to the right of the second-level item */
26+
top: 0;
27+
background-color: #ffffff; /* Match your dropdown background */
28+
z-index: 1000;
29+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for clarity */
30+
}
31+
32+
/* Show third-level dropdown on hover */
33+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown:hover .navbar-dropdown {
34+
display: block;
35+
}
36+
37+
/* Ensure the second-level menu doesn't get disrupted */
38+
.navbar-item.has-dropdown .navbar-dropdown {
39+
position: absolute;
40+
background-color: #ffffff;
41+
z-index: 1000;
42+
top: 100%;
43+
left: 0;
44+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
45+
}
46+
47+
/* Prevent navbar height from expanding */
48+
.navbar-menu {
49+
overflow: visible;
50+
position: relative;
51+
height: auto;
52+
}
53+
54+
55+
56+
/* Ensure second-level items with dropdowns have consistent styling */
57+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
58+
background-color: transparent; /* Remove black highlight */
59+
color: #000000; /* Set text to black */
60+
}
61+
62+
/* Add hover effect for better interaction */
63+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown > .navbar-link:hover {
64+
background-color: #f5f5f5; /* Light gray on hover */
65+
color: #000000; /* Keep text black */
66+
}
67+
68+
/* Optional: Ensure dropdown borders match overall style */
69+
.navbar-dropdown {
70+
border: 1px solid #e5e5e5; /* Add a subtle border */
71+
border-radius: 4px; /* Optional: Rounds corners */
72+
}
73+
74+
75+
/* Full line hover effect for second-level items with dropdowns */
76+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
77+
display: flex; /* Make the entire line interactive */
78+
align-items: center; /* Align text and arrow */
79+
justify-content: space-between; /* Space between text and arrow */
80+
padding: 0.25rem 1rem; /* Same padding as other items */
81+
background-color: transparent; /* Default background */
82+
color: #000000; /* Black text by default */
83+
}
84+
85+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown > .navbar-link:hover {
86+
background-color: #f5f5f5; /* Light grey background for the entire line */
87+
color: #000000; /* Keep text black */
88+
}
89+
90+
91+
/* Fix text indentation to match other second-level items */
92+
.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
93+
text-indent: 0; /* Remove indentation */
94+
padding-left: 0rem; /* Align padding with other items */
95+
padding-right: 2rem
2296
}

0 commit comments

Comments
 (0)