What is the best way to create a dropdown menu that smoothly slides in from the bottom of the screen?

Is it possible to create dropdown menus in the navigation bar that slide in from the bottom with a smooth transition effect, similar to this example:

Although I am working on building my own template, so my code may differ from the original theme. Here is a snippet of my CSS code:

@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1.7;
}

a {
  color: #000;
  text-decoration: none;
  transition: 0.3s all ease;
}

ul {
  list-style: none;
}

/* Utility */
.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.text-primary {
  color: #f77b2e;
}

.mlr {
  margin: 0 0.5rem;
}

... (remaining code)

I attempted to add transition properties to the dropdown ul elements, but unfortunately, I was not successful in achieving the desired effect.

Answer №1

Update the dropdown list styling as follows:

nav ul li ul {
    visibility: hidden;
    opacity: 0;
    border-top: 2px solid #ff8b00;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    margin-top: 1rem;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    transition: opacity 300ms ease, transform 300ms ease;
    transform: translateY(50px);
}

On hover, apply the following changes:

nav ul li:hover ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

See a complete working example below: (Execute code snippet)

@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap");

/* Other CSS rules */

nav ul li ul {
  /* Styling properties for the dropdown menu */
}

/* Rest of the CSS rules */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://kit.fontawesome.com/1685e275a4.js"></script>
    <title>Orn</title>
  </head>
  <body>
    <!-- Header -->
    <header>
      <!-- Social -->
      <div class="top-bar">
        <div class="container">
          <div class="social-1">
            <a href="index.html">
              <i class="far fa-envelope-open "></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84edeae2ebc4fdebf1f6e0ebe9e5edeaaae7ebe9">[email protected]</a>
            </a>
            <span class="mlr"></span>
            <a href="index.html">
              <i class="fas fa-phone-alt fa-sm"></i> 451-805-0360
            </a>
          </div>
          <div class="social-2">
            <a href="index.html"> <i class="fab fa-twitter"></i> Twitter</a>
            <span class="mlr"></span>
            <a href="index.html"> <i class="fab fa-instagram"></i> Instagram</a>
          </div>
        </div>
      </div>;

      <!-- Navigation -->
      <nav>
        <div class="container">
          <div class="logo">
            <a href="index.html" class="text-primary">Orn</a>
          </div>

          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li>
              <a href="#">About Us <i class="fas fa-angle-down fa-xs"></i></a>
              <ul>
                <li><a href="#">Team</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">FAQ</a></li>
                <li>
                  <a href="#"
                    >More Links <i class="fas fa-angle-right fa-xs"></i
                  ></a>
                  <ul>
                    <li><a href="#">Menu One</a></li>
                    <li><a href="#">Menu Two</a></li>
                    <li><a href="#">Menu Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>
</html>

Answer №2

To create a seamless transition, adjust the position of your inner <ul> element using CSS properties like transform

.parent_LI > .sub_UL {

  /* OTHER STYLES HERE */

  transition: 0.24s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);

}

When hovering over the parent LI element, modify the styles as follows:

.parent_LI:hover > .sub_UL {

  opacity: 1;
  visibility: visible;
  transform: translateY(0px);

}

Below is an example showcasing the implementation:

.parent_LI {
  position: relative;
  display: inline-block;
}

.parent_LI > .sub_UL {
  position: absolute;
  top: 100%;
  transition: 0.24s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
}

