Best placement for transition effects in a dropdown menu animation

<div class="dropdown">
<button class="dropbtn">ALAT</button>
<div class="dropdown-content">
    <a href="index2.php"><img src="home.jpg" class="home" width="70px" height="50px" title="Dashboard"></a>
    <a href="papar_topik.php"><img src="quiz.jpg" class="quiz" width="70px" height="50px" title="Kuiz"></a> 
    <a href="prestasi_topik.php"><img src="prestasi.png" width="70px" height="50px" title="Prestasi Pelajar"></a> 
    <a href="senarai_pelajar.php"><img src="senarai.jpg" class="senarai" width="70px" height="50px" title="Senarai Pelajar"></a> 
    <a href="import_daftar.php"><img src="import.jpg" class="import" width="70px" height="50px" title="Import Daftar"></a> 
    <a href="#" onclick="logout()"><img src="logout.png" width="70px" height="50px" title="Keluar"></a>

The code above creates a dropdown button. To make the dropdown content appear with a transition when the mouse moves near the button, you can use the following CSS code:

div{
        font-size: 20px;
        text-align: center;
        top: 170px;
        left: 1000px;
    }
    .dropbtn {
        background-color: aqua;
        color: black;
        padding: 16px;
        font-size: 20px;
        font-family: brush script mt;
        font-style: bold;
        border-radius: 50%;
    }

    .dropdown {
        position: fixed;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: fixed;
        background-color: cornsilk;
        width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        height: 0px;
        transition: all .5s ease;
    
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: yellow;
    }

    .dropdown:hover .dropdown-content {
        display: block;
        top: 10px;
        height: 1000px;
    }

However, if the dropdown content is not showing any transitions and just appears as usual, consider checking on where you placed the "transition" tag in your CSS code.

htmlcssdrop-down-menucss-animationscss-transitions

Answer №1

When implementing a transition from display:none to display:block, the transition properties do not take effect. This is because the display:none property removes the block entirely, while the display:block property fully displays the block. A block cannot be partially displayed; it's either completely available or unavailable. Therefore, the transition property does not work in this scenario. Reference

Can someone advise me on where to place the "transition" tag? You are correctly using the transition property for the selector, but instead of using diplay property, you should consider using opacity. Here are the modifications I made to your CSS.

    div{
        font-size: 20px;
        text-align: center;
        top: 170px;
        left: 1000px;
    }
    .dropbtn {
        background-color: aqua;
        color: black;
        padding: 16px;
        font-size: 20px;
        font-family: brush script mt;
        font-style: bold;
        border-radius: 50%;
    }

    .dropdown {
        position: fixed;
        display: inline-block;
    }

    .dropdown-content {
        opacity: 0;   // replace display:none with opacity:0
        position: fixed;
        background-color: cornsilk;
        width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        height: 0px;
        transition: all 0.5s ease;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: yellow;
    }

    .dropdown:hover .dropdown-content {
        opacity: 1;   // replace display:block with opacity:1
        top: 10px;
        height: 1000px;
    }

Answer №2

you may consider utilizing this instead of your current code

div{
    font-size: 20px;
    text-align: center;
    top: 170px;
    left: 1000px;
}
.dropbtn {
    background-color: aqua;
    color: black;
    padding: 16px;
    font-size: 20px;
    font-family: brush script mt;
    font-style: bold;
    border-radius: 50%;
}

.dropdown {
    position: fixed;
    display: inline-block;
}

.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background-color: cornsilk;
    width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    height: 0px;
    transition: all .5s ease;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: yellow;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 100;
    top: 10px;
    height: 1000px;
}

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 pass a full object from an Angular 2 dropdown list to the service?

Is it possible to return an object from a dropdown list to the service? I would like to be able to get the component object whenever I click on an item in onChangeForComponent. <select [ngModel]="selectedDev" (ngModelChange)="onChangeForComponent($eve ...

angulardrop-down-menu

Is there a way to make two parallelograms overlap seamlessly and adjust in size automatically using HTML?

Recently delving into the world of HTML and CSS, I've set my sights on designing something unique involving parallelograms that adjust dynamically. My vision includes four overlapping parallelograms starting from the top at 25%, 50%, 75%, and finally ...

htmlcssshapesskewcss-shapes

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

javascriptjquerycssiframe

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

I am dynamically creating an editable div using the code snippet below. <div class='reflection-field' contenteditable="true" data-number="${index}"></div> Expected Outcome: When I click on the generated div, I anticipate that the c ...

javascriptjqueryhtml

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...

htmlangular

When I try to call jQuery's getScript function, the callback does not execute as expected within

When I invoke the script in a function at runtime function CheckOutMyFace() { $.getScript("/scripts/jtimers.js", function (data) { }); }; I notice in Firebug that the script is being called every time the function is invoked, but for some reason the ...

htmlcss

Tips for using jQuery to add or append a class to the final li element

I am currently struggling to understand why the last child of the li element is not being inserted into the last li. This module functions as a treeview, and my main objective is to add a class to the last li. Let me demonstrate with some sample code and ...

htmljquerycsslaravel

The call function in Tween.js fails to execute after adding an EventListener

I encountered an issue while using tween.0.6.2. The following code snippet (borrowed from the tween.js Getting Started page and slightly simplified) works perfectly: createjs.Tween.get(circle) .to({x: 400}, 1000, createjs.Ease.getPowInOut ...

javascripthtmltween

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

I'm currently developing a project on this website: Interestingly, when you append a forward slash to the end of the URL, all the images mysteriously disappear. Consequently, I am unable to include Google AdWords tracking code at the end of any URLs: ...

javascripthtml.htaccesstracking

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

javascripthtmlcss

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

htmlcss

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Concealing a button once the collapse feature is toggled in Bootstrap

The following code snippet from the bootstrap website demonstrates how to use collapse functionality: <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href & ...

javascriptjquerycsstwitter-bootstrap

Is it possible to utilize the AmMap API for developing an Android application?

I am currently in the process of creating a unique application with HTML, JS, and jQuery Mobile that will feature interactive maps. I have been searching the web for APIs to incorporate interactive maps into my project without using Google Maps APIs when I ...

javascriptandroidhtmlammap

Is it possible to insert both the name and value of a complete attribute within an element using a string in Razor?

There is a common way to achieve this in asp.net MVC Razor Engine: @{ string myValue = "foo" } <h1 hello='@myValue'></h1> However, I am interested in an alternative approach that might result in an error: @{ string myAttri ...

htmlasp.net-mvcrazorasp.net-core