프론트 반응형웹디자인을 만드는데 navbar_toggleBtn 클래스를 가진 요소를 클릭하는기능 안됩니다.

Question

사이트를 만들어보려는데 우아한 형제들 사이트처럼 마우스를 올리면 header 안에 있는 nav요소들 ul과 li가 나타나게 하고 싶고 화면크기가 작을떄는 토글버튼만 나타나서 그걸 누르면 메뉴들이 나타나게 만들어 보는 중인데요 자바스크립트를 이렇게 만드니까 비슷하게 만들어지는데 media screen and (max-width: 768px)이하시 토글버튼이 생성은 되는데 누르면 navbar_menu들이 안보입니다.. 개발자도구를 보면 공간이 존재는하는데 이유가 뭘지 알수 있을까요? const toggleBtn &#61; document.querySelector('.navbar_toggleBtn');const menu &#61; document.querySelector('.navbar_menu') toggleBtn.addEventListener('click',()&#61;>{ menu.classList.toggle('active');}); const header &#61; document.querySelector('header');const sidemenu &#61; document.querySelector('.navbar_menu');const sub &#61; document.querySelectorAll('.navbar_menu_side'); /nav에 마우스를 올리면 header 높이가 205 나가면 100/ sidemenu.addEventListener('mouseenter', function() { header.style.height&#61;'205px';}); sub.forEach(function(sub) {sub.addEventListener('mouseleave', function() { header.style.height&#61;'100px'; });});

뭘봐 · Answer

너무 길어서 파일을 올리고싶은데 어떻게 올리는지 모르겠네요 .... 봐주실수있으면 파일을 보내겠습니다.

뭘봐 · Answer

:root {    --color_title: #080808;    --color_title_rgb: 8,8,8;    --color_body: #101010;    --color_body_rgb: 16,16,16;    --color_caption1: #404040;    --color_caption1_rgb: 64,64,64;    --color_caption2: #606060;    --color_caption2_rgb: 96,96,96;    --color_search: #000;    --color_search_rgb: 0,0,0;    --color_border_out: #e3e5e8;    --color_border_out_rgb: 227,229,232;    --color_border_in: #ebebeb;    --color_border_in_rgb: 235,235,235;    --color_border_in_divider: #ebebeb;    --color_border_in_divider_rgb: 235,235,235;    --color_border_in_exception: #ebebeb;    --color_border_in_exception_rgb: 235,235,235;    --color_button_border: #dadcdf;    --color_button_border_rgb: 218,220,223;    --color_dot_divider: #d3d5d7;    --color_dot_divider_rgb: 211,213,215;    --color_block_bg: #fff;    --color_block_bg_rgb: 255,255,255;    --color_board_bg: #f4f6fa;    --color_board_bg_rgb: 244,246,250;    --color_option_bg: #f5f7f8;    --color_option_bg_rgb: 245,247,248;    --color_login_bg: #fafbfb;    --color_login_bg_rgb: 250,251,251;    --color_menu_widget_bg: #fff;    --color_menu_widget_bg_rgb: 255,255,255;    --color_setting_bg: #fff;    --color_setting_bg_rgb: 255,255,255;    --color_button1_bg: #fff;    --color_button1_bg_rgb: 255,255,255;    --color_button2_bg: #fff;    --color_button2_bg_rgb: 255,255,255;    --color_news: #3a67ea;    --color_news_rgb: 58,103,234;    --color_news_econ_stay: #909aab;    --color_news_econ_stay_rgb: 144,154,171;    --color_news_econ_down: #4f67d6;    --color_news_econ_down_rgb: 79,103,214;    --color_live_news_price: #f4361e;    --color_live_news_price_rgb: 244,54,30;    --color_enter: #e538e2;    --color_enter_rgb: 229,56,226;    --color_enter_bg: #f2f1fb;    --color_enter_bg_rgb: 242,241,251;    --color_sports: #1f65ef;    --color_sports_rgb: 31,101,239;    --color_sports_bg: #f4f7fe;    --color_sports_bg_rgb: 244,247,254;    --color_econ: #008f76;    --color_econ_rgb: 0,143,118;    --color_calendar: #eb5b5b;    --color_calendar_rgb: 235,91,91;    --color_dic: #031f5f;    --color_dic_rgb: 3,31,95;    }body{    margin: 0;    padding-top: 120px;   }a{    text-decoration: none;    color: black;   }header{    margin-top: 1px;    background-color: white;    height: 100px;    overflow: hidden;    transition: height 0.4s;    position: absolute;    left: 0;    right: 0;    top: 0;   }.navbar{    display: flex;    align-items: center;    background-color: aliceblue;    padding:  8px 12px;   }.navmenu a {    text-decoration: none;}.navbar_logo{    justify-content: space-between;    height: 240px;}.navbar_menu{    list-style: none;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    justify-content: center;    text-align: center;   }.navbar_menu li{       padding:  8px 12px;    margin: 20px;}.navbar_menu li:hover{    background-color: aquamarine;    border-radius: 4px;   }/*.navbar_menu_side{   }*/.navbar_menu_side ul{    list-style: none;    padding-left: 0px;   }.navbar_menu_side ul li {    font-size: 13px;    display: inline-block;    white-space: nowrap;  / 요소 너비를 넘어가는 경우 줄바꿈 방지 /    overflow: hidden;  / 요소 내용이 넘칠 경우 자르기 /    text-overflow: ellipsis;  / 요소 내용 일부분 생략 처리 /    padding:  8px 12px;    margin: 20px;    max-width: fit-content;  / 필요한 너비만큼만 사용 /}.navbar_toggleBtn{    position: absolute;    right: 32px;    font-size: 24px;    display: none;}@media screen and (max-width: 768px) {    .navbar{        flex-direction: column;        align-items: flex-start;        padding: 8px 24px;           }    .navbar_menu{        display: none;        flex-direction: column;        align-items: center;        width: 100%;        z-index: 1;           }    .navbar_menu li{        text-align: center;           }    .navbar_toggleBtn{        display: block;    }    .navbar_menu.active{        display: flex;           }   }.main {    background-color:beige;      }.footer {    color: #37373a;    letter-spacing: -.02em;    padding-top: 60px;    padding-bottom: 20px;    /*padding-left: 24px;    padding-right: 24px;*/    background-color: #f3f4f5;}.footer_inner {    display: flex;    flex-wrap: wrap;    justify-content: space-between;    align-items: center;   }.footer_nav{    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    -webkit-box-flex: 1;    -ms-flex: 1;    flex: 1;    justify-content: center;}.footer_nav ul{    color: #6c6d6f;    list-style: none;    font-size: 14px;    line-height: 1.7142857143;}.footer_address{    display: block;    margin-right: auto;    margin-block-start: 1em;    margin-block-end: 1em;    margin-inline-start: 0px;    margin-inline-end: 0px;}

뭘봐 · Answer

Bandidata

컨텐츠목록

doru · Answer

header overflow:hidden

프론트 반응형웹디자인을 만드는데 navbar_toggleBtn 클래스를 가진 요소를 클릭하는기능 안됩니다.

4개의 답변

기타 목록