Feedback on Responsive Side Nav

@sibertAug 24.2019

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: https://jsfiddle.net/p5wohy4m/14/
Live site: http://94.237.25.207:8080

Any tip, improvement or UX comments are welcome.

to post a comment

CSS Full-stack Developer JavaScript

21 Comments(s) _↴

@codyhillAug 24.2019 — #@sibert#1607952

3 Things:

1. I would keep the menu button in the same place if it's a toggle. If you the button is not a toggle I would add an X button to close the navbar;

2. I would also add a transition. You can do that by adding transition: all 300ms ease-in to the navbar in css. Also, the hover effect on mobile is not a big deal as you can hover over an element on mobile;

3. I would make the text color on hover not be a dark color if you have a dark background. Make it a different color or keep it white but lower the opacity. something like color: rgba(255,255,255,.7);

@sibertauthorAug 24.2019 — #> @RaulRogojan#1607953 3 Things:

1. Good point. I will implement this.

2. I will test this also.

3. Actually this is not ready yet, so the color will be on the background.

@codyhillAug 24.2019 — #@sibert#1607955 Dope!

Good luck!

@sibertauthorAug 26.2019 — #> @RaulRogojan#1607957 Dope!

Thank you for your support!

1. Implemented

2. I did not get it to work

3. Implemented (see below)

jsfiddle: https://jsfiddle.net/gv4820j1/3/

Live site: http://94.237.25.207:8080

Next problem is to close ALL dropdowns but ONE. Using vanilla Javascript.

My clumsy attempt below:

