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

However, when it comes to the jQuery dropdown menu, the submenus open inwards rather than extending

I recently developed a jQuery menu that includes dropdowns. However, I encountered an issue where the subMenu items do not open to the left when hovered over. Despite my attempts to adjust the position using CSS properties such as absolute or relative posi ...

jquerycssmenuhover

Is there a way to position the text to the right and the image to the left?

I have written the following code: <!DOCTYPE html> <html> <head> <title>UMass Boston Computer Science Club About page</title> <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='sty ...

htmlcss

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searc ...

csseffectslightingflashlightlight

What is the best way to activate an event listener only after a button has been clicked?

Currently, I am developing a game that includes a timer and an event listener that notifies the user not to switch tabs. However, I am facing an issue where the event listener triggers before the game's start button is clicked. Is there a way in JavaS ...

javascripthtmlbuttontabsevent-listener

Why is it that code that appears identical in the same browser and same size can look different when one version is deployed on localhost and the other remotely?

I've been working on a Material-UI Table where I customized the headers and table styles. While testing it locally with yarn start, it looked like this: https://i.stack.imgur.com/7yU2H.png However, when I viewed it on the remote system, it appeared ...

htmlcssreactjsfontsmaterial-ui

Using PHP to download a file

I have successfully uploaded a PDF file to a directory named 'documents' on my web server. Currently, I am populating a table with data from my database, and I want to create links in the forms column that directly link to the associated files w ...

phphtml

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

htmlcsshover

In Bootstrap 4, the Form-Inline module experiences alignment issues on extra small (XS) view

Boostrap 4 has been used to create a .form-inline at the bottom of the page. It appears correctly when the viewport is larger than the XS breakpoint... https://i.sstatic.net/UYaG7.png ...but encounters issues when switching to XS view... https://i.sstat ...

cssbootstrap-4

When the Chrome Dev Tools are activated, the responsive website malfunctions

As I work on designing a responsive website, I've encountered an issue with media queries. When I set the breakpoint to min-width: 320px in Chrome dev tools, all of my CSS styles disappear. The same problem occurs when I zoom the window size to 150%, ...

css

What is the method to show a tag while dragging content in html5?

How can I make a div element track the mouse movement while dragging an item on my website? I need the div to only appear when the user drags content that has been enabled for dragging. I'm looking for a straightforward method to customize the appea ...

jqueryhtmlcssdrag-and-drop

Ways to reposition Material UI tabs at the base of a container such as AppBar?

I'm looking for advice on how to position <Tabs within an AppBar at the bottom of a parent container, effectively placing them at the bottom of the header. Currently, I have divided the header into three sections: top-bar-left, top-bar-tabs, and to ...

cssflexboxmaterial-ui

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image

My ng-view html is unexpectedly displaying as plain string. What steps should I take to resolve this issue?

Why is my ng-view HTML displaying as plain text? How can I resolve this issue? I have encountered an error, here is the screenshot for reference: Unfortunately, I am unable to upload images at the moment. ...

javascripthtmlangularjshaml

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...

htmlangulartypescripthttprequest

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Retrieve the information in a div element from an external website by utilizing AJAX

Exploring the world of AJAX is new to me, and I am eager to fetch content from a div on an external site and display it on my own website. Below is the current code snippet I have: <html> <head> <script src="https://ajax.googleapis.com ...

javascriptjqueryhtmlajax

Some devices experiencing website update issues while others are successful

My website is functioning properly on my laptop and phone, but not on my school iPad (managed by the district). I have already cleared the cache, but the site does not update. It was working fine earlier, and I need to present it next Monday. Please help a ...

htmlcss

``There seems to be an issue with CSS Transform/Transition not functioning properly

Here is some CSS code that I used to animate a list of items on my website: selector { display: flex; } #primary li a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; ...

csssafaritransformtransitionwebkit-transition