2017-12-26 8 views
0

희망을 찾을 수 있습니다. 이 네비게이션 바를 반응 적으로 만들려고 노력 중입니다. 나는 그것을 위해 w3schools 혀를 가지고 시작했지만, 나는 내 CSS 파일의 개요를 잃어 버렸고 이것이 작동하지 않는 이유를 찾지 못한다. 모든 도움에 감사드립니다!반응 형 네비게이션이 작동하지 않거나, CSS 개요가 손실 됨

라이브 페이지 :

CodePen

www.air-transfer.at : https://codepen.io/gosagir/pen/vpgJrW

HTML 코드 :

<!DOCTYPE html> 
<html lang="de-AT"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="title" content="&#9654; Umzug nach Berlin | Ihr Umzugsprofi | Europaweite Umzüge -50%" /> 
    <meta name="description" content="Ihr verlässlicher Partner rund um Ihren Umzug nach Berlin. Mit Erfahrung aus über 15.000 Umzügen in ganz Europa. Jetzt unverbindlich anfragen. ✓ EU-Umzug -50%"> 
    <meta name="robots" content="index, follow" /> 
    <meta name="keywords" content="umzug nach berlin, umzug berlin, umzug, berlin, umzugsfirma, übersiedlung" /> 
    <title>Umzug nach Berlin - umzugdirekt.at</title> 
<link href="css/styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<!-- start header --> 
<header> 
    <!-- start navigation --> 
    <nav class="navbar"> 
     <div class="nav-elements"> 
      <div class="umzugdirekt_logo_nav"> 
      <a href="http://www.air-transfer.at/"> 
       <img src="img/umzugdirekt_logo.svg" alt="umzugdirekt_logo" class="umzugdirekt_logo_link" /> 
      </a> 
      </div> 
      <div class="menu" id="mymenu"> 
      <ul class="menu-ul" id="mymenu-ul"> 
       <li><a href="http://www.air-transfer.at/">Home</a></li> 
       <li class="dropdown"> 
        <a href="javascript:void(0)" class="dropbtn">Leistungen =</a> 
       <div class="dropdown-li"> 
        <a href="http://www.air-transfer.at/Privatumzug/">Privatumzug</a> 
        <a href="http://www.air-transfer.at/Firmenumzug">Firmenumzug</a> 
        <a href="http://www.air-transfer.at/Auslandsumzug">Auslandsumzug</a> 
        <a href="http://www.air-transfer.at/Entruempelung">Entrümpelung</a> 
        <a href="http://www.air-transfer.at/Raeumung">Räumung</a> 
        <a href="http://www.air-transfer.at/Transport">Transport</a> 
        <a href="http://www.air-transfer.at/Einlagerung">Einlagerung</a> 
       </div> 
       </li> 
       <li><a href="http://www.air-transfer.at/Preise">Preise</a></li> 
       <li><a href="http://www.air-transfer.at/Kontakt">Kontakt</a></li> 
       <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">\</a></li> 
      </ul> 


     </div> 
     </div> 
     </nav> 
     <script> 
function myFunction() { 
    var x = document.getElementById("menu li"); 
    if (x.className === "menu li") { 
     x.className += " responsive"; 
    } else { 
     x.className = "menu li"; 
    } 
} 
</script> 
     <!-- end navigation --> 
</header> 
<!-- end header --> 
<!-- start section 1 --> 
</body> 
</html> 

CSS 코드 : /*

Table of contents 

    01. Font & Typographic 
    02. Navbar 
    03. 

*/ 


/* =================================== 
    01. Font & Typographic 
====================================== */ 

/* Font */ 
@font-face { font-family: 'titillium'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'), 
      url('../fonts/TitilliumWeb-Regular.woff') format('woff'), 
      url('../fonts/TitilliumWeb-Regular.ttf') format('ttf'), 
      url("../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"), 
      url('../fonts/TitilliumWeb-Regular.eot') format('eot'); 
} 

@font-face { 
    font-family: 'titillium'; 
    font-style: bold; 
    font-weight: 700; 
    src: url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'), 
      url('../fonts/TitilliumWeb-Bold.woff') format('woff'), 
      url('../fonts/TitilliumWeb-Bold.ttf') format('ttf'), 
      url("../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"), 
      url('../fonts/TitilliumWeb-Bold.eot') format('eot'); 
} 

