The use of drop-down menus in sliding menus
P粉716228245
P粉716228245 2023-09-08 18:53:16
0
2
513

I'm having some difficulty trying to find a way to add a submenu or dropdown within a section of my sliding menu. Also, I'm not sure how to adjust the menu dropdown when the other parts (Text2 and Text3) adapt to the screen.

Can anyone help me solve this problem? Many thanks for the help!

I want to add a dropdown menu in "Text1".

P粉716228245
P粉716228245

reply all(1)
P粉008829791

This accordion should be working. I tried to keep it as simple as possible to avoid cluttering the code. You can make it more beautiful and user friendly by adding an icon to the right of the label... for this I have placed my codepen link here

input {
  display: none;
}

.tabs {
  overflow: hidden;
}

.tab {
  overflow: hidden;
}

.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
  color:white;
}

.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
  border: 2px solid transparent;
}

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
  border: 2px solid black;
}

input:checked+.tab-label {
  background: darken(#2c3e50, 10%);
}
<div class="submenu_accordion">
  <div class="tabs">
    <div class="tab">
      <input type="checkbox" id="chck1">
      <label class="tab-label" for="chck1">Item 1</label>
      <div class="tab-content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
      </div>
    </div>
  </div>
</div>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template