Я создаю адаптивную навигационную панель с js, css и html. У меня проблема прямо сейчас, когда экран становится размером x (размер, который я определил как max-width), появляется всплывающая панель адаптивной навигации. Хотя на этом появляется только последний якорь (Лоха). Я хочу, чтобы он отображался гибким и гибким направлением к столбцу. Как показано на этой печати:
https://imgur.com/aXjZD8z
https://imgur.com/8s0J6tc
https://jsfiddle.net/tL2vp9k5/1/
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<a href="#"><img id="espiral" src="../Logo.png"></a>
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> <a href="../Main page/index.html" title="Home">Home</a> </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
<li><a href="#" title="Cursos">Cursos</a> </li>
<li><a href="#" title="Conteudos Especiais">Conteúdos Especiais</a> </li>
<li><a href="#" title="Conteudos Especiais">Recursos</a></li>
<li> <a href="" title="Contatos">Contatos</a> </li>
<li> <a href="" title="Acesse a nosa loja" class="loja">Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a></li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
/*Universal Commands*/
*{
padding:0;
margin:0;
text-decoration: none;
}
/*Nav bar*/
/*Background Menu*/
nav.menu {
width:100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu{
position:fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img{
width: 180px;
float:left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li{
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a{
display:block;
font-family: "Ubuntu", "Palatino", sans-serif ;
color:rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i{
font-size: 16px;
}
nav ul.ulSecções li a.loja{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/* Transition das anchors */
nav ul.ulSecções li a:hover {
color: rgb(255, 255, 255);
opacity: 1;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
nav ul.ulSecções li a:not(:hover) {
color: rgb(204, 174, 75);
opacity: 0.9;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
/*Mobile screen adjustments*/
@media screen and (max-width: 1250px){
nav ul.ulSecções li {
position: absolute;
right: 0px;
height: 92vh;
top: 14vh;
background-color: rgb(24, 24, 24);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
} ```