Responsive navigation bars are an essential part of modern websites, as they allow users to easily navigate through different sections of the site, regardless of the device they are using. Bootstrap, a popular front-end framework, makes it easy to build effective and intuitive navigation panels. In this article, we will guide you to create effective navigation in Bootstrap and add basic animations to improve the user experience.
Requirements:
Before you start, make sure you have the following settings:
- Basic knowledge of HTML, CSS and JavaScript.
- Bootstrap is installed in your project. You can add Bootstrap via CDN or download it from the official website.
** Step 1: Set up the HTML structure: **
Let's start by creating a basic HTML structure for an intuitive navigation panel. Open your HTML file and add the following code:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device width, initial scale = 1.0">
Responsive navbar with <title>Bootstrap</title>
<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Your Brand</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav"
aria-control = "navbarNav" aria-extended = "false" aria-label = "Change Navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class = "navbar-collapse" id = "navbarNav">
<ul class="navbar-nav ml-automatic">
<li class="nav-element active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<! - Your site content goes here ->
<script src="path/to/jquery.js"> </script>
<script src="path/to/bootstrap.js"> </script>
<script src="scripts.js"> </script>
</body>
</html>
In the code above, we have added a Bootstrap navigation bar and a collapsible toggle button for smaller screens. Note that we have used the ".ml-auto" class to properly integrate the Links navigation bar.
Step 2: Add style to your life:
Now let's add some custom CSS styles to improve the appearance of our nav panel and prepare some basic animations. Create a new file called `styles.css' and add the following CSS:
`
/* styles.css */
/* New background animation */
.navbar {
transition: background-color 0.3 lightness;
}
/* Bind hover animation */
.nav-element:hover .nav-link {
transform: translateY (-3px);
}
/* Active link style */
.nav-item.active .nav-link {
color: #ffc107;
}
/* Mobile menu icon animation */
.navbar-toggler-icon {
move: 0.3s move easily;
}
/* Click the mobile menu icon */
.navbar-toggler [aria-expand = "true"] .navbar-toggler-icon {
play : play (90deg);
}
`
In this CSS code, we have added basic animations to the back of the navbar, link effects, and mobile menu icons.
Step 3: Run the Basic Animation:
Now add a simple animation to the background color of the navigation panel when the user scrolls down the page. We will use JavaScript to achieve this effect.
Create a new file called "Scripts.js" and add the following JavaScript code:
`
// scripts.js
// Add a loop event listener
windows.addEventListener( 'play', function () {
const navbar = document.querySelector('.navbar');
const scrollY = windows.scrollY;
// Change navbar background in loop
if (scrollY > 50) {
navbar.classList.add('notified');
} else {
navbar.classList.remove('rotated');
}
});
`
Step 4: Wrap the Animation:
Finally, add the finishing touch by defining the "rotated" class style in the "styles.css" file:
`
/* styles.css */
/* Add to the end of styles.css */
/*Background navbar in rotation */
.navbar.scroll {
background-color: # 333;
}
`
With the code above, when the user scrolls down more than 50 pixels, the background color of the navigation bar will change to a darker shade, adding a subtle animation effect to the navigation bar (#333).
Result:
Congratulations! You have successfully created an attractive landing page with Bootstrap and added entry-level animations to enhance the user experience. With Bootstrap and a bit of custom CSS and JavaScript, you can create a fun and interactive navigation bar for your web project. Feel free to check it out
Top comments (0)