0
339
VisualizaçõesHorizontal nav-dropdown menu in Bootstrap 5 / CSS
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.
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
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>
·
Juan Pablo Isaza
Relatório
0
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;
}
}
·
Juan Pablo Isaza
Relatório
Responde à pergunta