Changing from display none to display block using CSS transitions, navigation featuring submenus

Check out my jsFiddle demo

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

I'm trying to create a smooth transition effect on the subnav element when hovering over its parent item, but for some reason, it's not working as expected.

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

Even though I modified the CSS property for opacity, the transition doesn't seem to trigger correctly. Any ideas on how to resolve this issue and make the transition work seamlessly?

htmlcss

Answer №1

It is a well-known fact that the display property cannot be animated. However, simply including it in your CSS can override the transitions of visibility and opacity.

The resolution...just eliminate the display properties.

nav.main ul ul {
  position: absolute;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
  visibility: visible;
  opacity: 1;
}
<nav class="main">
  <ul>
    <li>
      <a href="">Lorem</a>
      <ul>
        <li><a href="">Ipsum</a>
        </li>
        <li><a href="">Dolor</a>
        </li>
        <li><a href="">Sit</a>
        </li>
        <li><a href="">Amet</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer №2

Typically, when individuals want to animate the display: none property, they are actually seeking to:

  1. Gradually fade in content
  2. Ensure that the hidden item does not affect the layout of the document

Many solutions often rely on using the visibility property, which only addresses the first objective. However, achieving both goals is equally achievable by utilizing the position property.

By setting the position to absolute, the element is removed from the normal document flow, allowing for a seamless transition between position: absolute and position: static (the default global positioning), along with adjusting the opacity. Refer to the example below for further clarification.

.content-page {
  position: absolute;
  opacity: 0;
}

.content-page.active {
  position: static;
  opacity: 1;
  transition: opacity 1s linear;
}

Answer №3

To achieve this effect, consider using animation keyframes instead of transitions. Modify your hover declaration and incorporate the animation keyframe. Don't forget to include browser prefixes like -moz- and -webkit-. For more detailed information, refer to https://developer.mozilla.org/en/docs/Web/CSS/@keyframes.

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

An updated version of your fiddle can be found here: https://jsfiddle.net/orax9d9u/1/

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

Modify the length of an array using a number input field

Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the len ...

javascripthtmlangularjsarrays

Steps for implementing a dropdown menu in Django forms with dynamic values retrieved from a database

Having trouble creating a form with a dropdown box for users to select locations from an existing table. Unsure of next steps. forms.py from django import forms from .models import Vehicles from .models import HomeLocation class VehicleForm(forms.ModelFo ...

htmlpython-3.xdjangobootstrap-5

Is there a way to prevent this basic PHP calendar from storing outdated dates in its cache?

A few friends were given access to a simple calendar I created for them to input their dates. Everything seems to be working well when they update the dates, but upon returning to the calendar, it continues to display the old dates that were previously sel ...

phphtml

Having trouble aligning the divs

I am currently attempting to align 3 divs next to each other on my webpage, and while I have made some progress, I am running into an issue with setting the width based on a percentage of the screen. When I try to make the total width of all three divs add ...

htmltwitter-bootstrap

Issue with Aligning Datepicker Interface

Displayed above its corresponding input element or sometimes vertically anywhere on the page. I am looking to have it appear below the input element instead. https://i.sstatic.net/nEDwc.png https://i.sstatic.net/pVbhG.png Currently, it is overlapping it ...

javascriptcssangulartypescriptangular9

Issue with PrimeNG DataTable contextMenu alignment inside TabView

I encountered an issue with displaying a DataTable - contextMenu when it is placed within a TabView. The contextMenu was appearing off-center. However, the DataTable - contextMenu worked perfectly fine when it was not wrapped in a TabView. To address this ...

cssangularprimeng

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Troubleshooting: Angular 13 input radio not recognizing checked condition

Storing selectedKitchenId in localstorage, and checking if selectedKitchenId === kitchen.id to determine which radio button should be selected. Cannot figure out why the checked condition is not working as expected, even though when I use a strong tag to d ...

htmlangulartypescript

How to upload a file with JavaScript without using Ajax technology

Is it possible to upload a file using the input tag with type='file' and save it in my project folder without using ajax? Can JavaScript help me achieve this task? Below is the code snippet I am currently working on: function func3() { var ...

javascripthtml

I am attempting to modify the class of a text field and display a feedback message when the input length falls between 1 and 20 characters, but I am unable to determine the cause of the issue preventing it from

In this code snippet, I am utilizing Bootstrap classes to change the design of an input field based on its length validity. Additionally, a feedback message is displayed accordingly. However, upon running the function, the input field does not reflect the ...

javascripthtmlbootstrap-4

What steps can I take to improve the smoothness of my Slick slider and ensure it functions correctly across all screen widths

I have been experimenting with a carousel slider using Slick Carousel (). My goal is to make it loop infinitely and function smoothly at different browser widths without the cards stacking, but it's not quite working as intended yet. Currently, there ...

javascriptjquerycsssliderslick.js

Automatically closing HTML tags using Vanilla JavaScript

When a user inputs a tag, such as <div>, JavaScript is supposed to close it with </div>. However, this should not happen for non-HTML tags like <hello>. I attempted to achieve this using the method str.repeat, but the results were not as ...

javascripthtml

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

What could be causing the inner container to not fit within the outer container?

.main { background-color:#669; width:1200px; margin-left:auto; margin-right:auto; height:1000px; } .content { background-color: #CCF; width:100%; height:1000px; margin-top:5%; position: absolute; } Despite setting ...

htmlcss

Transferring form data to JavaScript for executing jQuery/AJAX request to fetch information from the database – what a journey!

Currently, I am attempting to extract a zip code from my form and then submit it to JavaScript/jQuery to retrieve data from the database associated with that specific zip code. After copying some code from w3schools and making a few modifications, as well ...

javascriptphpjqueryhtmlajax

There appears to be no alteration in the documentation, yet why is there a discrepancy in image scaling based on width between Bootstrap 4 and 5?

My picture is positioned in a grid column. When utilizing Bootstrap 4, the .title-image { width: 60%;} style works as intended. However, upon transitioning to BS 5, the image suddenly expands and protrudes. It appears that the width attribute is now align ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Reduce the dimensions of a CSS attribute automatically

Displayed below is the image with a width of 192 and height of 109: <a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAA ...

cssresponsive-design

Tips on waiting for all pages to fully load before obtaining elements from them?

<div id="validationPages"> <div id="page1Div"></div> <div id="page2Div"></div> <div id="page3Div"></div> <div id="page4Div"></div> </div> <script type="text/javascript"> ...

javascriptjqueryhtmlajax

Upon utilizing the .append() method to add a new row to a table through jQuery, I found that clicking on this freshly added row caused jQuery to

When clicking on a row of a table in my code, a corresponding page is opened for every tr using jQuery. The problem arises when I use the .append() method to add a new tr via jQuery after calling ajax: the new tr gets added at the end of the table but the ...

htmljquerydjango

The submission of the input name is not showing up in the post

In my form, I have one input field and a submit button. Despite knowing that the name of the button can be submitted, it isn't being posted to the server for some reason. $(document).ready(function(){ $("form").submit(function(e) { e.preve ...

jqueryhtmlformssubmit