Question

希望我能在这里找到帮助。我试图让这个导航栏响应。我开始使用w3schools tut，但是我丢失了我的css文件的概述，并且无法找到问题，为什么这不起作用。谢谢你的帮助！

实时页面： www.air-transfer.at

CodePen： 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;
  }

}

Answer 1

你有几个问题。首先，您在媒体查询中使用了类选择器.icon，但未应用于您的锚点（元素）以下内容将解决它：

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

另外在你的JS中"menu li"是标签选择器，没有菜单标签。你想要一个类选择器".menu li"，并且getElementById不适用于＆＃34; css选择器＆＃34;你想要querySelectorAll见下文：

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 = "";
      }      
    }
}

响应式导航无法正常工作，丢失了我的CSS概述

1 个答案: