Creating a Responsive Navbar with HTML, CSS, and JavaScript about aleksandrhovhannisyan.com HOT 18 OPEN

Thank you for this! I'm transitioning from Bootstrap back to non-framework setups. I am only 3 weeks into my journey of web development and this was a big help.

from aleksandrhovhannisyan.com.

Thank you for this amazing article!

from aleksandrhovhannisyan.com.

WOW! This is awesome!! Thanks so much for the amazing explanations. It is extremely helpful for a novice hobbyist like myself!

from aleksandrhovhannisyan.com.

Thanks a lot, i'm looking for something like this ...
very good step by step explanations.

from aleksandrhovhannisyan.com.

you are awesome! thanks you so much

from aleksandrhovhannisyan.com.

@hello-jeff Thanks! I haven't, no.

from aleksandrhovhannisyan.com.

@MohammadSeyedabadi You'll need to use the useState hook instead of useEffect to track the visibility state. Something like:

const [isNavbarExpanded, setIsNavbarExpanded] = useState(false);

Then update that state when the button is clicked, and use the state to set various attributes accordingly, e.g.:

aria-expanded={isNavbarExpanded}

from aleksandrhovhannisyan.com.

@haIIux Glad to hear that it helped, and good luck with learning web dev!

Also, heads up in case you ever revisit this blog post: I realized that it's been a while since I originally wrote this, so I went back and refactored some of the code to use better naming conventions and reduce some of the clutter for future readers.

Cheers!

from aleksandrhovhannisyan.com.

This is awesome! Thanks

from aleksandrhovhannisyan.com.

@Crunchy409 Glad to hear that! Thanks for reading 😄

from aleksandrhovhannisyan.com.

This was great, thanks!

from aleksandrhovhannisyan.com.

This is great! Thank you for creating this and sharing it. Have you ever added a drop down option to it?

from aleksandrhovhannisyan.com.

thank you very much, very detailed explanation

from aleksandrhovhannisyan.com.

i have a problem with the nav bar in iphone mode. the nav bar doenst show when you click on the navbar

from aleksandrhovhannisyan.com.

Thanks so much for the amazing explanations.

But how i can use this navbar in a React project?

I tried using useEffect Hook, and it worked fine, but when i click on nav links, the whole page re renders.( other links are fine )

By the way im using React router dom.

This is the link to my code on github.

https://github.com/MohammadSeyedabadi/flower-shop/blob/master/src/components/Navbar.js

Sorry im new in web developing.

from aleksandrhovhannisyan.com.

@MohammadSeyedabadi You'll need to use the useState hook instead of useEffect to track the visibility state. Something like:

const [isNavbarExpanded, setIsNavbarExpanded] = useState(false);

Then update that state when the button is clicked, and use the state to set various attributes accordingly, e.g.:

aria-expanded={isNavbarExpanded}

I tried it now and it worked very well and solved my problem😁😁😁
thank you very much❤️
you are amazing🌹

from aleksandrhovhannisyan.com.

Hi! The navbar works, there's just one issue: when on phone, I'd like it to dissapear after clicking on any link. I created a simple landing page and the links in the navbar are not opening in a new window, they just scroll down to certain section of the page.
So basically, right now after clicking on a link in the navbar, it scrolls down and doesn't dissapear. I'd like to fix that. If you need any files from me, please inform me here.
Thanks!

from aleksandrhovhannisyan.com.

@JuGecko You have to set an onclick on each of the links,
that onclick should execute the function which is responsible for closing the menu, something like : onclick="closeMenu()"

if you are using ReactJS, you have to call that function and let React execute it for you, something like : onClick={closeMenu}
so without paranthesis at the end of the function name

from aleksandrhovhannisyan.com.