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

Html – How to Create a Menu with List Sliding Animation

I need to create a menu that works this way: when you hover over a menu item, a list appears at the bottom of menu item. When I move the mouse to another element, the list smoothly slides to that element and changes items inside.

enter image description here

.wrapper {
  position: relative;
}

.menu {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, min-content);
  column-gap: 30px;
  cursor: pointer;
}

.content {
  position: absolute;
  border: 1px solid grey;
}

.content-item {
  padding: 10px 12px;
  cursor: pointer;
}
<div class="wrapper">
  
  <ul class="menu">
    <li class="menu-item">Item1</li>
    <li class="menu-item">Item2</li>
    <li class="menu-item">Item3</li>
  </ul>
  
  <div class="content">
    <div class="content-item">thing1</div>
    <div class="content-item">thing1</div>
    <div class="content-item">thing1</div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You can use opacity: 0 and visibility: hidden css property to make that effect when hovered on li

    .menu {
  list-style: none;
  display: flex;
  cursor: pointer;
  gap: 1rem;
}

.menu-item{
 position: relative;
}

.menu-item button{
  background-color: white;
  border: none;
}

.menu-item:hover > .content{
 visibility: visible;
 opacity: 1;
 transform: scale(1) translateY(0);
}

.content {
  position: absolute;
  border: 1px solid grey;
  width: min-content;
  visibility: hidden;
  left:0;
  opacity: 0;
  transform: scale(0.99) translateY(-0.7em);
  transform-origin: top;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.content-item {
  padding: 10px 12px;
  cursor: pointer;
}
    <div class="wrapper">
  <ul class="menu">
    <li class="menu-item">
      <button>Item 1</button>
      <div class="content">
        <div class="content-item">thing1</div>
        <div class="content-item">thing1</div>
        <div class="content-item">thing1</div>
      </div>
    </li>
    <li class="menu-item">
      <button>Item 2</button>
      <div class="content">
        <div class="content-item">thing2</div>
        <div class="content-item">thing2</div>
        <div class="content-item">thing2</div>
      </div>
    </li>
    <li class="menu-item">
      <button>Item 2</button>
      <div class="content">
        <div class="content-item">thing3</div>
        <div class="content-item">thing3</div>
        <div class="content-item">thing3</div>
      </div>
    </li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    I have added the opacity and visibility CSS properties, and I’ve made some changes to the markup. Check the example below for better understanding.

    .wrapper {
  position: relative;
}

.menu {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, min-content);
  column-gap: 30px;
  cursor: pointer;
}
.menu .menu-item {
  position: relative;
}


.content {
  position: absolute;
  border: 1px solid grey;
  top: 50%;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  -webkit-transition: .2s;
}
.menu .menu-item:hover > .content {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

.content-item {
  padding: 10px 12px;
  cursor: pointer;
}
    <div class="wrapper">
  
  <ul class="menu">
    <li class="menu-item">
      Item1

    <div class="content">
      <div class="content-item">thing1</div>
      <div class="content-item">thing1</div>
      <div class="content-item">thing1</div>
    </div>
    </li>
    <li class="menu-item">
      Item2

      <div class="content">
        <div class="content-item">another1</div>
        <div class="content-item">another1</div>
        <div class="content-item">another1</div>
      </div>

    </li>
    <li class="menu-item">
      Item3
    
      <div class="content">
        <div class="content-item">last1</div>
        <div class="content-item">last1</div>
        <div class="content-item">last1</div>
      </div>
    </li>
  </ul>
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search