Animated Navigation bar using HTML CSS & Jquery | Navbar Hover Animation

In this tutorial, we will create an Animated Navbar with active and remove class using HTML, CSS, and JQuery. 🚀

Animated Navigation bar using HTML CSS | Navbar Hover Animation | Animated Navbar Add Remove Class

In this tutorial, we will create an Animated Navbar with active and remove class using HTML, CSS, and JQuery. 🚀 This video is perfect for both beginners and professionals who want to practice navigation bar design with hover animation effects and dynamic active class. What You’ll Learn ✔ How to create a responsive Animated Navbar ✔ Add and Remove active class using JQuery ✔ Apply hover animations with CSS ✔ Navbar design tips for beginners

This video is perfect for both beginners and professionals who want to practice navigation bar design with hover animation effects and dynamic active class.

HTML

                            
                                <!DOCTYPE html>
<html>
<head>
	<title>Active Navbar tab on click</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<header>
		<div class="navbar">
			<ul class="list">
				<h2>The Providers</h2>
				<li><a href="#" class="current">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#contact">Contacts</a></li>
				<li><a href="#help">Help</a></li>
			</ul>
		</div>
	</header>
	<div id="about" style="margin-top: 650px;">
		<img src="https://img.freepik.com/free-photo/top-view-background-beautiful-white-grey-brown-cream-blue-background_140725-72219.jpg?w=2000"
			style="width: 100%;height: 650px;">
	</div>
	<div id="contact">
		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUaWkKdZiLQQTyO7QyrMmpEOudlVKXwKk3_Q&usqp=CAU"
			style="width: 100%;height: 650px;">
	</div>
	<div id="help" style="margin-top: 650px;">
		<img src="https://img.freepik.com/free-photo/top-view-background-beautiful-white-grey-brown-cream-blue-background_140725-72219.jpg?w=2000"
			style="width: 100%;height: 650px;">
	</div>

	</div>
</body>
</html>

Let CSS for Awesome Styling

                            
                                .current {
		border-top: 2px solid orange;
	}

	body,
	html {
		scroll-behavior: smooth;
	}

	body {
		background-image: url(https://wallpaperaccess.com/full/187161.jpg);
		background-repeat: no-repeat;
		font-family: cursive;
		margin: 0;
		padding: 0;
	}

	h2 {
		position: absolute;
		color: white;
		left: -60%;
		top: -90%;
		font-size: 30px;
	}

	.list {
		position: absolute;
		left: 27%;
		top: 6%;
		position: fixed;
	}

	.list li {
		display: inline-block;
		margin-left: 25px;
		font-size: 25px;
		color: white;
	}

	.list li a {
		text-decoration: none;
		color: white;
		border-bottom: 2px solid orange;
		border-bottom-width: 0;
		transition: .5s ease-in-out;

	}

	.list li a:hover {
		border-bottom: 3px solid orange;
		border-bottom-width: 100%;
		border-bottom-right-radius: 50%;
		color: orange;

	}

Let's Write some Jquery

                            
                                <script type="text/javascript">
		$(document).ready(function () {

			$('ul li a').click(function () {
				if ($(this).hasClass('current')) {
					$(this).removeClass('current');
				} else {
					$('li a.current').removeClass('current');
					$(this).addClass('current');
				}
			});
		});
	</script>

Download Code Files

Share This Post :

8,200
Subscribers
2,400
Followers