Jump to content

A newbie's problem with making a navigation dropdown


Wilfred Thompson

Recommended Posts

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

Link to comment
Share on other sites

@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 by Sensei
Link to comment
Share on other sites

<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.

image.png.1040bfdae63faf3a8e8c915ab6f8606c.png

 

 

Link to comment
Share on other sites

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 &#9776; 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 by Sensei
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.