비주얼 스튜디오 코드 66_ 사이드 닷 메뉴

728x90

닷메뉴_ active 값에 변화주기

css reset

#header css편집

h1 편집

#contents css 편집

#dot css 편집

active 활성화

닷을 클릭하면 해당페이지로 넘어간다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>닷메뉴_active값에 변화주기</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header id="header">
        <h1>WEB'S</h1>
    </header>
    <div id="dot">
        <ul>
            <li class="active"><a href="#"><em>menu1</em></a></li>
            <li><a href="#"><em>menu2</em></a></li>
            <li><a href="#"><em>menu3</em></a></li>
            <li><a href="#"><em>menu4</em></a></li>
            <li><a href="#"><em>menu5</em></a></li>
            <li><a href="#"><em>menu6</em></a></li>
        </ul>
    </div>
    <div id="contents">
        <div id="div1"><h2>우아한 성공은 없다</h2></div>
        <div id="div2"><h2>기회는 바로 옆에 있다</h2></div>
        <div id="div3"><h2>현실을 외면하지 말자</h2></div>
        <div id="div4"><h2>공부는 우리 삶의 우선적 요소다</h2></div>
        <div id="div5"><h2>기회가 없으면 만들면 된다.</h2></div>
        <div id="div6"><h2>모든 일은 스스로 해결하라</h2></div>
    </div>

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

    <script>
        const dot = $("#dot>ul>li");
        const cont = $("#contents>div")

        dot.click(function(e){
            e.preventDefault();
            let target = $(this);
            let index = target.index();

            let section = cont.eq(index);
            let offset = section.offset().top;
            $("html,body").animate({scrollTop:offset},600);
        });

        $(window).scroll(function(e){
            e.preventDefault();
            let wScroll = $(this).scrollTop();
            
            // 스크롤된 페이지가 0페이지 탑값 보다 크거나 같으면
            if(wScroll >= cont.eq(0).offset().top){
                // 기존 닷의 액티브값을 지우고 
                dot.removeClass("active");
                // 0번째 닷에 액티브값을 추가한다.
                dot.eq(0).addClass("active");
            }
            if(wScroll >= cont.eq(1).offset().top){
                dot.removeClass("active");
                dot.eq(1).addClass("active");
            } 
            if(wScroll >= cont.eq(2).offset().top){
                dot.removeClass("active");
                dot.eq(2).addClass("active");
            } 
            if(wScroll >= cont.eq(3).offset().top){
                dot.removeClass("active");
                dot.eq(3).addClass("active");
            } 
            if(wScroll >= cont.eq(4).offset().top){
                dot.removeClass("active");
                dot.eq(4).addClass("active");
            } 
            if(wScroll >= cont.eq(5).offset().top){
                dot.removeClass("active");
                dot.eq(5).addClass("active");
            }

        });

    </script>

</body>
</html>

<css>

@charset "utf-8";

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #222;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #222;
}

#header{}
#header h1{
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 60px;
}

#dot{
    position: fixed;
    /* 위치 배치 */
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
    transition: all 0.5s;
    /* a의 기준점 */
    position: relative;
}
#dot ul li a{
    background-color: rgba(255, 255, 255,1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    transition: all 0.5s;
}
#dot ul li.active{
    /* shadow 거리를 넣어주어 크기를 키울 수 있다. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}
#dot ul li.active a{
    /* active 되어있다는 표시넣기 */
    transform: scale(0.4);
}
/* em 숨겨주기 */
#dot ul li em{font-size: 0;line-height: 0;text-indent: -99999px; width: 0;height: 0;}

#contents{}
#contents>div{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contents>div>h2{
    font-size: 5vw;
    color: #fff;
    text-shadow: 2px 2px 5px #bbb;
}

#div1{background-color: lightblue;}
#div2{background-color: lightpink;}
#div3{background-color: lavenderblush;}
#div4{background-color: lightgray;}
#div5{background-color: lightsalmon;}
#div6{background-color: lightseagreen;}

728x90

저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02 (0)	2023.07.07
비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴 (0)	2023.07.06
비주얼 스튜디오 코드 65_파노라마 회사 소개 (0)	2023.07.05
비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03 (0)	2023.07.05
비주얼 스튜디오 코드 63_ parallax07 (0)	2023.07.05