``<i>
 </i>// close all dropdowns (does not work and makes it impossible to close the dropdown)
 for (i = 0; i &lt; 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 &lt; 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>``

Any tip?

@codyhillAug 26.2019 — #@sibert#1607991 Awesome!

I would appreciate a CodePen or JSFiddle with all the code. Not just HTML and CSS.

When it comes to closing the dropdowns, you code it in an old way so I don't really understand it.

I feel like you complicated yourself a lot by doing that. There are much simpler ways of doing it.

I would suggest you get a look at data-type. [Here](https://codepen.io/raul-rogojan/pen/eYOzvRd?editors=1010) I build the tabs using that. With this, I also build my portfolio. the mobile version you can check that out [here](https://rogojan-raul-portfolio.netlify.com/).

The only difference is that I used

<i>
 </i> portfolioButtons.forEach(button =&gt; {
 button.addEventListener('click', ()=&gt; {
 const targetContent = document.querySelector(button.dataset.contentTarget);
 targetContent.classList.toggle('containers-active');
 });
 });

To understand this concept better I will leave you a tutorial [here](https://www.youtube.com/watch?v=5L6h_MrNvsk).

@sibertauthorAug 26.2019 — #> @RaulRogojan#1607994 I would appreciate a CodePen or JSFiddle with all the code. Not just HTML and CSS.

jsfiddle: https://jsfiddle.net/gv4820j1/3/

OK?

@codyhillAug 26.2019 — #@sibert#1607998 no. Copy all of the code

@sibertauthorAug 26.2019 — #> @RaulRogojan#1607999 no. Copy all of the code

The Javascript is embedded in the html...

@codyhillAug 26.2019 — #@sibert#1608003 https://codepen.io/raul-rogojan/pen/NWKpOaJ?editors=0010

I made it work.

BTW using display none and display block to make the navbar close and open is not the best idea so I am suggesting you try something else. like, transform translate opacity position absolute. Play around some more.

@codyhillAug 26.2019 — #@sibert#1608003 Also to understand the code make sure to check the tutorial that I left above. If you have any question ask.

@sibertauthorAug 26.2019 — #> @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

Thank You!

There are some things in this solution I need some explanation:

1. The side nav is no longer responsive (do not disappear automatically on small screens)...

2. The next step is to create this nav on-the-fly. Is there any problems with fixed ids like #box-3?

3. How do I close ALL sub menus but ONE. Now all is open (the others remains open...)?

Or will this be explained in the video enclosed in your previous mail?

@codyhillAug 27.2019 — #@sibert#1608011

1. The navbar is no longer "responsive" because I deleted the code that made it responsive. The function you had with the media queries. But you don't need to do that in javaScript. Instead, you should do it in CSS. Tutorial [here](https://www.youtube.com/watch?v=2KL-z9A56SQ). BTW if you want the img to disappear on the desktop version, you can do it with display none and display block.

2. I don't know what you mean by "on-the-fly" and by "fixed ID's". The reason you have those ID's is to link the dropdown buttons to the dropdown box. If you would have watched the video you would have know why you need those ID's.

3. To close the other dropdown boxes you need to tap again on the dropdown buttons.

element.classList.toggle('class') = element.classList.add('class'); element.classList.remove('class').

In other wards, toggle is adding and removing that class.

If you mean that you want to close all the other boxes when you open another one. I let you a comment in the CodePen.

I let the explanation and the code right below. I will also leave it here.

<i>
 </i>//   This is if you want to close the other dropdow boxes;
 dropDownBox.forEach(box =&gt; box.classList.remove('drop-down-active'));

The video teaches you how to build tab manus. It does it with data and dataset. This concept will help you in many other situations. Unfortunately, the tutorial is a bit different from what you need. Watch the tutorial, try to implement it in the things you need. You have to think a little bit by yourself :D.

Good luck!

@sibertauthorAug 28.2019 — #> @RaulRogojan#1608038 But you don't need to do that in javaScript. Instead, you should do it in CSS.

Well, I just do not get it to work with CSS. The toggle button stops working on mobile.

[https://jsfiddle.net/0o9qxeh2/25/](CSS media query not working)

But using the toggle in js, this will work more predictable:

[https://jsfiddle.net/0o9qxeh2/22/](Javascript media query works)

So, the question is if it possible to get the toggle button using CSS, work like the js version?

@sibertauthorAug 28.2019 — #> @RaulRogojan#1608038 I don't know what you mean by "on-the-fly"

You can hardcode the menu, but you can also make it data driven. I have note tested yet, but found one example of populating on-the-fly:

``<i>
 </i> &lt;select&gt; // for loop in html template example
 {{range $key, $value := .}}
 &lt;option value="{{ $value }}"&gt;{{ $key }}&lt;/option&gt;
 {{end}}
 &lt;/select&gt;<i>
 </i>``

The data could be from a SQL query or similar.

Using id for each submenu moves the problem to a previous level. Adding complexity to the template looping.

@codyhillAug 28.2019 — #@sibert#1608083 I get it but that's something you have to figure it out.

@gabri001Aug 29.2019 — #Really happy to read your news, it's been a while since I visit your site and I noticed that you have not posted news.

[http://www.onlinedev.com/](url)

@sibertauthorSep 06.2019 — #> @RaulRogojan#1608085 that's something you have to figure it out.

About a week later I have figured out how to avoid #id and get the media query to work:

https://jsfiddle.net/vnq3ws4L/5/

Thank you for pointing me in the right direction!

@codyhillSep 06.2019 — #@sibert#1608440 Nice job

@codyhillSep 08.2019 — #@sibert#1608440 I just found this tutorial and I thought it might help you. https://www.youtube.com/watch?v=zhrqSKKCOwk. This will make you understand better how to sidebar works.

@sibertauthorSep 12.2019 — #> @RaulRogojan#1608506 I just found this tutorial

Thank you! I have implemented some of your tip in the live site: http://94.237.25.207:8080

@codyhillSep 12.2019 — #@sibert#1608693 better, make the transition when nav bar is opening longer.

Also in #Full-stackDeveloper _↴

I never learned how to publish my own pictures to the web (Should I be embarrassed?)Need Help with Loading into table cell.How to submit a document in a form??

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This

Feedback on Responsive Side Nav

21 Comments(s) _↴

Also in #Full-stackDeveloper _↴

Success!

Social

Version

Feedback on Responsive Side Nav

21 Comments(s) ↴

Also in #Full-stackDeveloper ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #Full-stackDeveloper _↴