.parent_LI:hover > .sub_UL {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
<ul>
  <li class="parent_LI">
    <a>HOVER ME</a>
    <ul class="sub_UL">
      <li>
        <a>HERE I AM</a>
      </li>
    </ul>
  </li>
</ul>

Answer №3

There are multiple ways to achieve this effect. You can utilize JavaScript or JQuery for animation purposes. Alternatively, using CSS animations is another option. Here's a sample code snippet to guide you in the right direction:

NOT EXACT BUT GET YOU ON THE RIGHT TRACK:

@keyframes menu-hover {
    0%   {top: 2rem }
    25%   {top: 1.5rem}
    50%   {top: 1remm}
    75%   {top: .5rem}
    100%   {top: 0}
}

nav ul li:hover ul li:hover > ul {
    display: block;
    position: absolute;
    left: 100%;
    top: -15px;
    width: 200px;
    animation: menu-hover .3s;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

For more information, visit: https://www.w3schools.com/css/css3_animations.asp

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

Using v-bind to dynamically set styles in Vue.js

While utilizing v-bind:style to apply dynamic values, I encountered an issue where v-bind:style did not seem to work. However, in the console, I verified that v-bind:style was receiving the correct value (:style='{ color : red (or any other value) }&a ...

What is the process for creating a custom hook in React.js/Next.js?

I encountered a problem while trying to create a hook from my code. Here is the snippet from the hook file: import { useRouter } from "next/router"; const useCurrentPath = () => { const { asPath, locale, defaultLocale } = use ...

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts getListOfNames() { return this.http.get(this.BaseURL + 'welcome/getnama') .pipe(map(response => { return response; })); } After making the API call, I receive the following resp ...

Using multiple conditions in an angular ngif statement to create a variable

Is it possible to assign the result of a function to a variable in Angular (13) within the .html section of a component, specifically with multiple conditions in ngIf? <div *ngIf="let getMyVar() as myVar && isVisible && isClean" ...

I'm encountering a Python Selenium error related to the timing of webpage loading

# Specifying the path to the chromedriver program service = Service('C:\Program Files (x86)\Google\chromedriver.exe') service.start() # Opening a remote connection with robinhood website using the driver driver = webdriver.Remote( ...

Download CSV file directly in Internet Explorer 10 by choosing to open the file instead of saving it on your device

On my server, I have a link available to download a file: <a id="downloadCSVFile" runat="server" href="javascript:void(0)" onclick="parent.document.location = 'CSVFile.csv';">Download</a> I attempted this method as well: <a id=" ...

Is the integer value included in the linear progression?

I have a unique setup where each time the user clicks a 'Done' button, 20 is added to a base number, x (..-40,-20,0,20,40,60..). This updated value of x is then saved in a database and displayed in real-time using Ajax. However, I am facing a ch ...

Error occurs when trying to map an array within an asynchronous function

Hey there, I have an array of objects with validation inside my async function (router.post()) and I need to map it before validating. Here is the approach I am taking: ingredients.map(({ingredient, quantity})=>{ if(ingredient.trim().length < 1 | ...

CSS formatting may not be maintained when additional content is inserted after the initial text

Just a heads up, I'm relatively new to coding! I have a header and text that I want to overlay on a background image using CSS, so getting the positioning right is crucial. Everything was working fine until I added more HTML content below the text. ...

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...

I am having trouble locating my TypeScript package that was downloaded from the NPM registry. It seems to be showing as "module not found"

Having some challenges with packaging my TypeScript project that is available on the npm registry. As a newcomer to module packaging for others, it's possible I've made an error somewhere. The following sections in the package.json appear to be ...

column-break-inside: prohibited; // ineffective

I'm trying to format my text into two columns while maintaining control over where the column breaks occur. Here is the CSS code I am using: body { } #content { column-count: 2; } #left_col { break-inside:avoid-column; } #ri ...

Steps for generating tab panels and their respective content using a v-for loop

I am currently utilizing Vue 3 in combination with Bootstrap 5. My objective is to incorporate multiple Tabpanels within a v-for. Each of these Tabs should feature distinct content. To achieve this, I attempted placing my Tabs and their respective Conten ...

Having a single quote within a double quote can cause issues with JavaScript code

I am currently developing a Django web app and facing an issue with sending a JSON object to my JavaScript code using a Django template variable. # views.py import json def get_autocomplete_cache(): autocomplete_list = ["test1", "test2", "test3", "te ...

Alter the background of cards in real-time

I am unfamiliar with JavaScript, but I wish to utilize a function to alter the background color of multiple cards. function ChangeColorToGreen() { document.getElementById("ChangingCard").style.background = "green"; } function ChangeColorToPurple() { ...

Elusive Appearance of the Flask Flash Message

I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...

Executing a JavaScript function through C# code

Does anyone have a code snippet for calling a JavaScript function from C#? Here's the scenario: I have an ASP.NET page with an ASP button. When this button is clicked, I want to call a JavaScript function. For example: In my ASP.NET page, <but ...

Trouble with displaying Django for loop in HTML template

Having an issue with displaying the latest post. Here is the code: views.py def latest_post(request): latest = Post.objects.all().order_by('-id')[:1] context = {'latestPost': latest} return render(request, 'latest_pos ...

step-by-step guide for resolving issues with downloading files in node.js

I've been attempting to download files from my server using node.js with the res.download function from Express, but I keep getting an undefined error. The folder path is D:\program\web\java_script\Node\my_project\ketabk& ...

Retrieve data from the component within anonymous middleware in NuxtJS

Is there a way to retrieve the component data (like infos, similarPosts shown in this example) from an anonymous middleware within a Nuxt.js application? ...