I have been trying to create a horizontal dropdown menu for small screen, but all the threads I've read are outdated and don't work.

CodePudding user response：

Here you go. this will work if there's no other custom class in you project.

:root {
  --primColor: #dcdcdc;
  --secoColor: #555555;
  --cornerRad: 4px;
}
body {
  background-color: var(--primColor);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
.custom details {
     margin: 40px;
}
 .custom summary {
     writing-mode: vertical-lr;
     text-align: center;
     padding: 12px 10px;
     width: 23px;
     height: 17px;
     background-color: var(--primColor);
     border: 2px solid var(--secoColor);
     border-radius: var(--cornerRad);
     color: var(--secoColor);
     cursor: pointer;
     user-select: none;
     outline: none;
     transition: transform 200ms ease-in-out 0s;
     position: relative;
     left: 95%;
}
 .custom summary::before, .custom summary::after {
     position: static;
     top: 0;
     left: 0;
}
 .custom summary::before {
     content: "";
}
 .custom summary::after {
     content: "III";
     letter-spacing: -1px;
}
 .custom summary:hover {
     transform: scale(1.1);
}
 .custom summary::marker {
     font-size: 0;
}
 .custom summary::-webkit-details-marker {
     display: none;
}
 .custom details[open] .menu {
     animation-name: menuAnim;
}
 .custom details[open] summary::before {
     content: "X";
}
 .custom details[open] summary::after {
     content: "";
}
 .custom .menu {
     height: 0;
     width: fit-content;
     border-radius: var(--cornerRad);
     background-color: var(--primColor);
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
     margin-top: 8px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     overflow: hidden;
     animation: closeMenu 300ms ease-in-out forwards;
     width: 100%;
}
 .custom .menu a {
     padding: 12px 24px;
     margin: 0 16px;
     color: var(--secoColor);
     text-decoration: none;
     text-align: center;
     transition: filter 200ms linear 0s;
}
 .custom .menu a:nth-last-of-type(1) {
     border-bottom: none;
}
 .custom .menu a:hover {
     filter: brightness(200%);
}
 .custom details[open]::before {
     animation: fadeMe 300ms linear forwards;
}
 
@keyframes menuAnim {
  0% {
    height: 0;
  }
  100% {
    height: fit-content;
  }
}
@keyframes fadeMe {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

<div >
<details >
  <summary></summary>
  <nav >
    <a href="#link">Home</a>
    <a href="#link">Work</a>
    <a href="#link">Links</a>
    <a href="#link">Contact</a>
    <a href="#link">About</a>
  </nav>
</details>
</div>

CodePudding user response：

Yes, it will not work I guess therefore you will need to write media queries for mobile devices.

For example! and then it might work on your mobile devices as well.

@media only screen and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}