Menu
My intent is to create an own admin site. There are tons of them out there, but most of them are slow. So I decided to test Golang instead of common php or framework.
The first problem that I hit was to hide and show the side navigation. It seems that the javascript and media query did not work together. Now I think I found one solution that seems to work. But there are probably room for improvements.
A jsfiddle:
Live site:
Any tip, improvement or UX comments are welcome.
transition: all 300ms ease-in
color: rgba(255,255,255,.7)
>@RaulRogojan#1607953 3 Things:
>@RaulRogojan#1607957 Dope!
``<i>
</i>// close all dropdowns (does not work and makes it impossible to close the dropdown)
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
}
});
}
//close and open dropdowns
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}<i>
</i>
``
<i>
</i> portfolioButtons.forEach(button => {
button.addEventListener('click', ()=> {
const targetContent = document.querySelector(button.dataset.contentTarget);
targetContent.classList.toggle('containers-active');
});
});
>@RaulRogojan#1607994 I would appreciate a CodePen or JSFiddle with all the code. Not just HTML and CSS.
>@RaulRogojan#1607999 no. Copy all of the code
>@RaulRogojan#1608006 I made it work.
> BTW using display none and display block to make the navbar close and open is not the best idea
element.classList.toggle('class') = element.classList.add('class'); element.classList.remove('class')
<i>
</i>// This is if you want to close the other dropdow boxes;
dropDownBox.forEach(box => box.classList.remove('drop-down-active'));
>@RaulRogojan#1608038 But you don't need to do that in javaScript. Instead, you should do it in CSS.
>@RaulRogojan#1608038 I don't know what you mean by "on-the-fly"
``<i>
</i> <select> // for loop in html template example
{{range $key, $value := .}}
<option value="{{ $value }}">{{ $key }}</option>
{{end}}
</select><i>
</i>
``
>@RaulRogojan#1608085 that's something you have to figure it out.
>@RaulRogojan#1608506 I just found this tutorial
0.1.9 — BETA 4.25