☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 53_parallax03

조반짝 2023. 6. 28. 15:21
728x90
반응형

html 마크업

css 편집

사이드 메뉴 스타일 지정

open 버튼 만들기

클릭이벤트

액티브 이벤트

open 단추 활성화하기

사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기

open 클래스와 nav가 만나게 해야한다.

스르륵 open 되기 위해서 시간을 더해주면 된다.

하지만 .css 는 open만 되고 닫히지 않는다.

.toggleClass("Open"); 을 한다.

만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때

if문 : 모든 조건을 다 수용할 수 있다.

 

● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드

●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <nav id="side_nav">
        <h1>Website</h1>
        <ul>
            <li class="active"><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
            <li><a href="#">메뉴4</a></li>
            <li><a href="#">메뉴5</a></li>
            <li><a href="#">메뉴6</a></li>
        </ul>
        <a href="#" class="navBtn">Open</a>
    </nav>
    <section id="contents">
        <article id="article1">
            <h2>피할 수 없으면 <strong>즐겨라</strong></h2>
        </article>
        <article id="article2">
            <h2>삶이 있는 한 <strong>희망</strong>은 있다.</h2>
        </article>
        <article id="article3">
            <h2>시간은 <strong>금이다</strong></h2>
        </article>
        <article id="article4">
            <h2>먼저 핀 꽃은 <strong class="blue">먼저 진다.</strong></h2>
        </article>
        <article id="article5">
            <h2>피할 수 없으면 <strong class="blue">즐겨라</strong></h2>
        </article>
        <article id="article6">
            <h2>피할 수 없으면 <strong class="blue">즐겨라</strong></h2>
        </article>       
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        const nav = $("#side_nav > ul > li");
        const cont = $("#contents > article");

        // 클릭이벤트 : 클릭했을 때 각 페이지에 링크되도록 함
        nav.click(function(event){
            event.preventDefault();
            let target = $(this);
            let index = target.index();
            let section = cont.eq(index);
            let offset = section.offset().top
            $("html").animate({scrollTop:offset},600);
        });

        // active 가 각 페이지에 클릭했을 때 활성화하기 
        $(window).scroll(function(){
            let wScroll = $(this).scrollTop();
            // console.log(wScroll)
            if(wScroll >= cont.eq(0).offset().top){
                nav.removeClass("active");
                nav.eq(0).addClass("active");
            }

            if(wScroll >= cont.eq(1).offset().top){
                nav.removeClass("active");
                nav.eq(1).addClass("active");
            }
            if(wScroll >= cont.eq(2).offset().top){
                nav.removeClass("active");
                nav.eq(2).addClass("active");
            }
            if(wScroll >= cont.eq(3).offset().top){
                nav.removeClass("active");
                nav.eq(3).addClass("active");
            }
            if(wScroll >= cont.eq(4).offset().top){
                nav.removeClass("active");
                nav.eq(4).addClass("active");
            }
            if(wScroll >= cont.eq(5).offset().top){
                nav.removeClass("active");
                nav.eq(5).addClass("active");
            }
        });

        // navBtn 을 클릭했을 때
        $(".navBtn").click(function(e){
            e.preventDefault();
            // $("#side_nav").css("left","0");
            $("#side_nav").toggleClass("Open");
            // open 을 눌렀을 때 사이드 네비게이션이 나온다.
        

        if($("#side_nav").hasClass("Open")){
            // 참
            $(".navBtn").text("Close");
            // open이라는 글자를 가지고 있으면 Close로 변경하고   
        } else{
            // 거짓
            $(".navBtn").text("Open")
            // 가지고 있지 않으면 그대로 open.
        }

         });


        // text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드
        // hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드
    </script>

</body>
</html>

<css>

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #222;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
img{
    display: block;
}
em{
    font-style: normal;
}

/* side_nav */
#side_nav{
    /* 사이드 네비게이션 */
    width: 300px;
    height: 100vh;
    background-color: rgba(255,255,255,0.3);
    position: fixed;
    /* nav 감추어주기(-300px) */
    left: -300px;
    transition: all 0.5s;
}
#side_nav.Open{
    left: 0px;
}
#side_nav h1{
    font-size: 40px;
    color: #fff;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px darkblue;
}
#side_nav ul{}
#side_nav ul li{
    
}
#side_nav ul li a{
    /* 메뉴 크기지정 */
    display: block;
    text-align: center;
    font-size: 18px;
    padding: 5px 10px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
#side_nav ul li.active{
    /* 마우스 오버, 클릭 시 활성화 되는 칸 */
    background-color: rgba(255,255,255,0.5);
    border-left: 5px solid red;
}
#side_nav .navBtn{
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.5);
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    color: orange;
    font-weight: bold;
    /* 이동하기 */
    position: absolute;
    /* width값이 50px이기 때문에 -10px만큼 가려면 -60px이다 */
    right: -60px;
    top: 10px;
    box-shadow: 2px 0px 5px orangered;
}

#contents{
    text-align: center;
}
#contents > article{
    width: 100%;
    height: 100vh;
    line-height: 100vh;
}
#contents > article > h2{
    font-size: 6vh;
}
#contents > article > h2 > strong{
    font-weight: bold;
    color: red;
}
#contents > article > h2 > strong.blue{
    color: blue;
}
#article1{
    background-color: #69d2fb;
}
#article2{
    background-color: #f2606f;
}
#article3{
    background-color: #ff8930;
}
#article4{
    background-color: #1ea623;
}
#article5{
    background-color: #38a7aa;
}
#article6{
    background-color: #6bdace;
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

[JAVASCRIPT]5.클래스 제어하기  (0) 2023.06.29
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자  (0) 2023.06.29
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기  (0) 2023.06.28
비주얼 스튜디오 코드 51_ 햄버거 메뉴  (0) 2023.06.27
비주얼 스튜디오 코드 50 _ Parallax02  (0) 2023.06.27

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 53_parallax03

관련글

티스토리툴바