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 use Top Navigation with Left Navigation Bar using Bootstrap ?
- How to create Vertical Navigation Bar using HTML and CSS ?
- How to Create Animated Typing Effect using typed.js ?
- 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?
- How to create animated banner links using HTML and CSS?
- How to create Animated bars using HTML and CSS?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- How to create Animated Blur Navbar using CSS?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- How to Create Animated Background using CSS3 ?
- How to create Animated accordion using Google AMP amp-accordion ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to disable a CSS :hover effect?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.