- 419
- 226
Привет. Есть такой сайт - https://mint-plantation.ru/
На нем видно,что там где текст,то там не рисуются партиклы.
Как сделать там партиклы и чтобы менюшка не теряла свою кликабельность
код:
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
[/CODE]
На нем видно,что там где текст,то там не рисуются партиклы.
Как сделать там партиклы и чтобы менюшка не теряла свою кликабельность
код:
HTML:
<html>
<head>
<title>Мятная плантация</title>
<link rel="shortcut icon" href="/images/icon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?168"></script>
</head>
<body>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="clicknav()">☰</span>
<h2>Mint Tools</h2>
<p>зачем...</p>
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- scripts -->
<script src="../particles.js"></script>
<script src="js/app.js"></script>
<div class="footer"><a class = "text"><h2>Mint Plantation © 2021</h2>
<h3>Все права защищены.Любое копирование материала запрещено!</h3>
<h3>Любое копирование материала запрещено!</h3>
</div>
<script>
let isenable = false;
function clicknav() {
if (isenable == false) {
openNav();
isenable = true;
} else {
closeNav();
isenable = false;
}
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
[CODE=css]body {
background-image: linear-gradient(135deg,#EEBD89, #D13ABD);
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .vkset {
left: 10;
padding: 0px 0px 0px 25px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.active {
background-color: #4CAF50 !important;
}
canvas{
display:block;
vertical-align:bottom;
}
#particles-js {
width: 100%;
height: 100vh;
display: flex;
transition: margin-left .5s;
padding: 16px;
}
.particles-js-canvas-el {
position: absolute;
}
.footer {
height: 80px;
margin-top: -80px;
}
.footer .text {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-family: "Lato", sans-serif;
}function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
[/CODE]
