For every CSS project we build, a responsive navigation bar is a must-have.
So, today we are going to build a responsive navigation bar using HTML...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for this useful post! I was wondering how to setup a hamburger menu, I'll use this as a guideline. Btw I noticed a type-o:
And to the nav__link's we added display inline-block so that the links say next to each other.
Have a good one Amrin :)
thank's for pointing it out benny :D
Nice NavBar, I suggest you change your link in github is incorrect and your website.
Good job!
thanks Gustavo.
it works now
naw, still broken
It works for me. I don't know what's causing this
github.com/Coderamrin/responsive-n...
coderamrin.github.io/responsive-na...
Me too
Thanks for sharing.
Being evolving in the web industry since the very early 2000's, I'd say that dealing with navigation, is tricky. A navigation fulfils critical responsibilities:
SEO-able
Delegating the most critical part of the navigation with a
div > span
must be avoided. Except if you have a good reason and you provide the properaria
-attributes to take over with the right DOM's semantic.With better semantic, better structure, better opportunities for the SEO.
addressable
The state of the
nav__link.hide
should be bubbled up to the top level'sviewport
. Why? Because thedisplay: fixed
is applied to the viewport, and become a first (depth) level of reading. As a rule of thumb, always use the URL to represent the first level of reading, eg:Thus, the state of your main navigation is addressed within the URL. Sharing a link and refreshing the page work!
usable
I consider relying on the native navigation of the browser as one of the best practice in frontend development. Updating the the URL via a link and without using JS make things sure to work, and easy to maintain over the time.
interoperable
Nowadays, frontend developers face with complexity by coding programs executed in web browsers, webworkers and backends. Adding listeners should be done carefully, cause it's tightly coupled with the DOM's rendering (browser only).
Could be something like,
For the css,
Finally, the JS
Best
I think for better a11y would be better to use a button for the hamburger and a ul/li for the navigation items. 😉 But nice work 🎉
Thanks Rai.
I'm learning web accesibility :D
will do for the next projects.
A hreat writer here on DEV is inhuofficial .
His articles have been helping me to rethink a lot of a11y. Go check him out.
Thanks Rai
Aww I am blushing, thanks for the mention! ❤️
A hreat writer here on DEV is @inhuofficial .
His articles have been helping me to rethink a lot of a11y. Go check him out.
Nice
thanks Sushil
Thanks!