내 반응 네비게이션 바가 작은 화면에 링크를 표시하지 않습니다.

Question

나는 지금까지 내 코드로 jsfiddle을 제공했습니다. 현재 문제는 메뉴 아이콘 (화면이 작아지면 표시됨)을 누르면 아무 일도 발생하지 않는다는 것입니다. 내가 좋아하는 클릭에 슬라이드 요소의 목록을 싶습니다 그래서이 웹 사이트 @

`HTML :

  <a href="#" class="header_icon" id="header_icon"></a> 
      <a href="Index.html" class="header_logo" style="height: 0px"> 
       <img src="images/brandlogoNAV.png" height="57.7px" width="190px"> 
      </a> 

       <nav class="menu" id="mymenu"> 
        <li><a class="active" href="Index.html">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 
        <li><a href="#">OUR APPROACH</a></li> 
        <li><a href="#">CONTACT</a></li> 
        <li><a href="javascript:void(0);" style="font-size:10px;" class="icon" onclick="myFunction()">&#9776;</a></li> 
       </nav> 

     </header> 

CSS :

다음

https://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/가 JsFiddle 내 링크입니다

.header { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 58px; 
    background-color: #272727; 
} 


.menu { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #272727; 
    font-family: Century Gothic, sans-serif; 
    font-size: 11px; 
    float: left; 
    display: inline-block; 
} 


.menu li { 
    float: left; 
    border-right: 1px solid black; 
    display: inline; 
} 


.menu a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 22px 50px; 
    text-decoration: none; 
    border: 1px; 
    float: left; 
} 

.menu a:hover:not(.active) { 
    background-color: #111; 
} 

.menu a.active { 
    background-color: #52BA56; 
} 

.header_logo { 
    float: right; 
} 

.menu .icon { 
    display: none; 
} 

.icon { 
    background-color: #272727; 
} 


@media screen and (max-width: 850px) { 
    .menu li:not(:last-child) { 
     display: none; 
    } 

    .menu a.icon { 
     float: left; 
     display: block; 
    } 
} 

@media screen and (max-width: 850x) { 
    .menu.responsive {position: relative;} 
    .menu.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .menu.responsive li { 
    float: none; 
    display: block; 
    text-align: left; 
    } 

} 

jQuery

function myFunction() { 
    var x = document.getElementById("mymenu"); 
    if (x.className === "menu") { 
     x.className += " responsive"; 
    } else { 
     x.className = "menu"; 
    } 
} 

`https://jsfiddle.net/timothykeyseraude/wx7te9Lq/4/

6,는

팀에게, 모든

Answer 1

먼저 감사 : 당신은 <a href="javascript(void)"> 제거해야한다. 일반적으로 말하면, href가없는 클릭 가능한 요소가 필요할 때 button을 사용할 수있는 완벽한 기회입니다. :) 접근성이 더 좋고 쓸모없는 href 속성을 설정할 필요가 없습니다.

이제 문제에 대해 두 번째 미디어 쿼리에 오타가 있습니다.

@media screen and (max-width: 850x)` //(missing the p of "px"). 

당신은 여기에 버튼 대신 빈 링크로 동작하는 예제를 찾을 수 있습니다 https://jsfiddle.net/pLx0jLws/