A newbie's problem with making a navigation dropdown

[Wilfred Thompson]

I am Wilfred Thompson and I am a newbie when it comes to web design. My problem is that I am having a difficult time understanding CSS, HTML, and the HTML element Script which is why my navigation dropdown is a broken mess. My aim is to create a navigation dropdown that starts from a small button with three lines that will ultimately drop down the menus Home, Gallery, About, and Contact vertically and then the close symbol will also appear which will hide the menus if clicked. I want the three lined button dropdown navigation to appear only after reaching screen width 1044 pixels and below because I am fine with the menus being shown and in-line with each other side by side from width 1045 pixels and above. How can I fix this? Please help.

My HTML file and CSS file for the website I am talking about is in the attachment below. Please check on it to further understand my point.

Sample_Website.zip

[Sensei]

Hello!

What HTML, CSS, JS tutorial sites do you use?

I think one of the best is https://www.w3schools.com

There is a sample dropdown code there:

https://www.w3schools.com/css/css_dropdowns.asp

Curtain Menu example:

https://www.w3schools.com/howto/howto_js_curtain_menu.asp

Best Regards!

 

Edited December 7, 2021 by Sensei

[Sensei]

@Wilfred Thompson

I checked your source code.

It will work better if you replace line:

                document.getElementById("navdrop").style.width = "100";

by

                document.getElementById("navdrop").style.width = "100%";

More info about units in HTML/CSS:

https://www.w3schools.com/cssref/css_units.asp

 

If you want to test this thoroughly, open your page in a separate window and change the width (several different widths) of the window (and play with UI).

There are other problems evident if you start changing the width of the window...

Edited December 8, 2021 by Sensei

[fiveworlds]

<span id="open" class="open" onclick="openNav()">&#9776</span>

Why are you using a span for a button?

&#9776 shouldn't be used as it doesn't work across mobile browsers (damn you apple/google not being consistent)

Generally we use libraries like fontawesome for this https://fontawesome.com/v5.15/icons/bars?style=solid

Alternatively you can make your own image or svg.

<a href="javascript:void(0)" class="closeit" onclick="closeNav()">&times;</a>

Same issue here using a link instead of a button. 

&times shouldn't be used.

let open = document.getElementById("open"),
	navdrop = document.getElementById("navdrop");
				
function openNav() {
  open.style.display = "none";
  navdrop.style.width = "100%";
}
function closeNav() {
  navdrop.style.width = "0";
  open.style.display = "block";
}

document.getElementById should not be in your openNav and closeNav functions.

There is no need for multiple functions here.

let open = document.getElementById("open"),
    navdrop = document.getElementById("navdrop");

function toggleMenu(isOpen) {
  open.style.display = isOpen ? "none" : "block";
  navdrop.style.width = isOpen ? "100%" : "0";
}

You should think about disabled users too. &times is meaningless to a blind person.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

<button aria-label="Close" onclick="myDialog.close()">X</button>

CSS wise you shouldn't be using position fixed on your nav because when you scroll the page it remains on screen.

@media screen and (max-width: 636px) {
  nav {
      padding: 1em .5em 1em 1em;
      margin: 0 auto;
      overflow-x: hidden;
      z-index: 1;
      position: fixed;
      transition: 0.5s;
  }
}

From a usability perspective you are adding this dropdown to support mobile users but someone using a phone will generally have their fingers on the bottom of the screen rather than the top.

 

 

[Sensei]

On 12/10/2021 at 1:53 AM, fiveworlds said:

&#9776 shouldn't be used as it doesn't work across mobile browsers (damn you apple/google not being consistent)

It should be ☰ in the first place.

W3Schools has nice example how to make animated hamburger menu icon:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js

Non-animated version:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon

 

Edited December 11, 2021 by Sensei