个人中心
gpt4 book ai didi

html - 响应式导航不工作，丢失了我的 CSS 概览

转载 作者：行者123 更新时间：2023-11-28 02:25:19 27 4
gpt4 key购买 nike

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

实时页面: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;
  }

}

最佳答案

你有几个问题。首先，您在未应用于 anchor (a 元素)的媒体查询中使用类选择器 .icon 像下面这样的东西会修复它:

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

此外，在您的 JS "menu li" 中是一个标签选择器，并且没有菜单标签。您需要一个类选择器 ".menu li" ，而 getElementById 将无法与您想要的“css 选择器”一起使用 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 = "";
      }      
    }
}

关于html - 响应式导航不工作，丢失了我的 CSS 概览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47983060/

27 4 0
文章推荐： jquery 滚动条 |样式标签与样式属性
文章推荐： c++ - MFC 应用程序热键和加速器哪个更好？
文章推荐： c++ - 什么时候使用指针成员变量？
文章推荐： css - ul .active 元素上的全宽白色背景颜色不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com