0
내 웹 사이트 상단에 햄버거 아이콘이 있지만 토글이 작동하지 않습니다. 아이콘을 클릭 할 때 전환되는 change-1 클래스가 있지만 그 일은 일어나지 않습니다. 콘솔에 오류가 표시되지 않습니다. 이 코드의 문제점을 알려주십시오.햄버거 아이콘 토글이 작동하지 않습니다.
function Main() {}
Main.prototype = {
initPreloading: function() {
window.addEventListener("load", function() {
document.body.classList = "loaded";
});
document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
},
particleRibbons: function() {
var c = document.getElementById("canvas__particles"),
x = c.getContext("2d"),
w = window.innerWidth,
h = window.innerHeight,
f = 180,
q = [{}, {}],
m = Math,
r = 0,
u = m.PI * 2,
v = m.cos,
z = m.random;
c.width = w;
c.height = h;
x.globalAlpha = 0.7;
function i() {
w = window.innerWidth;
h = window.innerHeight;
x.clearRect(0, 0, w, h);
q = [{
x: 0,
y: h * 1 + f
}, {
x: 0,
y: h * 1 - f
}]
while (q[1].x < w + f) d(q[0], q[1])
}
function d(i, j) {
x.beginPath()
x.moveTo(i.x, i.y)
x.lineTo(j.x, j.y)
var k = j.x + (z() * 2 - 0.25) * f,
n = y(j.y)
x.lineTo(k, n)
x.closePath()
r -= u/-100
x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u/3) * 127 + 128 << 8 | v(r + u/3 * 2) * 127 + 128).toString(16)
x.fill()
q[0] = q[1]
q[1] = {
x: k,
y: n
}
}
function y(p) {
var t = p + (z() * 2 - 1.1) * f
return (t > h || t < 0) ? y(p) : t
}
i();
return i;
},
initMisc: function() {
window.addEventListener("resize", this.particleRibbons);
},
navIcon: function() {
$(".hamburger-icon").on("click", function() {
$(".one").toggleClass("change-1");
});
},
init: function() {
Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
}
};
var Main = new Main;
Main.init();
// burger animation
//$(".hamburger-icon").on("click", function(){
// $(".one").toggleClass("change-1");
//})html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0;
overflow-x: hidden;
font-family: 'PT Sans', sans-serif;
background-color: #212121;
}
body.loaded {
overflow-x: hidden;
}
.text-align-center {
text-align: center
}
.vertical-align-helper {
height: 100vh;
}
.vertical-align-helper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.vertical-align-helper>[class*=vertical-align-] {
display: inline-block;
width: 100%
}
.vertical-align-middle {
vertical-align: middle;
}
.site-wrapper {
position: relative;
top: 0;
width: 100%;
overflow: hidden
}
.block {
position: relative
}
.block.hero {
background-position: center center;
background-repeat: no-repeat;
position: fixed;
height: 100%;
width: 100%;
z-index: 300;
overflow: hidden
}
.block.hero .block__content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
user-select: none;
cursor: default;
}
.loaded .block.hero {
position: relative
}
.loaded .block.hero .preloader {
bottom: -200px
}
.loaded .block.hero .main-nav {
bottom: 0
}
.block {
min-height: 100vh;
}
.block.hero {
background: #212121;
color: #fff;
height: 100vh;
}
.block.hero .name {
font-family: 'Expletus Sans', cursive;
font-size: 8vw;
font-weight: 100;
margin: 0;
line-height: 0.8em;
}
.block.hero .name span {
font-weight: 600;
}
.block.hero .subtitle {
font-family: 'Titillium Web', sans-serif;
margin: 0;
text-transform: uppercase;
font-size: 2vw;
font-weight: 100;
margin-top: 26px;
}
.hamburger-icon {
margin: 0;
padding: 18px;
height: 57px;
width: 66px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(50, 50, 50, 0.5);
}
.hamburger-icon .burger {
margin-bottom: 5px;
background-color: #ffffee;
height: 2px;
width: 30px;
border-radius: 3px;
}
.hamburger-icon .burger:last-child {
margin-bottom: 0;
}
.change-1 {
transform: rotate(90deg);
}
@media (max-width: 768px) {
.block.hero .name {
font-size: 12vw;
}
.block.hero .subtitle {
font-size: 5.5vw;
font-weight: 500;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="loading">
<div class="site-wrapper">
<div class="site-main fullpage">
<section data-id="hero" class="block hero" style="margin-top:0;padding:0">
<div class="hamburger-icon">
<div class="burger one"></div>
<div class="burger tikki"></div>
<div class="burger two" style="margin-bottom: 0;"></div>
</div>
<canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
<div class="block__content vertical-align-helper text-align-center">
<div class="vertical-align-middle">
<h1 class="name">Chirag <span>Bhansali</span></h1>
<h3 class="subtitle">Front-End Web Developer</h3>
</div>
</div>
</section>
사업부
을 변경하려면 '클릭 menu.so 이상 메뉴 아이콘에 나타나지 않습니다. 상대 위치 및 광고 위치 메뉴에 zing-ding을 넣으십시오 – XYZ
햄버거에'position : relative;'를 만들어보십시오.'z-index' 속성을 변경하십시오 –
이것을 읽으십시오 : [mcve] ** minimal ** example - your code 문제와 관련이 있거나 그렇지 않을 수있는 코드가 너무 많습니다. 최소한의 예제를 만드는 프로세스는 대부분의 경우 직접 응답을 제공합니다. –