Avoid that keyframe animation overflows submenus in navigation

问题

I have the following HTML and CSS which you can also find in the JSfiddle here:

/* Header & Naviagtion */

.header {
  width: 100%;
  height: 10%;
  position: fixed;
}

.navigation {
  width: 100%;
  height: 100%;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: purple;
}

.panel {
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  width: 100%;
  position: absolute;
  top: 100%;
  background-color: lime;
}

.button:hover .panel {
  transform: scale(1);
}



/* Content Animation */

.parent{
 margin-top: 5%;
 height: 10%;
 width: 100%;
 float: left;
 position: relative;
}
 
.content1{
 height: 100%;
 width: 100%;
 background-color: blue;
 float: left;
 position: absolute;
}
 
 .content2{
 height: 100%;
 width: 100%;
 background-color: red;
 float: left;
 animation-delay: 1s;
  position: absolute;
}
 
 .content3{ 
 height: 100%;
 width: 100%;
 background-color:yellow;
 float: left;
 animation-delay: 2s;
 position: absolute;
}
 
.content4{
 height: 100%;
 width: 100%;	
 background-color: green;
 float: left;
 animation-delay: 3s;
 position: absolute;
}
 
.content5{
 height: 100%;
 width: 100%;
 background-color: lime;
 float: left;
 animation-delay: 4s;
}


.parent div {
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:infinite;
 animation-fill-mode: forwards;
 opacity:0;
 }

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%, 25%, 100% {
    opacity: 0
  }
}

<div class="header">	
  <nav class="navigation"> 
    <ul>
    <li class="button"> 1.0 Main Menu 
      <ul class="panel">
        <li> 1.1 Sub Menu </li>
        <li> 1.2 Sub Menu </li>
      </ul>
    </li>
    </ul>
  </nav>     
</div>	


<div class="parent">
	<div class="content1">Here goes content1</div>
	<div class="content2">Here goes content2</div>
	<div class="content3">Here goes content3</div>
	<div class="content4">Here goes content4</div>
	<div class="content5">Here goes content5</div>
 </div>

As you can see in the comments the code is divided in two parts:

Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.

Both parts individually work fine.

---

Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.

On the other side I also want to have navigation that is not overflown by the animation.

Do you have any idea how I can solve this dilemma?

回答1:

You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.

You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.

Here's an example:

/* Header & Naviagtion */
.header {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 100%;
}

.button {
  width: 100%;
  background-color: purple;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.panel {
  max-height: 0px;
  overflow: hidden;
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  background-color: lime;
}

.button:hover .panel {
  max-height: unset;
  transform: scale(1);
}


/* Content Animation */

.parent {
  margin-top: 5%;
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.content1 {
  height: 100%;
  width: 100%;
  background-color: blue;
  float: left;
  position: absolute;
}

.content2 {
  height: 100%;
  width: 100%;
  background-color: red;
  float: left;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 100%;
  background-color: yellow;
  float: left;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 100%;
  background-color: green;
  float: left;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 100%;
  background-color: lime;
  float: left;
  animation-delay: 4s;
}

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%,
  25%,
  100% {
    opacity: 0
  }
}

<div class="header">
  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="panel">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>


<div class="parent">
  <div class="content1">Here goes content1</div>
  <div class="content2">Here goes content2</div>
  <div class="content3">Here goes content3</div>
  <div class="content4">Here goes content4</div>
  <div class="content5">Here goes content5</div>
</div>

来源：https://stackoverflow.com/questions/53378091/avoid-that-keyframe-animation-overflows-submenus-in-navigation