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

비주얼 스튜디오 코드 58_햄버거 메뉴 복습

조반짝 2023. 7. 3. 12:22
728x90
반응형

html 마크업

네비게이션 마크업

모바일 바 마크업

 

CSS 편집

●row 넣는 이유는 완충작용으로 여백에 여유를 주어 다양한 크기의 디바이스에 글씨가 잘리지 않도록함 

●반응형 크기적용하기

● container width: 100% 설정 해야 화면 조정시 같이 크기가 변함

row값은 화면 크기에 따라 다르게 설정한다. 화면 크기가 작을수록 작게 설정

[ min-960px media 설정]

네비게이션 스타일설정

navBG 의 기준점을 container로 잡는다.

 

 

네비게이션 마우스오버 시 하단 바 나오게 하기

네비게이션 슬라이드 다운 효과

960px 이상일 때 네비게이션 슬라이드 효과 지정

●.width() : 요소의 너비값만 구할 경우

●.innerWidth() : 요소의 너비 값 + padding을 더한 값

● .outerWidth() : 요소의 너비값과 padding + border를 더한 값

● .outerWidth(true) : 파리미터에 true를 넣을 경우 요소의 width, padding, border, margin 을 모두 포함한 값을 나타낸다.

[ max-960px media 설정]

barMenu 클릭이벤트

submenu 가상요소 넣기

<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>
    <header id="header clearfix">
        <div class="container">
            <!--왼쪽과 오른쪽에 여백 -->
            <div class="row">
                <div class="header">
                    <h1 class="logo">
                        <!-- 로고는 반드시 메인 인덱스로 넘어가야함, 링크걸기 -->
                        <a href="#">LOGO</a>
                    </h1>
                    <nav class="gnb">
                        <ul class="clearfix">
                            <li><a href="#">회사소개</a>
                                <ul class="submenu">
                                    <li><a href="#">CEO 인사말</a></li>
                                    <li><a href="#">오시는 길</a></li>
                                </ul>
                            </li>
                            <li><a href="#">제품소개</a>
                                <ul class="submenu">
                                    <li><a href="#">스폰지</a></li>
                                    <li><a href="#">플라스틱</a></li>
                                    <li><a href="#">제품 테스트</a></li>
                                </ul>
                            </li>
                            <li><a href="#">응용분야</a>
                                <ul class="submenu">
                                    <li><a href="#">필터</a></li>
                                    <li><a href="#">자동차</a></li>
                                    <li><a href="#">선물센트 내장지</a></li>
                                </ul>
                            </li>
                            <li><a href="#">고객지원</a>
                                <ul class="submenu">
                                    <li><a href="#">고객센터</a></li>
                                    <li><a href="#">공지사항</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                    <div id="barMenu">
                        <div class="bar"></div>
                    </div><!--barMenu-->
                </div><!--header-->
            </div><!--row-->
        </div><!--container-->
        <!--  gnbBG의 기준점을 container로 잡아줌-->
        <div id="gnbBG"></div><!--gnbBG-->
    </header>
    <section id="banner">
        <img src="./img/banner.png" alt="배너이미지">
    </header>

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

    <script>
        // barMenu 클릭 이벤트
        $("#barMenu").click(function(e){
            e.preventDefault();
            $(".gnb").toggleClass("on");
        });

        // 모바일 네비게이션
        $(".gnb>ul>li>a").click(function(e){
            let winW = $(window).outerWidth();
            if(winW <=960){
                e.preventDefault();
                $(".header .gnb>ul>li>.submenu").stop().slideUp();
                $(this).next("ul").stop().slideToggle();
                $(this).parents(".header .gnb>ul>li").toggleClass("open");
            }
        });

        // pc 네비게이션
        $(".gnb>ul>li").mouseenter(function(e){

            // 반응형 960px
            let winW = $(window).outerWidth();
            // console.log(winW) 
            // 마우스 올렸을 때 브라우저 너비값
            if(winW > 960){
                e.preventDefault();
                $(".gnb>ul>li").find(".submenu").stop().slideDown();
                $("#gnbBG").stop().slideDown();
            }

           
        }); 

        $(".gnb>ul>li").mouseleave(function(e){
            // 마우스 떠났을 때 브라우저 너비값
            let winW = $(window).outerWidth();
            if(winW > 960){
                e.preventDefault();
                $(".gnb>ul>li").find(".submenu").stop().slideUp();
                $("#gnbBG").stop().slideUp();
            }
            
        }); 
    </script>
</body>
</html>

<css>

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #222;
}
li{
    list-style: none;
}
a{
    color: #222;
    text-decoration: none;
}
.clearfix::before, .clear::after{
    content: "";
    display: block;
    clear: both;
}
#header{
    width: 100%;
    height: 95px;
}
#banner{
    width: 100%;
    height: 600px;
    /* background: url(../img/banner.png) no-repeat;
    background-size: cover; */
    /* 배경으로 사용했을 때 전체사이즈 */
}
#banner img{
    /* 배경 전체사이즈할 때 사용 화면 줄일 때 같이 축소 */
    width: 100%;
}
.container{
    
    width: 1280px;
    margin: 0 auto;
    /* container 에 기준점을 주어 gnbBg위치 잡아줌 */
    position: relative;
}
.row{
    padding: 0 28px;
}

