Bootstrap 5 / CSS 中的水平导航下拉菜单

Question

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.

Answer 1

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 class="custom"> <details > <summary></summary> <nav class="menu"> <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>

Answer 2

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;
  }
}