Question 290402 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to make the opposit effect of the overflow CSS property?

I’m currently trying to make a header that has a transparent background (something like rgba(0,0,0,0.8) and when clicking on a burger menu, I should display a submenu.

The trick is, I want to add a slide-in effect on the submenu, so it should translate from behind the header until it’s fully visible. The issue is that, as the header is a bit transparent, the submenu is visible behind the header and I don’t know how I could do to hide the submenu when it’s behind the header, but make it visible when it’s outside the header.

body {
  padding: 0;
  margin: 0;
}

.header {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  max-width: 100vw;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4em;
  z-index: 1000;
}

.header p {
  color: white;
  z-index: 750;
}

.submenu {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 1s linear;
  z-index: 0;
}

.submenu ul {
  display: none;
  flex-direction: column;
  row-gap: 1em;
  color: white;
}

.header p:hover ~ .submenu {
  transform: translateY(100px);
}

.header p:hover ~ .submenu ul {
  display: flex;
}
<div class="header">
  <p>Hover me!</p>
  <div class="submenu">
    <ul>
      <li>Lien</li>
      <li>Lien</li>
      <li>Lien</li>
    </ul>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You can get the desired effect you want I believe by:

    1. Removing the various "z-indexes" for all elements, but keeping a negative z-index for the sub-menu class selector.

    2. Adding "position: relative" to the header class.

    3. Changing the background color to greyscale instead of opacity: "background-color: #333333"

    body {
  padding: 0;
  margin: 0;
}

.header {
  background-color: #333333;
  position: relative;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  max-width: 100vw;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4em;
}

.header p {
  color: white;
}

.submenu {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  background-color: #333333;
  transition: all 1s linear;
  z-index: -1;
}

.submenu ul {
  display: none;
  flex-direction: column;
  row-gap: 1em;
  color: white;
}

.header p:hover ~ .submenu {
  transform: translateY(100px);
}

.header p:hover ~ .submenu ul {
  display: flex;
}
    Login or Signup to reply.
  2. 0

    Apply the translation on the ul element and you can use clip-path on the submenu to simulate an "overflow: hidden" only from the top

    .header {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  inset: 0 0 auto;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4em;
  color: white;
}
.submenu {
  /* place this at the bottom right */
  position: absolute;
  right: 0;
  top: 100%;
  /* */
  width: 100px;  
  clip-path: inset(0 0 -999px); /* hide the top area and keep the bottom visible */
}
.submenu ul {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0;
  padding-block: 1em;
  /* absolute to ul as well and apply the background to it */
  position: absolute;
  inset: 0 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
  /* */
  transition: all 1s linear;
  translate: 0 -100%; /* we translate the whole element to the top (hidden by the clip-path) */
}

.header p:hover ~ .submenu ul{
  translate: 0 0%; /* on hover we slide it to the bottom */
}
    <div class="header">
  <p>Hover me!</p>
  <div class="submenu">
    <ul>
      <li>Lien</li>
      <li>Lien</li>
      <li>Lien</li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Whatever you try to perform on .submenu class, perform same action on .submenu ul, apply transform css on .submenu ul as below

    body {
          padding: 0;
          margin: 0;
        }

        .header {
          background-color: rgba(0, 0, 0, 0.8);
          position: fixed;
          top: 0;
          left: 0;
          width: -webkit-fill-available;
          max-width: 100vw;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 4em;
          z-index: 1000;
        }

        .header p {
          color: white;
          z-index: 750;
        }

        .submenu {
          position: absolute;
          right: 0;
          top: 100%;
          width: 100px;
          z-index: 0;
          overflow: hidden;
          transition: all 1s linear;  
        }

        .submenu ul {
          flex-direction: column;
          row-gap: 1em;
          color: white;
          background-color: rgba(0, 0, 0, 0.8);
          transition: all 1s linear;
          margin: 0px;
          transform: translateY(-100%);
        }

        .submenu ul li {
            padding: 10px 0px;
        }

        .header p:hover ~ .submenu {display: block;}

        .header p:hover ~ .submenu ul {
          transform: translateY(0px);
        }
    <div class="header">
  <p>Hover me!</p>
  <div class="submenu">
    <ul>
      <li>Lien</li>
      <li>Lien</li>
      <li>Lien</li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search