What are the steps to create a dynamic dropdown effect for navbar content using animations similar to transitions?

IMPORTANT: THE NAVIGATION BAR IS NOT USING BOOTSTRAP

When I hover over the "More" button, the dropdown content appears suddenly and disappears abruptly when moving the mouse away. I would like to add a transition effect to make the dropdown content appear smoothly. Here is the code snippet:

<nav>
  <ul>
    <li><a href="home.php">Home</a></li>
    <li><a href="earnpoints.php">Earn Coins</a></li>
    <li><a href="getrewards.php">Get Rewards</a></li>
    <li><a href="referrals.php">Referrals</a></li>
    <li><a href="vouchers.php">Vouchers</a></li>
    <li><div class="dropdownd">
      <a href="#" class="dropbtnd">More</a>
        <i class="fa fa-caret-down"></i>
      <div class="dropdown-contentd">
        <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
        <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
        <a class="dropdowncontentn" href="contact.php">Contact us</a>
        <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
        <a class="dropdowncontentn" href="settings.php">Settings</a>
      </div>
    </div> </li>
    <li>
      <a href="#">
        <i class="fa fa-bars"></i>
      </a>
    </li>
    <li class="thum" style="float:right;margin-right:25px;">
      <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a>
    </li>
  </ul>
</nav>


# CSS #

* {
  box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
nav ul li a {
  color: #FFF;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  padding: 15px;
  font-family: Ubuntu;
}
nav ul li a:hover {
  text-decoration: none;
  color: #444;
}
nav ul li a.coinsnumber:hover {
  text-decoration: none;
  color: white;
}
.dropdown-contentd {
  display: none;
  position: absolute;
  top: 49px;
  background-color: royalblue;
  color: #FFF;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  z-index: 1;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all .3s ease;
}

.dropdown-contentd a {
  float: none;
  color: black;
  padding: 12px 16px;
  color: #ffffff;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: all .3s ease;
  background-color: royalblue;
}

.dropdown-contentd a:hover {
  color: #444;
}

.dropdownd:hover .dropdown-contentd {
  display: block;
}
/* End General */

/* Start Navbar */
nav ul {
  background-color: royalblue;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
nav ul > li {
  padding-left: 20px;
  padding-right: 20px;
  padding: 15px;
  display: inline-block;
  transition: all .3s ease;
  margin-left: -5px
}
nav ul > ol {
  position: absolute;
  top: 49px;
  right: 0;
  background: #333;
  text-align: center;
  list-style: none;
  display: none
}
nav ul > ol > li {
  width: 100vw;
  color: #FFF;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all .3s ease;
}
nav ul > ol > li:hover a {
  margin: 20px;
}
nav ul > ol > li:hover {
  background: #000;
  cursor: pointer
}
nav ul input {
  opacity: .7;
  padding: 5px;
  float: right;
  display: none
}
/* Start Menue Right */

/* Start Media Query */
@media screen and (max-width:950px){
  nav ul > li:not(:first-child) {
  display:none;
  }
  nav ul > li:nth-last-of-type(2) {
  display: inline-block;
  }
  nav ul > li:last-of-type {
  display: inline-block;
  }
}
@media screen and (min-width:950px) {
  nav ul > ol > li {
  display:none
  }
  nav ul > li:nth-last-of-type(2) {
  display: none
  }
}
.dropdowncontentn {
  background-color: royalblue;
}
nav {
  z-index: 1;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
}

Answer №1

This is a frequently asked question. The solution involves using max-height transition instead of just height. For more detailed information, you can refer to this link: How can I transition height: 0; to height: auto; using CSS?

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

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

Most effective strategy for optimizing web font loading considering caching and load speeds

When it comes to embedding fonts in your web app, there are a few different methods you can use. Method A) One way is to utilize the Google Fonts CDN by inserting this code into your HTML: <link href="https://fonts.googleapis.com/css2?family=Roboto:wg ...

Customizing hyperlink styles with JavaScript on click

Hey there! I'm experimenting with something new. I've managed to change the background color of each link after it's clicked, but now I'm facing a challenge: How can I revert the original style when another link is clicked? Here's ...

Leveraging the power of Angular to send the contents of a div via email

I have a div element with a specific class name and I am currently exploring ways to extract the rendered components of that div as text in order to include it in the body of an email. I have tried various methods such as using classes and ng-model, but so ...

Troubleshooting a Windows Phone HTML5 app encountering an Ajax error

Currently, I am working on developing a Windows Phone application specifically focusing on creating a "Windows Phone HTML 5 app". However, I have encountered an issue while using ajax with Jquery (version 1.9.1). The snippet of my code is as follows: ...

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} https://i.sstatic.net/1AnDi.png I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="displa ...

Utilizing CSS for a responsive background image

While constructing a website, I encountered an issue where the client is using a mobile device and I want to prevent them from loading a particular background image. For larger screens, my plan is to incorporate approximately 5 images with different resolu ...

Using jquery to remove textbox value when checkbox is unchecked

I have a single datatable created using jQuery. The first column of the table consists of checkboxes, and the last column contains textboxes. Because these elements are generated dynamically, they end up having identical IDs and names as shown below: $ ...

Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question. I am looking to create a layout where the center content stretches out to cover the entire visi ...

bespoke HTML elements and properties

I'm currently facing some difficulties and I am unsure of how challenging it can be. I have tried following various tutorials, including those on SO and YouTube, but they all provide different approaches leaving me stuck. My goal is to create a custo ...

Organizing table data by columns in a continuous loop

I'm currently working on extracting data from a database, organizing it into tables (potentially multiple tables), and presenting them in columns of 4 across several pages. My main concern is figuring out how to display the tables horizontally like t ...

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

The background image causes the scrollbar to vanish

As a beginner, I am in the process of creating a web page that features a consistent background image. However, I have encountered an issue where the scroll bar does not appear on a specific page called "family details" due to the background image. I atte ...

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

Encountering Issues with Formatting InnerHtml Text using RegEx

Technology: React.js I have been working on a custom function in JavaScript to highlight specific words within a code block. The function seems to be functioning correctly, but the highlighting isn't staying after the function is completed. Any ideas ...

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

Align a div vertically in a responsive design layout

How can I get the text inside "grid2" and "section2" to vertically align in the middle? Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction? I have searched for similar questions but the answers h ...

Vertical alignment of divs in a single column will not be consistent

I need assistance with my website's "team" section. I am trying to ensure that the member_body divs within the same column as the member img and member header can be adjusted in width. However, they are not aligning vertically or maintaining the same ...

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...