Solution 1 :

Still able to see the immediate disappearance of the red box, but I solved the problem of the red box appearing before the title box:

#stats {
  height: 200px;
  margin-left: 20px;

  background-color: tomato;
  transition-delay: 0.5s;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

The main difference was the transition-delay: 0.5s; which delays the transition 0.5s, which is the amount of time it takes the title to appear. But, regarding the immediate disappearance of the red box, I’m still working… Sorry for a half reply, I’ll try to work on it and add on as soon as I find an answer. I hope this much works for the delay.

Solution 2 :

Ok Please check this I have tried to accomplished according to your query. I have added few lines please check. position: absolute; top: 100%; in #stats

#stats-dropdown {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: larger;
  font-family: 'Courier', Arial, monospace;
  font-weight: bold;
  color: black;
  background-color: palevioletred;
  height: 40px;
  width: 20px;
}

#stats-title {
  background-color: teal;
  width: 350px;
  height: 40px;
  margin-left: 20px;
  display: flex;
  white-space: nowrap;
  overflow: auto;
}

#stats-title>span {
  margin: auto;
}

#stats-dropdown #stats-title {
  width: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#stats-dropdown:hover #stats-title {
  height: 40px;
  width: 350px;
}

#stats {
  height: 200px;
  width: 350px;
  margin-left: 20px;
  background-color: tomato;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  height: 0px;
  overflow: hidden;
  position: absolute;
  top: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  ;
}

#stats-dropdown:hover #stats {
  height: 250px;
  width: 350px;
}
<div id="stats-dropdown">
  <div id="stats-title"><span>Rendering statistics</span></div>
  <div id="stats">
    <div>Number of Instances : 50</div>
    <div>Number of Surfaces : 1200</div>
    <div>Number of Patches : 5000</div>
    <div>Number of Elements : 10000</div>
    <div>Number of Vertices : 30000</div>
    <div>Running time : 50 ms</div>
  </div>
</div>

Problem :

the community

I try to make a kind of overlay menu with HTML and CSS.

Here’s my idea: when my mouse hovers the pink rectangle an animation reveals the blue box then another animation reveals the red box.
It’s like a ‘double’ dropdown menu.

My HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Visualization</title>
  </head>
  <body>
    <div id="stats-dropdown">
      <div id="stats-title"><span>Rendering statistics</span></div>
      <div id="stats">
        <div>Number of Instances : 50</div>
        <div>Number of Surfaces : 1200</div>
        <div>Number of Patches : 5000</div>
        <div>Number of Elements : 10000</div>
        <div>Number of Vertices : 30000</div>
        <div>Running time : 50 ms</div>
      </div>
    </div>
  </body>
</html>

My CSS:

body,
html {
  padding: 0;
  margin: 0;
}

#stats-dropdown {
  position: absolute;
  top: 20px;
  left: 20px;

  font-size: larger;
  font-family: 'Courier', Arial, monospace;
  font-weight: bold;
  color: black;

  background-color: palevioletred;
  height: 40px;
  width: 20px;
}

#stats-title {
  background-color: teal;

  width: 350px;
  height: 40px;
  margin-left: 20px;

  display: flex;

  white-space: nowrap;
  overflow: auto
}

#stats-title > span {
  margin: auto;
}

#stats {
  height: 200px;
  margin-left: 20px;

  background-color: tomato;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}

#stats-dropdown #stats {
  height: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out 0.5s;
}

#stats-dropdown #stats-title {
  width: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#stats-dropdown:hover #stats {
  height: 200px;
  width: 350px;
}

#stats-dropdown:hover #stats-title {
  height: 40px;
  width: 350px;
}

MY problems are that during the “closing” animation the red box disappears without animation and sometimes I noticed that the red box can also appears before the blue one in spite of the transition delay.

Here’s a JSFiddle if you want to give it a try.

Can you help me to figure out my issues?

I run this on Firefox (don’t know if this matter).

By

Leave a Reply

Your email address will not be published. Required fields are marked *