Stephan Heunis
175054e4f6
All checks were successful
Deploy on webserver / Build site and deploy on success (push) Successful in 1m29s
Our previous approach to allow menu item grouping, a.k.a. submenus, was to create a menu item with a 'pageRef', and to link to other pages from that associated content page. E.g. the 'outputs' menu links to '/outputs' and that page links to e.g. '/instruments' and '/datasets' which aren't menu items themselves. While functional, this approach has the drawback that the top-level, or parent, menu item needs a 'pageRef', which means that namespace is taken and cannot be used for a different purpose. This new approach uses Hugo's support for submenus along with a customized version of congo's hybrid header template and new custom CSS in order to define parent and child menu items that are rendered as dropdown groups. Importantly, the parent menu item needs the 'identifier' property (e.g. 'identifier = outputs') such that its children menu items can refer to it as their parent (e.g. 'parent = outputs'). The 'hybrid.html' template is updated for both the hamburger and basic menu sections (which render on narrow and wide screens respectively). For the basic menu, the parent icon will show and the dropdown will appear on hover, containing the icons and names of all of its children menus. For the hamburger menu, the parent is ignored and all children are rendered. In this commit, the 'datasets' and 'instruments' menu items are created as submenus of the 'outputs' menu item, which now has no 'pageRef' specified anymore.
78 lines
No EOL
1.4 KiB
CSS
78 lines
No EOL
1.4 KiB
CSS
/* STYLES FOR SUBMENU DROPDOWN FUNCTIONALITY */
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
nav li {
|
|
position: relative;
|
|
}
|
|
|
|
/* Add dropdown arrow for items with submenus */
|
|
nav li > ul::before {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
nav li:has(ul) > a::after {
|
|
content: "▼";
|
|
font-size: 0.5em;
|
|
margin-left: 2px;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Heading inside submenu dropdown */
|
|
.submenu-heading {
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
opacity: 0.75;
|
|
color: #333;
|
|
pointer-events: none;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
/* Submenu styles */
|
|
nav ul ul {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background-color: rgba(245, 245, 245, 0.95);
|
|
border-radius: 5px;
|
|
list-style: none;
|
|
padding: 2px 2px;
|
|
margin: 0 0 0 -10px;
|
|
min-width: 120px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Show submenu on hover */
|
|
nav li:hover > ul {
|
|
display: block;
|
|
}
|
|
|
|
/* Submenu item styling */
|
|
nav ul ul li {
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Submenu link styling */
|
|
nav ul ul li a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Hover effect on submenu items */
|
|
nav ul ul li:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
text-decoration-thickness: 2px;
|
|
text-decoration-color: rgba(var(--color-primary-500), 1);
|
|
} |