As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any assistance with this issue would be greatly appreciated :). html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up Navbar Example</title>
<!-- Add Bootstrap CSS link here -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="top-section">
</div>
<nav class="navbar navbar-dark bg-dark hidden-navbar">
<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24"
class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
</nav>
<script src="./function.js"></script>
</html >
css
body {
background-color: black;
}
/* Add this CSS to control the pop-up navbar and its appearance */
.hidden-navbar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
opacity: 1;
}
.top-section {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.top-section:hover + .hidden-navbar {
opacity: 1;
top: 0; /* Slide the navbar down from the top */
transform: translateY(0);
animation: slideDown 0.2s ease-in-out; /* Apply the animation */
}
@keyframes slideDown {
0% {
top: -100%;
}
100% {
top: 0;
}
}
.js
// Add this JavaScript to handle the hover effect and pop-up functionality
document.querySelector('.top-section').addEventListener('mouseenter', () => {
document.querySelector('.navbar').style.display = 'block';
});
document.querySelector('.navbar').addEventListener('mouseleave', () => {
document.querySelector('.navbar').style.display = 'none';
});
After experimenting with various CSS properties, the optimal solution remained elusive.