I'm making a vertical menu which has a submenu with a transition in which the options come out from left to right, but when I put the label <a>on <li>it it doesn't make that transition and I don't know how to get it out, let's see if you can give me some help light.
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
input[type='radio'] {
display: none;
}
label {
cursor: pointer;
}
::-webkit-scrollbar {
display: none;
}
body .swanky .intro {
float: right;
color: white;
width: 370px;
top: 50px;
position: fixed;
}
body .swanky .intro h1 {
text-shadow: 0px 2px rgba(0, 0, 0, 0.26);
}
body .swanky .intro p {
line-height: 20px;
text-shadow: 0px 1px rgba(0, 0, 0, 0.26);
}
body .swanky_wrapper {
height: auto;
overflow: hidden;
background: #ffffff;
height: 100vh;
width: 240px;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
body .swanky_wrapper label {
padding: 25px;
float: left;
height: 72px;
border-bottom: 1px solid #131313;
position: relative;
width: 100%;
color: #000000;
transition: text-indent 0.15s, height 0.3s;
box-sizing: border-box;
}
body .swanky_wrapper label img {
margin-right: 10px;
position: relative;
top: 2px;
width: 16px;
color: black;
}
body .swanky_wrapper label span {
position: relative;
top: 2px;
text-decoration: none;
}
body .swanky_wrapper label span a {
position: relative;
top: -3px;
text-decoration: none;
appearance: none;
color: black;
}
body .swanky_wrapper label:hover {
background: #2f7ef5;
border-bottom: 1px solid #2A394F;
text-indent: 4px;
}
body .swanky_wrapper label:hover .bar {
width: 100%;
}
body .swanky_wrapper label .bar {
width: 0px;
transition: width 0.15s;
height: 2px;
position: absolute;
display: block;
background: #426dad;
bottom: 0;
left: 0;
}
body .swanky_wrapper label .lil_arrow {
width: 5px;
height: 5px;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid #15a4fa;
border-right: 2px solid #15a4fa;
float: right;
position: relative;
top: 6px;
right: 2px;
transform: rotate(45deg);
}
body .swanky_wrapper label .lil_arrow:hover {
width: 5px;
height: 5px;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
float: right;
position: relative;
top: 6px;
right: 2px;
transform: rotate(45deg);
}
body .swanky_wrapper__content {
position: absolute;
display: none;
overflow: hidden;
left: 0;
width: 100%;
}
body .swanky_wrapper__content li {
width: 100%;
opacity: 0;
left: -100%;
background: #15a4fa;
padding: 25px 0px;
text-indent: 25px;
box-shadow: 0px 0px #126CA1 inset;
transition: box-shadow 0.3s, text-indent 0.3s;
position: relative;
}
body .swanky_wrapper__content li:hover {
background: #0c93e4;
box-shadow: 3px 0px #126CA1 inset;
transition: box-shadow 0.3s linear, text-indent 0.3s linear;
text-indent: 31px;
}
body .swanky_wrapper__content li a {
width: 100%;
opacity: 0;
left: -100%;
background: #15a4fa;
padding: 25px 0px;
text-indent: 25px;
box-shadow: 0px 0px #126CA1 inset;
transition: box-shadow 0.3s, text-indent 0.3s;
position: relative;
text-decoration: none;
color: black;
}
body .swanky_wrapper__content li a:hover {
background: #0c93e4;
box-shadow: 3px 0px #126CA1 inset;
transition: box-shadow 0.3s linear, text-indent 0.3s linear;
text-indent: 31px;
text-decoration: none;
color: black;
}
body .swanky_wrapper__content .clear {
clear: both;
}
input[type='radio']:checked+label .swanky_wrapper__content {
display: block;
top: 68px;
border-bottom: 1px solid #212e41;
}
input[type="radio"]:checked+label>.lil_arrow {
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
border-top: 2px solid white;
border-right: 2px solid white;
}
input[type='radio']:checked+label {
height: 200px;
background: #426dad;
text-indent: 4px;
transition-property: height;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: white;
}
input[type='radio']:checked+label .bar {
width: 0;
}
input[type='radio']:checked+label:nth-of-type(1) {
animation: in 0.15s 0.575s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.575s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked+label:nth-of-type(2) {
animation: in 0.15s 0.7s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.7s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked+label:nth-of-type(3) {
animation: in 0.15s 0.825s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.825s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked+label:nth-of-type(4) {
animation: in 0.15s 0.95s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.95s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes in {
from {
left: -100%;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}<div class="menuVertical">
<div class="swanky">
<div class="swanky_wrapper">
<header>
<img src="img/logo-azul.png" />
<br>
<br>
</header>
<label for="Dashboard">
<img src="https://img.icons8.com/material-outlined/50/000000/dog-house.png"/>
<span><a href="principal.php">Inicio</a></span>
</label>
<input id="Sales" name="radio" type="radio"></input>
<label for="Sales">
<img src="https://img.icons8.com/material-outlined/24/000000/warning-shield.png"/>
<span>Incidencia</span>
<div class="lil_arrow"></div>
<div class="bar"></div>
<div class="swanky_wrapper__content">
<ul>
<li><a href="#">Crear Incidencia</a></li>
<li><a href="#">Buscar Incidencia</a></li>
</ul>
</div>
</label>
<label for="Messages">
<img src="https://img.icons8.com/material-rounded/24/000000/server.png"/>
<span>Servidores</span>
</label>
<label for="Users">
<img src="https://img.icons8.com/material-outlined/24/000000/chat.png"/>
<span>Chat</span>
</label>
</div>
<!--/////////// End Dropdown ////////////
-->
</div>
</div>
Well actually what I have noticed is the following:
In the css I see these 2 classes
If you want the < li > to be displayed, remove left: -100% from these 2 classes and change the opacity value, if you leave it at 0 nothing will be displayed. As an example, I change the one of the first class with opacity at 1 and the second at 0.6, being as follows:
As you can see I have commented the left of both classes, I attach your code with these two settings for you to observe:
Espero te sirva y ya queda para que continues ajustandolo como desees.