Is there a way to slow down the falling effect on my navigation bar?

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.

Answer №1

Adjust velocity here. Presently set at 0.2 seconds

transition: slideUp 0.2s ease-in-out; /* Trigger the effect */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

JSON object representing a nested class

I am facing an issue while attempting to create a JSON object using JavaScript/jQuery. Specifically, I am trying to get the JSON object for Class A and encountering problems with the value of b1 being undefined. Class A { string test1; B b1; } Class B { ...

When you add CSS font-size to the body element, how can you effectively manage the nesting of tags and the concept of inheritance within

Currently revamping a website loaded with old content. The main change in design is to make the site adaptable to different screen sizes. I am utilizing the font-size in the body element for this purpose and setting all measurements to ems. While this meth ...

Is there a Problem with Paging in Meteor with Jquery?

I implemented Pagination using Jquery, but I encountered an issue along with the following error message: Uncaught TypeError: Object [object Object] has no method 'customPaginate' I am unsure how to resolve this problem. Could you please take ...

Convert PHP function output to HTML element

Check out the content of my Class.php file: <?php class Class { public function validate() { if(empty($_POST['first_name'])) { return 'first name should not be empty!'; } elseif(em ...

Executing a C# function from an HTML hyperlink

I am in the process of developing a website using ASP.NET C#. The site will feature a GridView with data that can be exported, such as to Excel or other formats. To handle the export functionality, I plan to utilize code from this resource. When a user c ...

How can you direct a user to a specific page only when certain conditions are met?

Currently using React in my single page application. I have a good grasp on how Routes function and how to create a PrivateRoute. The issue arises when I need to verify the user's identity before granting access to a PrivateRoute. My attempt at imple ...

Switching Primary Menu Selection When Scrolling Through Various Menu Options

I need help with changing the active class of links on my single page scrolling website. I found some useful code snippets for smooth scrolling and updating the active class on scroll or click events: $(document).ready(function () { $(document).on(" ...

Generating consecutive numerical values within the auto table JSPDF column VusJs

https://i.sstatic.net/idhrw.png columns: [ { header: 'No', dataKey: 'Index', }, { header: 'No Registrasi', dataKey: 'no_register' }, { header: 'Kode Partai', data ...

Ways to refine data using multiple criteria

I have a list of alarm data that I need to filter based on specific conditions. If there are multiple alarms of type "pull_Alarm" and "emergency_alarm" in the same location, I want to prioritize the "emergency_alarm". Here is my list: [ { ...

Utilize LESS Bootstrap as a guide for incorporating content

I have been struggling to properly integrate Bootstrap into my LESS file. Currently, I am adding Bootstrap to my project using NPM. If I simply use the following import statement in my LESS file: @import (reference) 'node_modules/bootstrap/less/boot ...

Encountering an error message stating 'click' property is undefined when implementing Java Script Executor in Selenium

I encountered an issue: Cannot read property 'click' of undefined when attempting to click a button using JavaScript executor. Despite trying multiple approaches such as action classes and WebDriverWait, I have been unable to successfully click ...

A particular character is displayed exclusively in a text box using either jQuery or JavaScript

Text Box <input id="txtbo" type="text" value="CAN'T TOUCH THIS!" size="50" /> Solution Using jQuery or Javascript: var readOnlyLength = $('#txtbo').val().length; $('#txtbo').on('keypress, keydown', function(even ...

Website experiences technical difficulties but database remains up-to-date

I previously made a similar post, but I have not resolved the issue yet. Here is the output from my terminal: 23 Dec 22:31:23 - Serving request for url[GET] /team 23 Dec 22:31:23 - Successfully created team with Name : Japan 23 Dec 22:31:23 - Serving re ...

Implementing Observable in NativeScript with TypeScript - A Step-by-Step Guide

Recently, I delved into the world of native-script framework and decided to dive into the "Get Started with JavaScript" tutorial provided on their official website. My background in Java has made me more comfortable with typescript, so I attempted to swap ...

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is ...

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Check out this input field: https://i.sstatic.net/Z6URV.png Notice the inner shadow and curved borders. Take a look at the given code snippet: import React, {Component} from 'react'; import TextField from 'material-ui/TextField'; im ...

Executing a JavaScript function within a PHP echo statement

I am completely new to working with AJAX and PHP echo variables or arrays. However, I have managed to successfully display images on my website by passing variables from AJAX to PHP and back. The only problem I am encountering is when I try to call a Javas ...

How can we achieve a seamless fade transition effect between images in Ionic 2?

My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...