navigation_bar_design_using_bootstrap_chaitu_informative_blogs
navigation bar design using bootstrap

In the tutorial, I will show you how to draw an underline with CSS3 and use JavaScript. This is not an introduction to underline animation using JavaScript. I will cover all the concepts like position, radius, scaling, etc.  I am also providing screenshots and codes for you.

Animation is often considered a step ahead of more practical, yet challenging functionalities such as complex navigation. In a process that dates back to the early web days, navigation has received an interesting amount of attention. Your website's navigation is vital for a smooth customer experience, and you may spend considerable time and effort on your website’s navigation.

It would be great if you could add such underline effects to your own website. Importantly if someone comes to see the website as new then it would be great if they come under this underline while selecting the options in the navigation bar above.

I used bootstrap for this front-end page. Bootstrap is a CSS framework. This framework has become very popular nowadays. So everyone is using this framework to design colorful mobile applications and websites.

We have versions from 2.x to 5.x in this bootstrap. The latest version of Bootstrap 5.x is currently in the beta stage and the full version has not yet arrived. So Bootstrap 4.x is being used as the standard version as of now.

As you have seen this Bootstrap CSS Framework is used to beautifully design most quiz-related websites and applications or quiz webpages using this bootstrap.

So if we want to use this bootstrap framework we can go to bootstrap's official website and download it easily as per the instructions given there. or we can paste the addresses of some CSS, CDN, and javascript files related to Bootstrap into the HTML pages we created. by doing this so all bootstrap framework properties will work properly in the HTML file we created.

I am going to do a lot of tutorial articles on similar technology for you in the coming days so I want your support.

Check the below Code:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Animated underline</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <style>
    nav {
    height: 70px;
    overflow: hidden;
    background:rgb(5, 88, 167);
    background:rgba(9, 71, 204, 0.609);
    }
    #brand {
    color: white;
    font-weight: bold;
    margin-left: 60px;
    }
    #brand:hover {
    color: black;
    }
    .nav-link {
    color: white;
    position: relative;
    margin-right: 20px;
    margin-left: 30px;
    }
    .nav-link:not(.is-active):hover {
    color: black;
    }
    .nav-indicator {
    position: absolute;
    left: 0;
    margin-bottom: 547px;
    transition: 0.1s;
    height: 4px;
    z-index: 1;
    border-radius: 3px;
    top:66px;
}
</style>
<nav class="navbar navbar-expand">
    <a class="navbar-brand" href="#" id="brand">Chaitu Informative Blogs</a>
    <ul class="navbar-nav">
    <li class="nav-item">
    <a href="#" class="nav-link is-active" active-color="#04f6d6">Home</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">About Us</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">Services</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">Projects</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">News</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">Shop</a>
    </li>
    <li class="nav-item">
    <a href="#" class="nav-link" active-color="#04f6d6">Contact Us</a>
    </li>   
    </ul>
<span class="nav-indicator"></span> 
</nav>
<script>
var indicator = document.querySelector('.nav-indicator');
var items = document.querySelectorAll('.nav-link');

function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}

items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
</script>
</body>
</html>

Result:

navigation_bar_with_all_details_chaitu_informative_blogs
navigation bar with all details

Conclusion:

This article looked at how HTML, CSS3, and JavaScript can create selective animated underlines. coming next articles I will give more features and tricks about web technologies. I hope you enjoy this example. If you would like to follow along and learn more on this subject, please like and follow my blog.

If you want to add any new code or tricks, please drop them in the comments below.

Also, visit these posts: