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

비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션)

by 조반짝 2023. 6. 30.
728x90
반응형

모바일 네비게이션 01

html 마크업

css 편집

#contents 편집

●vw : 세로로 잘라서 나눠서 쓰겠다. 

●vh : 가로로 잘라서 나눠서 쓰겠다.

#nav 편집

h1, nav float left/ right 줌

nav 포지션 픽스를 해주어 고정시키고 포지션을 띄우면 너비값을 잃기 떄문에 w:100%를 줌

menu 를 옆으로 나열하기 위해 inline 구조로 변경하고 active는 인라인구조와 블럭구조의 성질을 가지게한다.

 

active a 를 만들어서 컬러값을 넣어야 변경됨

 

반응형 적용하기

#nav .mNav 편집

햄버거메뉴 만들기 - 영역 잡기

햄버거메뉴 위치 잡기

햄버거 메뉴 바 만들기

햄버거 메뉴 바 2 , 3 만들기

**실무팁

나중에 디자인된 부분을 보고 할 때는 포토샵 파일을 참고해서 위치를 넣어야한다. (포토샵파일 반드시 요구!!)

클라이언트, 디자이너와 통화할 때 녹음하기

 

배경지우기

햄버거 바 가리기

media.css 만들기 (index.html에 링크 걸기 마지막 순서로 걸어준다.)

media.css 에 반응형 코드만들기

960px 이하가 되면 햄버거 메뉴가 나온다.

#nav .menu{display: none;} 으로 메뉴를 가려준다.

#nav h1 가운데 올수 있도록한다.

#nav .menu li 편집

 가운데 밑으로 나열하기

menu width :100% / padding-right:0 한다.

클릭이벤트 J-query

 

햄버거 바를 클릭하면 메뉴가 스르륵 나타난다.

창을 다시 키우면 메뉴가 사라진다.

다시 보이게 하려면?

if 문을 이용하여 조건을 넣는다.

●removAttr : 속성을 지운다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 메뉴01</title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- media는 맨 마지막에 링크걸기 -->
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <div id="nav">
        <h1>LOGO</h1>
        <!-- 반응형 메뉴 -->
        <div class="mNav">
            <div class="icon_wrap"> <!--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>
    </div>
    <div id="contents">
        <article id="article1">연락없이 빠지지 맙시다. 제발!!</article>
    </div>

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

    <script>
        // 클릭이벤트
        $(".mNav").click(function(){
            $(".menu").slideToggle();
        });

        $(window).resize(function(){
            let wWidth = $(window).width();
            // console.log(wWidth)
            // 만약 960px 보다 커지면 메뉴의 스타일의 속성을 지운다.
            if(wWidth > 960){
                $(".menu").removeAttr("style");
            }
        });
       
    </script>
</body>
</html>

<style.css>

@charset "utf-8";

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

#nav{
    position: fixed;
    width: 100%;
    background-color: rgba(255,255,255,0.3);
    height: 60px;
}
#nav h1{
    float: left; padding: 7px 7px 15px 20px;}
#nav .menu{
    float: right; padding-right: 20px;}
#nav .menu li{display: inline;}
#nav .menu li a{display: inline-block; padding: 15px 10px; font-size: 20px;}
#nav .menu li.active a{color: darkblue; text-transform: uppercase;}

/* 햄버거 메뉴 */
#nav .mNav{
    /* 기준점은 #nav >> position: fixed 했기 때문에 따로 안 줘도 됨 */
    position: absolute;
    width: 50px;
    height: 45px;
    /* background-color: rgba(255,255,255,0.3); */
    top: 14px;
    right: 20px;
    cursor: pointer;
    /* 가려주기 */
    display: none;
    
}
#nav .mNav .icon_wrap{}
#nav .mNav .icon_wrap .icon{
    width: 50px;
    height: 4px;
    background-color: #222;
    border-radius: 5px;
    position: relative;
}

#nav .mNav .icon_wrap .icon::before, #nav .mNav .icon_wrap .icon::after{
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px;
    height: 4px;
    background-color: #222;
    border-radius: 5px;
}
#nav .mNav .icon_wrap .icon::after{
   top: 20px;
}


#contents{
    text-align: center;
    width: 100%;
    height: 100vh;
    line-height: 100vh;
    font-size: 5vw;
    background-color: violet;
}
#article1{}
@charset "utf-8";

/* 0~960px 까지 */
@media(max-width:960px){
    #nav h1{text-align: center; width: 100%;}
    #nav .mNav{display: block;}
    #nav .menu{
        /*display: none;*/ 
        /* float: none; */
        width: 100%;
        padding-right: 0;
    }
    #nav .menu li{display: inline-block; width: 100%; text-align: center;}
    #nav .menu li.active{background-color: rgba(255,255,255,0.3);}
}
/* 960px~ 끝까지 */
@media(min-width:960px){}

모바일 네비게이션 02

html 마크업

css reset

#header /#banner css 편집

피그마에서 이미지 2000x600 의 이미지를 저장하기

 

background 이미지를 넣으면 반복되어 나온다. 

norepeat을 하여 반복해지한다.

.container 영역잡기

header 마크업 추가하기

로고를 클릭하면 메인페이지로 다시 돌아오게함

.row 에 패딩값이 반영되어 LOGO 텍스트가 나타남

네비게이션 마크업 추가

logo, nav css media 편집

.logo 편집

logo, nav float으로 위치잡기

부모인 header에 clearfix를 넣는다.

logo와 nav가 양쪽으로 위치해있는 걸 볼 수 있다.

.header media 편집

 

nav(gnb) 편집하기

가상요소 마우스오버 효과

nav / submenu 폰트 편집

submenu 포지션을 띄워줘서 고정해준다.

navbg 넣기

gnbBg media 편집

**gnbBg을 화면 전체로 변경하고 싶으면 .container 밖으로 마크업을 변경하고

기준점을 #header에 넣는다.

submenu, gnbBg 가리기

화면을 줄였을 때 화면이 100%로 변경되지 않는다.

화면을 100%로 바꾸어 놓는게 media의 첫단계이다!

media 1300px 에서 container1280px 를 width: 100% 로 변경하기

.container의 width값을 100% 하면 화면을 줄였을 때 100%로 보여진다.

@media(max-width:960px)편집

 

.row padding 값 조절하여 화면 줄였을 때 lgo 위치 재배치

 

.header .logo 재배치 > 가운데 정렬한다.

.gnb 에 heigh: 100vh 만 넣으면 스크롤이 생긴다.

스크롤이 안생기게 하려면 로고가 들어있는 높이값을 빼면 스크롤이 없어진다.

.gnb 하위 태그 편집

nav 편집

.submenu 편집

선넣기

submenu 숨겨주기

submenu 의 높이가 각기 다르기 때문에 height: auto로 맞춰준다.

.gnb(nav) 전체 숨기기

.header .gnb: left -300px 로해주고 open시 left 0으로 한다. 

 

barMenu 으로 버튼 만들기

barMenu를 포지션을 띄워서 위치를 변경한다.

#barMenu .bar  바 만들기

바 2 ,3 만들기

배경색 없애주고 cursor:pointer 추가해서 마우스 올려 놓을시 손가락 모양으로 변경되도록한다. 

<script> submenu , gavBg 메뉴 내려오게 하기

.header .gnb left 0px 일때도 마우스를 올려놨을 때 submenu가 내려온다.

submenu가 내려오게 하기 위해서 추가로 함수를 넣어준다.

넓이값이 나온다. 

960px 보다 작으면 submenu가 실행이 되지않아야한다.

조건을 넣어주어 960이하일때 submenu를 감추어준다.

다시 .gnb left: -300px 를 넣는다.

left: -300px를 추가하면 submenu가 감춰진다.

 

script의 reset 함수 >> 초기화 함수 만들기

시작하자마자 이 함수를 시작하라..

너비값 체크하기

 

모바일 네비게이션 클릭했을 때 gnb가 열리게하기

속도 넣기

width 960이하일 때 메뉴 클릭했으 때 submenu 나오게하기

고객지원을 클릭했을 때 회사소개가 올라가야하는 데 안올라감

새로운 탭을 선택했을 때 전에 메뉴가 올라가게 하는 함수를 추가해야한다.

새로운 메뉴를 클릭하면 전 메뉴가 사라지는 것을 볼 수 있다.

<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">
        <div class="container">
            <div class="row">
                <div class="header clearfix">
                    <div class="logo">
                        <h1><a href="index.html">LOGO</a></h1>
                    </div>
                    <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="#">필터2</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>
                        </ul>
                    </nav><!--.nav-->
                    <div id="barMenu">
                        <div class="bar"></div>
                    </div>
                </div><!--.header-->
            </div><!--.row-->
        </div><!--.container-->
        <div id="gnbBg"></div>     
    </header>
    <section id="banner"></section>

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

    <script>
        // 초기화하는 함수(script의 reset)
        // 시작하자마자 이 함수를 시작하라.
        winSzin();
        function winSzin(){
            let winW = $(window).width();
            console.log(winW)

            // submenu 숨기기
            if(winW >= 960){
                $(".header .submenu").hide();
            }
            
        }

        // 너비값이 체크하기
        $(window).resize(function(){
            winSzin();
        });

        $(".gnb > ul > li").mouseover(function(){
          
            // console.log(winW);
            winW = $(window).width();
            if(winW >=960){
                $(".gnb > ul > li").find(".submenu").stop().slideDown();
                $("#gnbBg").stop().slideDown(500);
            }
        });

        $(".gnb > ul > li").mouseout(function(){
            winW = $(window).width();
            if(winW >=960){
            $(".gnb > ul > li").find(".submenu").stop().slideUp();
            $("#gnbBg").stop().slideUp(500);
            }
        });

        // 모바일 네비게이션 클릭했을 때
        $("#barMenu").click(function(e){
            e.preventDefault();
            // barMenu를 클릭했을 때 
            $(".gnb").toggleClass("open")
            // .gnb에 open 클래스를 넣는다.
        });
        
        // width 960이하일 때 메뉴 클릭했을 때 submenu 나오게하기
        $(".gnb > ul >li > a ").click(function(e){
            if(winW < 960){
                // 960보다 같거나 작으면 > 충돌나기 때문에 작다 표시만 한다.
                e.preventDefault();
                // 임시 링크 걸린 것 해지
                $(".header .gnb>ul>li>.submenu").stop().slideUp();
                // 새로운 것을 클릭하면 무조건 slideUp되고
                $(this).next("ul").stop().slideToggle();
                // 지금 선택한 아이의 다음의 아이(ul = submenu)stop했다가 slidetoggle 열고 닫아라.
            }
        });
    </script>
</body>
</html>

<css>

@charset "utf-8";

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

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

#header{
    width: 100%;
    height: 95px;
     /* gnbBg의 기준점 */
     position: relative;
     border-bottom: 1px solid #193a6f;
}
#banner{
    width: 100%;
    height: 600px;
    background: url(../img/banner.png) center center no-repeat;
    /* 비율에 맞춰서 이미지 확대 단점:화면을 줄이면 이미지가 잘림*/
    background-size: cover;
}

.container{
    width: 1280px;
    height: inherit;
    margin: 0 auto;  
    /* background-color: rgba(0,0,0,0.1);   */
   
}

.row{
    padding: 0 28px;
}

/* media */

/* pc 네비게이션 */
@media(min-width:960px){
    .header{}
    .header .logo{
        /* 쌤이 맞춰놓은 사이즈 */
        width: 184px;
        height: 95px;
        /* background-color: #ccc; */
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
    }
    .header .gnb{
        float: right;
    }

    .header .gnb > ul{}
    .header .gnb > ul > li{
        width: 136px;
        padding: 35px 0;
        float: left;
        /* 가상요소 기준점 */
        position: relative;
    }
    /* li 가상요소 */
    .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.3s;
    }
    .header .gnb > ul > li:hover::after{
        /* 마우스 오버 시 파란 줄 나오게하기 */
        transform: scaleX(100%);
    }
    .header .gnb > ul > li > a{
        display: block;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
    .header .gnb > ul > li > .submenu{
        position: absolute;
        left: 0;
        top: 95px;
        /* background-color: #ccc; */
        width: 100%;
        z-index: 10;
        display: none;
    }
    .header .gnb > ul > li > .submenu > li{}
    .header .gnb > ul > li > .submenu > li > a{
        display: block;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        padding: 20px 0;
    }

    #gnbBg{
        width: 100%;
        height: 192px;
        background-color: #f5f5f5;
        position: absolute;
        left: 0;
        top: 95px;
        z-index: 9;
        display: none;
    }

}

@media(max-width:1300px){
    .container{width: 100%;}
}
@media(max-width:1024px){}

/* 모바일 네비게이션 */
@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{
        /* container에 기준점 미리 잡아놓음 */
        position: absolute;
        left: -300px;
        width: 250px;
        height: calc(100vh - 95px);
        background-color: #fff;
        transition: 0.5s;
    }
    .header .gnb.open{
        left: 0;
    }
    .header > .gnb > ul{
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
    }
    .header > .gnb > ul > li{
        width: 100%;
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
    }
    .header > .gnb > ul > li > a{
        display: block;
        font-size: 16px;
        font-weight: bold;
        padding: 15px 30px;
    }
    .header > .gnb > ul > li > .submenu{
        display: none;
        height: auto;
    }
    .header > .gnb > ul > li > .submenu > li{
        border-top: 1px solid #dbdbdb;
        
    }
    .header > .gnb > ul > li > .submenu > li > a{
        display: block;
        font-size: 14px;
        padding: 10px 60px;
    }
    #barMenu{
        width: 40px;
        height: 25px;
        /* background-color: #ccc; */
        /* container에 이미 realative 기준점 있음*/
        position: absolute;
        top: 30px;
        left: 20px;
        cursor: pointer;
    }
    #barMenu .bar{
        width: 40px;
        height: 4px;
        background-color: #1d1d1f;
        /* bar::before, after 기준점 */
        position: relative;
    }
    #barMenu .bar::before, #barMenu .bar::after{
        content: "";
        position: absolute;
        width: 40px;
        height: 4px;
        background-color: #1d1d1f;
        left: 0;
        top: 10px;
    }
    #barMenu .bar::after{
        top: 20px;
    }
}

 

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

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

비주얼 스튜디오 코드 58_햄버거 메뉴 복습  (0) 2023.07.03
비주얼 스튜디오 코드 57 _ parallax 05  (0) 2023.06.30
비주얼 스튜디오 코드 55_ parallax04  (0) 2023.06.29
[JAVASCRIPT]5.클래스 제어하기  (0) 2023.06.29
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자  (0) 2023.06.29

관련글

티스토리툴바