Proper navigation code

HTML & CSS
1

please see

https://forallthetime.com/grid1.html

i got the nav from CodePen

is the navigation code appropriate and valid?

i ask because i posted some time back other nav code that was something i should not use

also, i validated the CSS, fine

however i validated the HTML and found errors i do not follow

many thanks!!

2

Which HTML errors do you not understand? They seem pretty self-evident to me.

1 Like
3

It seems to work ok and you have a click menu for smaller screen which is good.

There are issues (as there are will all drop down) in that you have provided no keyboard navigation for the menu. I could not use the menu as I use the keyboard a lot. People without a mouse or touch cannot use the site at all.

You could implement some basic keyboard accessibility for modern browsers by simply using focus-within.

e.g.

nav li:focus-within > ul{
  display:block
  }

That will open the menu when an anchor is tabbed to. You would also need to provide some clue that elements have been focussed as your whole top menu has no focus styles appearing.

The other issue is that you don’t actually do any touch detection (as far as I could see on first glimpse) but you go from a hover menu to a click menu at about 1031px but I believe there are tablets larger than that (especially if in landscape mode). (It may be that the tablets may still work (after a fashion) as some tablets treat a hover as a first touch and may indeed show the menu but won’t hide it until something else has focus. You would need to test this for yourself as I don’t have any large tablets to test.)

On my iphone the menu with all its levels open is miles too long and unwieldy. Its structure doesn’t make it easy to work out which is sub menu item or not as some sub sub menus have the same styling as the default menu. You may need to style the mobile view more subtly and with each level more obvious that it is a sub level.

Do you need to have so many items in your menu? Do you have sub navigation on other pages? It might be that you can reduce the number of items with a bit of planning.

Of course the last comments are really a design and usability question but the menu does seem to be working ok.

As @Gandalf said the html errors are pretty self explanatory but if you need clarification then be more specific and we’ll try to help.:slight_smile:

4

yes, i have not tweaked my nav at all, not a single line… so i will obviously adjust what ever needs adjusting to make it responsive and look nice

just to be clear, and i hope you don’t mind me asking, can i add

nav li:focus-within > ul{
  display:block
  }

is this a fully working nav now?

or

is it best i use another code that doesn’t have problems

thanks to you both!

5

Yes you can add that and it will allow some basic keyboard navigation.

Apart from the comments already mentioned it is working ok.

Fully accessible, hover / touch friendly / keyboard navigation dropdown menus are few and far between. You’ll most likely exchange one set of problems for another.:wink:

That’s why I prefer a click menu for all devices and not rely on hover effects.

6

THANK YOU!

does this work for your quote?

nav li:focus-within > ul{
  display:block
  }

i did try figuring it out from your post, cannot… so i am now asking :slight_smile:

7

Yes that will allow a basic keyboard navigation.

You can easily test yourself by using the tab key and not the mouse and see if the sub menus open as you tab through.

8

OK :slight_smile:

i will give you 0.00000000001% of my first million!

sound fair?

1 Like
9

help, please

i looked over the validation… to be specific i dont get the warning and error results

and i dont get the info results

example: >↩</head>↩**<body ng-app="MyApp" layout="column" layout-fill>** ↩ <!--

i dont get this at all :frowning:

10

The warnings and errors are given here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fgrid1.html

11

You will get errors on all the angular stuff like ng-app and any non standard attributes in the html.

Error : Attribute ng-app not allowed on element body at this point.

If you want them to validate you need to use data- prefixes to your custom attributes. I believe angular allows this. e.g. data-ng-app.

However although the custom attributes throw an error it is unlikely that they will do any harm unless they clash with someone else’s custom attributes.

Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 15, column 3; to line 15, column 37

/label>↩ <input type="checkbox" id="drop" />↩ <ul

That just means do this <input type="checkbox" id="drop">

Bad value /IMAGES/Barcelona 4_1_1_1000.jpg for attribute src on element img: Illegal character in path segment: space is not allowed.

From line 108, column 7; to line 108, column 94

r">↩ <img width="500" height="350" src="/IMAGES/Barcelona 4_1_1_1000.jpg" alt="Random Image">↩

You are not allowed to have spaces in your path names. You should not create path names that don’t have a space.

12

ok

significant progress here

https://forallthetime.com/grid1.html

are you telling me i need not worry about the 3 errors?

if they need correcting, please tell me specifically what i need to do

i don’t understand what is happening here

and i think you said before no worries over the Lorem ipsum warning

many thanks!!

13

They will most likely do no harm and thousands of sites use them.

I believe in some versions of angular you can just add the data attribute as I mentioned above and will allow validation.

data-ng-app instead of ng-app.

Angular is not my thing so you need to read the documentation to make sure.

I assume you are building this with angular and have not just copied those attributes into your mark up?

14

not using angular (i think )dont know what that is

all the code being validated was from a code pen, minus the images

looked here don’t get it

i would like to move on

please get back to me :slight_smile:

15

Where did this code in the body tag come from then?

<body ng-app="MyApp" layout="column" layout-fill>

Did you copy it from someone else by mistake?

If so you can remove it and just use <body> instead.

16

hhmm… no idea where i got <body ng-app="MyApp" layout="column" layout-fill>

however, i took your advice and replaced that code with <body>

errors gone! all of them!

and the Lorem ipsum is moot… some time back i thought you told me that… kindly confirm :slight_smile:

well… am i in the clear?

i can move on now?

seriously, i thank you

17

Yes ignore that Lorem Ipsum warning :slight_smile:

I think you’re good to go now. :wink:

18

hello,

CSS question for you

i am using VS Code

please the CSS https://forallthetime.com/DEMO/index.html

now in VS Code there is yellow 1 to the right of index.css

index.css is yellow too where all the other files are white

whats happening here?

how do i fix it?

does it even need fixing?

see line 50

this has a yellow jagged underline

interestingly, the CSS validation came back “No Error Found”

thank you!

19

I assume you are talking about something that the VS code editor has flagged up as a warning?

I’m afraid I don’t use the VS editor so you will need to refer its documentation to see what it doesn’t like.

Or maybe someone else who has the VS editor can illuminate:)

20

My guess is it’s showing you have an issue in the css. If you open your index.css file, you’ll see there is a warning…

image
image813Ă—236 9.32 KB

image
image1102Ă—237 14.1 KB

Which makes sense because float only works on block elements, so it’s simply saying the inline-block is being ignored and the object is being used as a display: block instead. Take off the display:inline-block out of the css, and the line in the html should go away as well.

1 Like