The Navigation bar or navbar or menu-bar is the most important component of any web or mobile application. The user can only navigate from one page to another page through this menu. It is usually provided at the top of the website to provide a better UX (user experience).
HTML Code: In this section, we have created a simple navigation bar menu using unordered-list(ul).
CSS Code: In this section, we have used some CSS property to make attractive animated navigation bar.
- Step 1: First, we have used flex property to align our list in a horizontal way.
- Step 2: Then remove all the text decoration and provide required margin and paddings.
- Step 3: Then we have used before selector to align a line below each element keeping it’s width at 0.
- Step 4: Now, use hover with before selector to provide width to the line and transform it on x-axis to get the desired effect.
Complete Code: In this section, we will combine the above two sections to create an animated navigation bar.
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- How to Create Animated Loader Ring using HTML and CSS?
- Create a 3D Text Effect using HTML and CSS
- How to create reflection effect using HTML and CSS ?
- How to Create Floating Box Effect using HTML and CSS ?
- How to Create Engraved Text Effect using HTML and CSS ?
- How to create followspot effect using HTML CSS and jQuery ?
- How to create Glowing Star effect using HTML and CSS?
- How to create text-reveal effect using HTML and CSS ?
- Create a Gradient Text Effect using HTML and CSS
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to create shock wave or explosion effect using HTML and CSS ?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to Create Image Overlay Hover using HTML & CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.