자바 스크립트에서 아이콘을 여는 방법

Question

웹 사이트를 만들고 헤더의 탐색 모음에 왼쪽에 로고가 있고 오른쪽에 다른 페이지로 연결되는 링크가 있으며 브라우저의 크기를 줄이면 600px 이상이면 모든 링크가 아이콘으로 표시되지만 로고는 그대로 유지됩니다.

아이콘을 클릭하면 링크의 서식과 아이콘이 기본 설정으로 변경되고 링크가 서로 아래에 표시되도록 like this (예 : www.W3Schools.com에서 가져옴).

누군가이 오류로 나를 도울 수 있기를 바랍니다.

감사합니다.

<div class="slideshow_nav"> 
      <div class="navbar-wlogo"> 
      <img src="/Users/yanikwick/Documents/canvas_website/logo.png" alt="logo" class="logo "width = "175px"> 
      <nav class="topnav" id="myTopnav"> 
       <a href="/html/contact">CONTACT</a> 
       <a href="/html/about">ABOUT</a> 
       <a href="/html/portfolio">PORTFOLIO</a> 
       <a href="/html/">HOME</a> 
       <a href="javascript:void(0);" style="font-size:30px;" class="icon" onclick="myFunction()">&#9776;</a> 
      </nav> 
      </div> 

내비게이션 막대의 html입니다.

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

이것은 자바 스크립트입니다.

header .logo{ 


float: left; 
    margin: 0px; 
    padding: 10px 10px 5px 10px; 
} 

header .topnav{ 
    overflow: hidden; 
    margin-right: 20px; 
} 

header .topnav a{ 
    float: right; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px; 
} 

.topnav .icon { 
    display: none; 
} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

@media screen and (max-width: 600px){ 
    .topnav a:not(:last-child) {display: none;} 
    .topnav a.icon { 
    display: inline-block; 
     float: right; 
    } 

@media screen and (max-width: 600px) { 
    .topnav .responsive { 
    position: relative; 
    } 
    .topnav .responsive .icon { 
    float: right; 
    } 
    .topnav .responsive a{ 
    float: none; 
    display: block; 
    text-align: left; 
    } 
} 

이 나를 도와 주면 내가 감사하겠습니다

CSS는. 고맙습니다.

Answer 1

문제는 ... .topnav는 반응 적용됩니다 경우 링크의 가시성을 설정하지 않는 것이,

그래서 같은 : 내부

.topnav.responsive a { 
    display:block; 
} 

:

@media screen and (max-width: 600px){ 
... 
} 

여기 작업중인 jsbin;) http://jsbin.com/vupizuyeji/edit?html,css,js,output

Chee rio :)