In following example the navigation menu resizes to a pushdown navigation menu when resized.
But the navigation elements are aligned horizontally, whilst they should be vertically aligned. Any idea how to get this right?
In following example the navigation menu resizes to a pushdown navigation menu when resized.
But the navigation elements are aligned horizontally, whilst they should be vertically aligned. Any idea how to get this right?
vertical-align does not play nice with grid.
Very basic example of something that should work.
Simply have one column for small screen and multiple columns for larger. Change the width of window to see them stack.
Also included similar for flexbox which I find to be easier for things like this that are in one direction only.
Set the ul to display block inside your max-width: 400px
media query
[aria-expanded="true"] ~ ul {
max-height: 500px;
transform: rotateX(0);
display: block;
padding: 0;
}
// Give the links some space
// this selector is not great, you should have li's as children of the ul
// divs are not valid children of the ul element.
#menu-list > * {
margin-bottom: 20px;
}
// With a correct HTML structure you would do this instead.
#menu-list > li {
margin-bottom: 20px;
}
Note: As for the actual vertical-align CSS property, it only applies to inline and table-cell elements.
How should I structure the html? I tried something with ul and li’s but it did not change anything…
This example it works. BUT two awkward things happen.
Thanks!!!
.menu ul {
padding: 0;
}
.menu ul {
display: block;
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"] ~ ul {
max-height: 500px;
transform: rotateX(0);
}
const navButton = document.querySelector("button[aria-expanded]");
function toggleNav(event) {
const target = event.currentTarget;
const expanded = target.getAttribute("aria-expanded") === "true" || false;
navButton.setAttribute("aria-expanded", !expanded);
}
navButton.addEventListener("click", toggleNav);