비주얼 스튜디오 코드 63

728x90

▶ 네비게이션을 닷메뉴 형태로 변경

html 마크업

css reset

#contents css 편집

각 article 배경색 넣기

article 한번에 편집

#header css 편집

#dot - ul(menu) css 편집

fixed 시키고 위치 변경하기

.li css 편집

menu 1-6 글자 지우기

parallax 적용

script

dot 클릭하면 해당페이지로 움직이게 하기

스크롤 좌표 알아보기

페이지별 dot이 활성화되면서 해당페이지로 이동한다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네비게이션을 닷메뉴 형태로 변경</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header id="header">
        <h1>C's Web</h1>
    </header>
    <nav 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>
    </nav>
    <section id="contents">
        <article id="article1"><h2>언어의 한계가 곧 자기세계의 한계다.</h2></article>
        <article id="article2"><h2>교육은 최상의 노후대비책이다.</h2></article>
        <article id="article3"><h2>용기란 공포를 1분 더 참는 것이다.</h2></article>
        <article id="article4"><h2>욕망은 이성의 지배하에 두어라</h2></article>
        <article id="article5"><h2>교육의 위대한 목표는 앎이 아니라 행동이다.</h2></article>
        <article id="article6"><h2>계획 없는 목표는 한낱 꿈에 불과하다.</h2></article>
    </section>

    <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 > article");

        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(){
            let wScroll = $(this).scrollTop();
            console.log(wScroll);

            if(wScroll >= cont.eq(0).offset().top){
                dot.removeClass("active");
                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")
            }
            if(wScroll >= cont.eq(6).offset().top){
                dot.removeClass("active");
                dot.eq(6).addClass("active")
            }

        });
    </script>

</body>
</html>

<css>

@charset "utf-8";

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

#header{
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}
#header h1{color: yellowgreen;}
#dot{
    position: fixed;
    top: 50%;
    right: 20px;
    /* translate로 중앙으로 위치 배정 */
    transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
    margin: 8px;
}
#dot ul li a{
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    
}
#dot ul li a em{
    /* 글자 지우기 */
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}
#dot ul li.active{}
#dot ul li.active a{
    background-color: #fff;
}

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

#article1{background-color: lightblue;}
#article2{background-color: lightgreen;}
#article3{background-color: lightsalmon;}
#article4{background-color: lightcoral;}
#article5{background-color: lemonchiffon;}
#article6{background-color: lavenderblush;}

728x90

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

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

비주얼 스튜디오 코드 65_파노라마 회사 소개 (0)	2023.07.05
비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03 (0)	2023.07.05
비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 (0)	2023.07.04
비주얼 스튜디오 코드 61 _ 비교연산자 (0)	2023.07.04
비주얼 스튜디오 코드 60_ parallax 06 (0)	2023.07.04