사이트 만들기 완성.ver

사이트 헤더 만들기 + 스크립트 적용하기

사이트의 헤더 메뉴를 햄버거 메뉴로 만들어서 반응형에서도 메뉴가 작동할 수 있게 만들어 줍니다.
📣추가적으로 스크립트를 작성하여 슬라이드가 움직일 수 있도록 만들어 주며 메뉴를 클릭했을때 해당 영역으로 부드럽게 이동할 수 있도록 만들어 줍니다.

---

헤더 영역

헤더 영역은 화면이 줄어 들면 많은 부분이 깨지기 때문에 줄어 들었을때에 햄버거 메뉴를 추가 하여 주었습니다👻

<div class="header__ham">
    <span></span>
    <span></span>
    <span></span>
</div>

우선 span태그를 사용하여 햄버거 메뉴를 만들어 줍니다.

햄버거 메뉴 CSS

.header__ham {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    display: none;
    cursor: pointer;
}
.header__ham span {
    display: block;
    background: #000;
    width: 30px;
    height: 2px;
    border-radius: 3px;
    margin-left: 10px;
    margin-top: 5px;
    transition: 0.25s margin 0.25s, 0.25s transform ;
}
.header__ham span:nth-child(1) {
    margin-top: 17px;
}
.header__ham.active span {
    transition: 0.25s margin, 0.25s transform 0.25s;
}
.header__ham.active span:nth-child(1) {
    margin-top: 25px;
    margin-bottom: -7px;
    transform: rotate(45deg);
}
.header__ham.active span:nth-child(2) {
    transform: rotate(45deg);
    
}
.header__ham.active span:nth-child(3) {
    margin-top: -2px;
    transform: rotate(135deg);
}

🎵햄버거 메뉴
햄버거 메뉴(drawer menu)란 주로 앱 상단에 네비게이션으로 사용되는 메뉴로, 여러가지 다양한 기능들을 하나의 네비게이션 안에 담을 수 있어서 널리 사용되고 있습니다.

🌞헤더 영역의 반응형은 1300px가 되었을때 부터 반응 할 수 있도록 만들어 주었습니다.
1300px가 되었을때, 햄버거 메뉴를 display: block을 적용하여 나타나도록 하였습니다.

헤더 영역 CSS

/* media */
@media(max-width: 1300px){
    .header__menu {
        position: fixed;
        right: -100%;
        top: 69px;
        background: #fff;
        width: 60%;
        height: 100vh;
        padding: 20px;
        text-align: right;
        transition: right 0.4s ease-in;
    }
    .header__menu ul li {
        display: block;
        margin: 25px;
    }
    .header__menu ul li a {
        padding: 10px;
        white-space: nowrap;
    }
    .header__menu.overlay {
        right: 0;
    }
    .header__member {
        margin-right: 50px;
    }
    .header__ham {
        display: block;
    }
    .header__logo {
        width: 50%;
    }
    .header__member {
        width: 50%;
    }
}

.fixed {
    height: 100vh;
    overflow: hidden;
}

햄버거 메뉴바가 나타났을때 body가 움직이지 않도록 고정을 시켜주기 위해 css를 추가 시켜 주었습니다.

스크립트

슬라이드

슬라이드는 swiper를 이용하였습니다.
🖌️disableOnInteraction는 기본적으로 true로 셋팅이 되어있는데, 마우스로 슬라이드를 수동으로 전환하는 것이기 때문에 마우스를 사용한 후에도 계속 해서 슬라이드가 넘어가기를 원한다면 false로 설정해주어야 합니다.
🪄추가적으로 평소에는 정지버튼이 나오도록 설정하고, 정지 버튼을 누르면 정지 버튼 대신 플레이버튼이 나오도록 만들어 주었습니다.

Javascript

var swiper = new Swiper(".mySwiper", {
    navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,        
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
});
const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-play");

btnStart.style.display = "none";

btnStop.addEventListener("click", () => {
    swiper.autoplay.stop();
    btnStart.style.display = "block";
    btnStop.style.display = "none";
});
btnStart.addEventListener("click", () => {
    swiper.autoplay.start();
    btnStop.style.display = "block";
    btnStart.style.display = "none";
});

햄버거 메뉴

버튼과 메뉴를 변수로 만들어서 작업을 합니다.
🔊toggle은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 만들어 줍니다.
메뉴를 누르면 화면이 고정되게 만들고 해당 메뉴를 클릭하면, 해당 영역으로 이동하면서 동시에 메뉴가 사라지게 만들어 주었습니다.

Javascript

const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");


btnHam.addEventListener("click", () => {
    btnHam.classList.toggle("active");
    btnMenu.classList.toggle("overlay");
    document.body.classList.toggle("fixed");
});

btnMenuList.forEach((list) => {
    list.addEventListener("click", () => {
        btnHam.classList.remove("active");
        btnMenu.classList.remove("overlay");
        document.body.classList.remove("fixed");
    });
});

window.addEventListener("resize", () => {
    let width = window.innerWidth;
    if(width > 1300){
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
    }
});

패럴랙스 효과

스크립트로 메뉴에 패럴랙스 효과를 추가 해줍니다. 클릭했을 때 smooth효과를 통해서 부드럽게 넘어가게 해주고, 각 영역으로 넘어 갈때 마다 메뉴에 active 클래스를 추가해서 활성화가 될 수 있도록 만들어 줍니다.

Javascript

document.querySelectorAll(".header__menu li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.offsetTop || document.documentElement.scrollTop;

    document.querySelectorAll(".content__item").forEach((element, index) => {
        if(scrollTop >= element.offsetTop - 600) {
            document.querySelectorAll(".header__menu li").forEach(li => {
                li.classList.remove("active")
            });
            document.querySelector(".header__menu li:nth-child(" + (index+1) + ")").classList.add("active")
        };
            
    })
})

완성🥳

이거 근데 최종의 최종 최최최종 이런식으로 막 바뀌는거 아니겠죠....? 끝이 겠죠;;;?