const burger= document.querySelector('.hb');
const wrapper= document.querySelector('.wrapper');
const timeline= new TimelineMax({});
const one= burger.querySelector(".one");
const two= burger.querySelector(".two");
const three= burger.querySelector(".three");
const lines= [one,two,three];
burger.addEventListener('mouseenter', ()=>{
timeline.staggerTo(lines, 0.25, {scaleX: 1.5, repeat:1, yoyo: true, ease: Power2.easeInOut, svgOrigin:"50 50"}, 0.125);
});
TweenMax.to(burger, 1, { ease: Bounce.easeOut, y: 240, delay: .4});
burger.addEventListener('click', (e) =>{
e.preventDefault();
wrapper.className= 'show';
});
.html{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: url(road.jpg) no-repeat 50% 50%;
background-size: cover;
overflow: hidden;
}
.main .wrapper {
display: flex;
flex-wrap: wrap;
}
.show{
transition-delay:0s;
visibility: visible;
opacity: 1;
transition: 1s all ease-in;
}
.hide{
opacity: 0; visibility:hidden;
}
ul{
list-style: none;
display:flex;
flex-direction: column;
}
li{
margin-top: 1.75em;
display: inline-block;
text-align: center;
}
li a{
text-decoration: none;
color: #fff;
/* font-family: */
font-weight: lighter;
font-size: 2rem;
padding: 1.5px 30px;
transition-duration: 170ms;
}
li a:hover{
color: #fff;
border: 1px solid #fff;
border-radius: 14px;
}
.burger{
position: absolute;
top: 1.3rem;
left: 1.4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="next.css">
<title>Document</title>
</head>
<body>
<nav class="navbar">
<span class="burger">
<a href="#">
<svg class="hb" width="50" height="50">
<path class="one" d="M0,5 40, 5" stroke="#fff" stroke-width="5"/>
<path class="two" d="M0,14 40,14" stroke="#fff" stroke-width="5"/>
<path class="three" d="M0,23 40,23" stroke="#fff" stroke-width="5"/>
</svg>
</a>
</span>
<div class="main">
<div class="wrapper hide">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="next.js"></script>
</body>
</html>
Когда я изменяю размер окна, нижние элементы списка обрезаются.
Я не уверен, что происходит, если мне нужно добавить медиа-запрос, чтобы исправить это или что.
Я предполагал, что компоненты страницы будут уменьшаться вместе со страницей при ее изменении, пожалуйста, если вы можете помочь написать комментарий.
Спасибо
Он просит меня добавить больше деталей, потому что это в основном код, я не уверен, есть ли способ обойти это, потому что я новичок на сайте, так что я собираюсь добавить какой-нибудь фиктивный текст.
<div class="main">
<div class="wrapper hide">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
CSS:
.html{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: url(road.jpg) no-repeat 50% 50%;
background-size: cover;
overflow: hidden;
}
.main{
}
.wrapper{
}
.show{
transition-delay:0s;
visibility: visible;
opacity: 1;
transition: 1s all ease-in;
}
.hide{
opacity: 0; visibility:hidden;
}
ul{
list-style: none;
display:flex;
flex-direction: column;
}
li{
margin-top: 1.75em;
display: inline-block;
text-align: center;
}
li a{
text-decoration: none;
color: #fff;
/* font-family: */
font-weight: lighter;
font-size: 2rem;
padding: 1.5px 30px;
transition-duration: 170ms;
}
li a:hover{
color: #fff;
border: 1px solid #fff;
border-radius: 14px;
}