@media(max-width:1290px){
    /* 반응형을 할때는 container 100%로 설정 */
    .container{width: 100%;}
}
@media(max-width:1024px){}



/* PC 버전 */
@media(min-width:960px){
    /* row값을 화면 크기에 따라 다르게 설정 */
    .row{padding: 0 28px;}
    .header{}
    .header .logo{
        width: 184px;
        height: 95px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
    }
    .header .logo a{}
    .header .gnb{
        float: right;
    }
    .header> .gnb> ul{}
    .header> .gnb> ul> li{
        float: left;
        width: 136px;
        /* 높이값대신 패딩값으로 적용 */
        padding: 35px 0;
        position: relative;
    }
    /* 네비게이션 마우스오버 시 표시바 만들기 */
    .header> .gnb> ul> li::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-color: #193a6f;
        transform: scaleX(0);
        transition: all 0.5s;  
    }
    .header> .gnb> ul> li:hover::after{
        transform: scaleX(100%);
    }
    .header> .gnb> ul> li> a{
        display: block;
        font: 18px;
        font-weight: bold;
        text-align: center; 
    }
    .header> .gnb> ul> li> .submenu{
        position: absolute;
        width: 100%;
        left: 0;
        top: 95px;
        z-index: 10;
        display: none; 
    }
    .header> .gnb> ul> li> .submenu> li{}
    .header> .gnb> ul> li> .submenu> li> a{
        font-size: 16px;
        display: block;
        padding: 20px 0;
        font-weight: 500;
        text-align: center;
        
    }
    #gnbBG{
        width: 100%;
        height: 200px;
        background-color: #f5f5f5;
        position: absolute;
        left: 0;
        top: 95px;
        z-index: 9;
        display: none;    
    }
}

/* 모바일 네비게이션 */
@media(max-width:960px){
    .row{padding: 0 20px;}

    .header{}
    .header .logo{
        width: 100%;
        height: 95px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header .gnb{
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        width: 250px;
        left: -300px;
        top: 95px;
        height: calc( 100vh - 95px);
        transition: all 0.5s;
    }
    /* barMenu 클릭 이벤트 */
    .header .gnb.on{
        left: 0;
    }
    .header .gnb > ul{
       border-top: 1px solid #fff;
       border-bottom: 1px solid #fff;
    }
    .header .gnb > ul > li{
       width: 100%;
       border-top: 1px solid #fff;
       border-bottom: 1px solid #fff;
       position: relative;
    }
    .header .gnb > ul > li::after{
        content: "+";
        position: absolute;
        top: 7px;
        right: 30px;
        width: 0;
        height: 0;
        color: #1d1d1f;
        font-weight: 500;
    }
    .header .gnb > ul > li:hover::after{
        color: #ccc;
    }
    .header .gnb > ul > li.open::after{
        content: "-";
    }
    .header .gnb > ul > li > a{
        display: block;
        font-size: 16px;
        font-weight: 700;
        padding: 15px 30px;
    }
    .header .gnb > ul > li > .submenu{
        height: auto;
        display: none;
    }
    .header .gnb > ul > li > .submenu > li{
        border-top: 1px solid #fff;
    }
    .header .gnb > ul > li > .submenu > li > a{
        display: block;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 60px;
    }


    /* 클래스 밑에 아이디를 넣지 않지만, 위치가 밖에있을 때랑 안에 있을 때랑 위치 비교-> 아이디 나중에 이동할 거임 */
    .header #barMenu{
        width: 40px;
        height: 25px;
        /* background-color: #ccc; */
        position: absolute;
        top: 35px;
        left: 20px;
        cursor: pointer;
        
    }
    .header #barMenu .bar{
        width: 100%;
        height: 4px;
        background-color: #1d1d1f;
        position: relative;
    }
    .header #barMenu .bar::after,.header #barMenu .bar::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #1d1d1f;
        top: 10px;
    }
    .header #barMenu .bar::before{
        top: 20px;
    }
 


/* @media(max-width:768px){
    .row{padding: 0 16px;}
}
@media(max-width:600px){} */
/* 갤럭시사이즈 */
/* @media(max-width:480px){}
@media(max-width:320px){} */
}

728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 60_ parallax 06  (0) 2023.07.04
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기  (0) 2023.07.03
비주얼 스튜디오 코드 57 _ parallax 05  (0) 2023.06.30
비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션)  (0) 2023.06.30
비주얼 스튜디오 코드 55_ parallax04  (0) 2023.06.29

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

  • 현재글비주얼 스튜디오 코드 58_햄버거 메뉴 복습

관련글

티스토리툴바