css 햄버거 메뉴가 페이지에 맞지 않습니다.

모바일 용 CSS 메뉴를 개발하려고합니다. 나는 열 때 모든 페이지를 포함하는 메뉴를 원한다. 필요한 경우 내부에 스크롤 막대도있을 수 있습니다. 내 모델은 cnn.com 햄버거 메뉴와 같습니다. css 햄버거 메뉴가 페이지에 맞지 않습니다.

나는

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" type="text/css" href="mystyle.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    </head> 
     <body> 
      <header class="header"> 
       <nav> 
        <input class="menu-btn" type="checkbox" id="menu-btn"> 
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
        <ul class="menu"> 
         <li><a href="#">Company</a></li> 
         <li><a class="open-submenu" href="#">Services +</a>   
          <ul class="submenu"> 
           <li><a href="#">Serv1</a></li> 
           <li><a href="#">Serv2</a></li> 
           <li><a href="#">Serv3</a></li> 
          </ul> 
         </li> 
         <li><a href="#">About</a></li> 
         <li><a class="open-submenu" href="#">Contacts +</a> 
          <ul class="submenu"> 
           <li><a href="#">Cont1</a></li> 
           <li><a href="#">Cont2</a></li> 
          </ul> 
         </li> 
        </ul> 
       </nav> 
      </header> 

    <script type="text/javascript"> 
      $(document).ready(function() {     

      $('.open-submenu').click(function(e){     
       var childMenu = e.target.parentNode.children[1]; 
       var nodes = e.target.parentNode.parentNode.childNodes; 

       if($(childMenu).hasClass('visible')){ 
        $(childMenu).removeClass('visible'); 
       } else { 
        $(childMenu).addClass('visible'); 
       } 
      }); 

     }); 
    </script> 

        <main> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p> 
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p> 
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p> 
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p> 
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p> 
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p> 
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p> 


</main> 

</body> 
</html>

mystyle.css입니다 .... 어떤 결과가, 내가 코드를 변경할 수있는 올바른 방법이라고 생각하지 않는 경우에도 header{position: fixed}로 변경하고 .menu-btn:checked ~ .menu 높이를 변경할 수 있지만하려고 :

.header { 
    background-color: #333; 
    position: absolute; 
    width: 100%; 
} 

.header ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow: hidden; 
    background-color: #333; 
} 

.header li a { 
    display: block; 
    padding: 20px 20px; 
    color: white; 
} 

.menu { 
    clear: both; 
    max-height: 0; 
} 

/* Next we need to style the menu icon for the dropdown. */ 

.menu-icon { 
    cursor: pointer; 
    display: inline-block; 
    float: right; 
    padding: 28px 20px; 
    position: relative; 
    user-select: none; 
} 

/* The graphics of the menu button */ 

.navicon { 
    background: #fff; 
    display: block; 
    position: relative; 
    width: 18px; 
    height: 2px; 
} 


/* Now we can add the icon when the checkbox is clicked */ 


.menu-btn { 
    display: none; 
} 

.menu-btn:checked ~ .menu { 
    max-height: 100%; 
} 


/* submenu */ 

.submenu{ 
display: none; 
} 

.visible { 
display: block; 
}

출처

2016-10-11 AleRef

정확히 달성해야하는 것은 무엇입니까? 전체 화면 메뉴? 아니면 그냥 뒤에 링크를 해제? – Varin

맞아, 전체 화면 메뉴. 게시물을 수정했습니다 – AleRef

방금 답변을 올렸습니다. 이게 니가 찾고 있던거야? – Varin

.을 .header ul에 추가하십시오. 여기 jsfiddle :

https://jsfiddle.net/r7yeeyeL/

.header ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow: hidden; 
    background-color: #333; 
    height: 100vh; 
}

편집 :

또는, (어쩌면 더 나은), JQuery와 솔루션 :

https://jsfiddle.net/r7yeeyeL/1/

CSS

html { 
    max-height: 100%; 
    height:100%; 
} 
body { 
    height: 100%; 
} 

.blabla { 
    height:100%; 
    max-height:100%; 
}

JQuery

$(".menu-btn").click(function(){ 

    if(!$(".header").hasClass("blabla")) 
    { 
     $(".header").addClass("blabla"); 
    } else { 
    $(".header").removeClass("blabla"); 
    } 
});

출처

2016-10-11 17:52:22 Varin

는 실제로 작동하지 않는 것 같습니다. – AleRef

전체 페이지에 걸쳐 표시되지 않습니까? 나에게 스크린 샷을 보여줘. – Varin

브라우저가 최대 크기 일 때만 작동합니다 ... 창을 축소하면 여전히 모든 페이지를 커버하지 못합니다 .. – AleRef

css 햄버거 메뉴가 페이지에 맞지 않습니다.

답변

관련 문제