html { 
    font-family: 'titillium', sans-serif; 
    font-smoothing: antialiased; 
    -moz-font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-tap-highlight-color: transparent; 
} 

/* heading */ 
h1, h2, h3 {margin:0 0 25px; padding:0; letter-spacing: 0; font-weight: 700;} 
h1 {font-size:70px; line-height: 70px;} 
h2 {font-size:55px; line-height:60px} 
h3 {font-size:48px; line-height:54px} 


/* =================================== 
    02. Navbar 
====================================== */ 

/* Navbar */ 

body {margin:0;} 

.navbar { 
    box-sizing: border-box; 
    background-color: #FFFFFF; 
    position: fixed; 
    top: 0; 
    padding: 0 30px; 
    width: 100%; 
    height: 80px; 
    box-shadow: rgba(0,0,0,.12) 0 1px 3px; 
} 

.nav-elements { 
    box-sizing: border-box; 
    background-color: #FFFFFF; 
    height: 80px; 
    overflow: hidden; 
    max-width: 1400px; 
    margin: 0 auto; 
} 

.umzugdirekt_logo_nav { 
    display: block; 
    float: left; 
} 


.umzugdirekt_logo_nav img { 
    display: block; 
    height: 40px; 
    width: 240.984px; 
    padding: 20px; 

    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;  
} 

.menu { 
    float: right; 
} 

.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    font-size: 19px; 


} 

.menu li { 
    float: left; 
} 

.menu li a { 
    display: block; 
    padding: 25.5px 20px; 
    text-decoration: none; 

} 

a:link { 
    color: #132539; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
} 

a:visited { 
    color: #132539; 
} 

a:hover { 
    color: #05aee9; 
} 

.active { 
    color: #05aee9; 
} 

.dropdown-li { 
    display: block; 
    margin: 0 0 0 22px; 
    position: absolute; 
    background-color: #FFFFFF; 
    min-width: 210px; 
    line-height: 0px; 
    box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.06); 
    border-top: 3px solid #05aee9; 
    visibility:hidden; 
    opacity:0; 
    transition:visibility 0s linear 0.2s,opacity 0.2s linear; 
} 

.dropdown-li a { 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    border-bottom: 1px solid #dcdadb; 
} 

.dropdown-li a:last-child { border-bottom: none; } 

.dropdown-li a:hover { 
    background-color: #f6f6f6; 
    color: #132539; 
} 

.dropdown:hover .dropdown-li { 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
} 

.menu .icon { 
    display: none; 
} 

@media screen and (max-width: 1000px) { 
    .menu li a:not(:first-child) {display: none;} 
    .menu li a.icon { 
    float: right; 
    display: block; 
    } 
} 

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

} 
+0

미디어 쿼리가, 그것을 해결을 살펴의 열쇠 //www.w3schools을 .com/cssref/css3_pr_mediaquery.asp – danielarend

+0

선택기에 문제가 있습니다. 그런데 왜 HTML 대신 JS에 클래스를 추가하는지 알 수 없습니다. –

답변

0

너는 cou를 가지고있다. 많은 문제들. 먼저, 앵커의 (a 요소)에 적용되지 않는 미디어 쿼리의 클래스 선택, .icon을 사용하고있는 다음과 같은 뭔가를 해결합니다 : 당신의 JS "menu li"에서 또한

<li><a class="icon" href="http://www.air-transfer.at/">Home</a></li> 

을 태그 선택기이며 메뉴 태그가 없습니다. 당신은 클래스 선택 ".menu li"을 원하고,에서 getElementById는 아래를 참조 querySelectorAll 원하는 "CSS 선택기"작동하지 않습니다 : HTTPS :

window.onload = myFunction 

function myFunction() { 
    var x = document.querySelectorAll(".menu li"); 
    for(var i=0; i< x.length; i++) { 
     if (x[i].className === "") { 
      x[i].className += " responsive"; 
     } else { 
      x[i].className = ""; 
     }  
    } 
}