<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TechCut</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<footer>
<a href="trademark.html">Znak firmowy</a><a href="politics.html">Polityka prywatności</a>
</footer>
<nav>
<div class="container">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a href="http://techcut-shop.eu/index.php/neumaschinen" target="_blank" class="nav-link" >Nowe maszyny</a></li>
<li><a href="http://techcut-shop.eu/" target="_blank" class="nav-link" >Sklep TechCut GmbH</a></li>
<li><a href="service.html" class="nav-link" >Usługi</a></li>
<li><a href="spare-parts.html " class="nav-link" >Części zamienne</a></li>
<li><a href="cutting-technology.html" class="nav-link" >Technologia cięcia</a></li>
</ul>
</div>
</nav>
</header>
<footer>
<p>Neu- und Gebrauchte Maschinen für Verpackungsindustrie - Bobst SP - Bobst SPO - Heidelberg - WUPA - ASAHI - SANWA - YoungShin - KLETT - TIEGEL</p>
</footer>
</div>
<script>
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelector('.nav-links li');
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
});
</script>
</body>
</html>
html{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Titillium Web', sans-serif;
}
body{
background-image: url(img/background.png)
}
.wrapper{
max-width: 1220px;
margin-left:auto;
margin-right:auto;
}
/*navbar*/
nav{
width:100%;
height:20vh;
display:flex;
border-bottom:3px solid lightgrey;
}
.container{
margin:Auto;
width: 1220px;
height:12.5vh;
display:flex;
}
.nav-links{
display:flex;
justify-content: flex-end;
list-style-type: none;
justify-content: space-evenly;
align-items:center;
width: 100%;
}
.nav-link{
font-weight:500;
font-size:20px;
color:#999;
text-decoration: none;
}
.nav-link:hover{
color:#646473;
}
.img{
width:30%;
}
.img img{
cursor:pointer;
}
@media screen and (max-width:1024px) {
.nav-links{
position:fixed;
background:black;
height:100vh;
width:100%;
flex-direction: column;
z-index:1;
margin-top:-10vh;
clip-path: circle(100px at 90% -10%);
webkit-clip-path: circle(100px at 90% -10%);
}
.navlinks .open{
clip-path: circle(1000px at 90%, -10%);
-webktit-clip-path: (1000px at 90%, -10%);
}
.landing{
flex-direction: column;
}
.line{
width:30px;
height:3px;
background:white;
margin:5px;
}
nav{
position:relative;
}
.hamburger{
position: absolute;
cursor:pointer;
right:5%;
top:50%;
transform: translate(-5%, -50%);
z-index:2;
}
}
Witam wszystkich problem tego typu - nie mam pojęcia dlaczego nie załapuje mi klasy .open z css'a poprze skrypt sprawdziłem chyba każda możliwość błędu proszę o pomoc. Jak coś - to to jest skrócona wersja kodu bez zbędnych pierdół, które nie dotyczą problemu.
P.S.
efekt ma być taki, że na ekranie na czarno pokażę się średnio ładny navbar w kolumnach
Pozdrawiam i dziękuje za pomoc!!! <3
