비주얼 스튜디오 코드 51

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

비주얼 스튜디오 코드 51_ 햄버거 메뉴

조반짝 2023. 6. 27. 17:07

728x90

패럴럭스에서 했던 코딩파일에 이어서 작업한다.

#nav 밑에 mNav 클래스를 만들어준다.

css 편집

.mNav를 포지션을 띄워줘야 원하는 자리에 위치시킬 수 있다.

백그라운드 컬러와 너비 높이값으로 영역 잡기

top, right로 위치 잡기

햄버거 바 만들기

가상요소로 햄버거 바 2개 더 만들기

전체화면에는 메뉴가 있기 때문에 햄버거바는 없어야한다.

미디어 쿼리

화면너비 W 960px이 되면 햄버거 메뉴가 나오게 하기

display:none 을 다시 살리면 메뉴가 안보인다.

햄버거 메뉴 클릭했을 때 메뉴 슬라이드로 나오게하기

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parallax</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <nav id="nav">
        <h1>HI</h1>

        <div class="mNav">
            <div class="icon_wrap">
                <div class="icon"></div>
            </div>
        </div>

        <ul class="menu">
            <li class="active"><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
            <li><a href="#">menu6</a></li>
        </ul>
    </nav>
    <section id="contents">
        <article id="article1">
            <h2>안녕하세요</h2>
        </article>
        <article id="article2">
            <h2>챠오</h2>
        </article>
        <article id="article3">
            <h2>곰방와</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 nav = $("#nav > ul > li");
        const cont = $("#contents > article");

        // 클릭이벤트
        nav.click(function(event){
            event.preventDefault();
            let target = $(this);
            // 클릭한 target을 this라고 하겠다.
            let index = target.index();
            // target인 인덱스를 인덱스에 넣어주겠다
            let section = cont.eq(index);
            // 섹션 안에 컨텐츠의 인덱스를 넣어주겠다.
            let offset = section.offset().top
            // top값을 offset이라는 변수안에 지정해주어야한다. 
            $("html").animate({scrollTop:offset},600);
            // 전체화면을 애니메이트로 움직일것이다. 0.6초동안 윗방향으로offset만큼 스크롤하겠다.
        });

        // 스크롤 이벤트: 스크롤 됐을 때 액티브 값 변경
        $(window).scroll(function(){
            let wScroll = $(this).scrollTop();
            if(wScroll >= cont.eq(0).offset().top){
            // 윈도우가 스크롤 됐을 때 이벤트를 보겠다.
            // 변하는 값 지정 this > wScroll
            // 만약에 wScroll이 첫번째 페이지의 꼭대기 점보다 컸을 때
                nav.removeClass("active");
                nav.eq(0).addClass("active");
                // active를 삭제하고
                // eq가 0값일때 첫번째 menu에 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");
            }
            
            
        });

        $(".mNav").click(function(){
                // $(".menu").show();
                // $(".menu").css("display","block");
                // $(".menu").fadeIn();
                // $(".menu").fadeToggle();
                $(".menu").slideToggle(500);                
        });
        $(window).resize(function(){
            let wWidth = $(window).width(); //윈도우 너비값을 구해서 wWidth에 대입
            // console.log(wWidth);
            if(wWidth > 960){
                $(".menu").removeAttr("style");
            }
        });

            // .wWidth() : 선택자의 너비값을 구해주는 메소드
        
    </script>
</body>
   


</html>

<css>

@charset "utf-8";

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

#nav{
    position: fixed;
    width: 100%;
    background-color: rgba(255,255,255,0.3);
}
#nav h1{
    float: left;
    color: #fff;
    font-size: 40px;
    padding: 5px 5px 5px 15px;
}

/* 반응형 네비게이션 */
#nav .mNav{
    position: absolute;
    width: 65px;
    /* 햄버거바 4px X 3 , 여백 10px X 2 = 34px*/
    height: 34px;
    /* background-color: rgba(0,0,0,0.5); */
    top: 20px;
    right: 10px;
    cursor: pointer;
    display: none;
}
#nav .mNav .icon_wrap{
    padding-left: 10px;
}
#nav .mNav .icon_wrap .icon{
    width: 45px;
    height: 4px;
    background-color: #fff;
}
/* 가상요소로 바 2개 더 만들기 */
#nav .mNav .icon_wrap .icon::after{
    content: "";
    display: block;
    position: absolute;
    width: 45px;
    height: 4px;
    background-color: #fff;
    /* 배치 */
    top: 10px;
}
#nav .mNav .icon_wrap .icon::before{
    content: "";
    display: block;
    position: absolute;
    width: 45px;
    height: 4px;
    background-color: #fff;
    /* 배치 */
    top: 20px;
}


#nav .menu{
    float: right;
    
}
#nav .menu li{
    padding: 10px;
    display: inline;
}
#nav .menu li a{
    display: inline-block;
    padding: 20px 10px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
}
#nav .menu li.active {}
#nav .menu li.active a {
    color: #333;
}

#contents{}
#contents > article{
    width: 100%;
    height: 100vh;
    text-align: center;
    line-height: 100vh;

}
#contents > article >h2{
    color: #fff;
    font-size: 70px;
}

#article1{
    background: radial-gradient(ellipse farthest-corner at bottom center, #fff176 0%, #8bc34a 100%);
}
#article2{
    background: radial-gradient(ellipse farthest-corner at center center, #afb42b 0%, #33691e 100%);
}
#article3{
    background: radial-gradient(ellipse farthest-corner at top center, #64ffda  0%, #8bc34a 100%);
}
#article4{
    background: radial-gradient(ellipse farthest-corner at center left, #fff176 0%, #00bfa5  100%);
}
#article5{
    background: radial-gradient(ellipse farthest-corner at right center, #e0f2f1  0%, #ff5722  100%);
}
#article6{
    background: radial-gradient(ellipse farthest-corner at center top, #18ffff  0%, #283593  100%);
}

/* 미디어 쿼리 */
@media(max-width:960px){
    #nav .menu{display: none;}
    #nav .mNav{display: block;}
    #nav h1{width: 100%;}
    #nav .menu{float: none; }
    #nav .menu li{display: inline-block; text-align: center; width: 100%;}
    #nav .menu li.active{background-color: rgba(255,255,255,0.7);}
    #contents > article >h2{font-size: 6vw;}
}

728x90

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

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

비주얼 스튜디오 코드 53_parallax03 (2)	2023.06.28
비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 (0)	2023.06.28
비주얼 스튜디오 코드 50 _ Parallax02 (0)	2023.06.27
비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴 (0)	2023.06.27
비주얼 스튜디오 코드 48_Parallax (0)	2023.06.26

현재글비주얼 스튜디오 코드 51_ 햄버거 메뉴

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

자바스크립트, 자바, media, offset, ACTIVE, 프론트엔드, Java, 코딩테스트, CSS, JavaScript, 비주얼스튜디오코드, SQL, For문, HTML, 웹디자인, float, position, 이클립스, Parallax, if문,

Today :
Yesterday :

조반짝의 도전일지