我正在为朋友创建一个网站。
不幸的是，我对响应式开发以及CSS还是陌生的。
我试图在我的网格站点上实现W3Schools.com上的代码（这对我来说也是新的东西），但是没有成功。
这是W3Schools.com的链接：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
我想在当前菜单页面旁边的中央有一个图标。
这是我的代码：
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "header") {
x.className += " responsive";
} else {
x.className = "header";
}
}body {
background-color: #FFF;
display: flex;
justify-content: center;
font-family: "Times New Roman", Times, serif;
margin: 0;
}
/*grid and rows adjustments*/
.container {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 2.5fr 2fr 2fr;
grid-template-rows: 80px 0.5fr 1fr 20px;
grid-gap: 0px;
grid-template-areas:
}
.header {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
.sidebar {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
.content-1 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
.content-2 {
grid-row: 3 / 4;
grid-column: 2 / span 2;
}
/*.content-3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}*/
.footer {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
.header ul li {
list-style-type: none;
float: left;
height: 100%;
}
.header ul li a {
color: #000;
padding: 30px 25px;
text-decoration: none;
display: block;
}
.header ul li a.active {
background-color: #C1CFD0;
color: white;
}
.header ul li a:hover:not(.active) {
background-color: #555;
color: white;
}
.header .icon {
display: none;
}
/* OTHER STYLES */
.item {
background-color: #C1CFD0;
background-image: linear-gradient(130deg, #C1CFD0 0%, #C1CFD0 85%, #C1CFD0 100%);
/*box-shadow: 0 10px 20px;*/
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
.header {
background-color: #909fa0;
background: linear-gradient(to left, #C1CFD0;
, #909fa0);
box-shadow: 5px 10px 20px;
}
.sidebar {
background-color: #909fa0;
}
.sidebar img {
height: 100%;
max-width: 100%;
background-size: cover;
}
.content-1,
.content-2,
.content-3 {
background-image: linear-gradient(to left, #9FC4D2, #E4E3DE);
}
.footer {
background-color: #2c3e50;
}
.content-1 {
display: inline;
text-align: center;
}
.content-1 h1 {
animation-name: h1animation;
animation-duration: 2s;
}
.content-1 h2 {
font-size: 2em;
animation-name: h1animation;
animation-duration: 3s;
}
.content-2>p {
font-size: 1em;
font-weight: bold;
text-align: center;
animation-name: h1animation;
animation-duration: 5s;
}
/* Standard syntax */
@keyframes h1animation {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*responsive version of the site*/
@media only screen and (max-width: 1200px) {
.sidebar {
background-image: url("../img/contact1a.jpg");
background-repeat: no-repeat;
background-size: cover;
min-width: 100%;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
.container {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: 80px 0.5fr 1fr 20px;
grid-gap: 0px;
}
.content-1 {
background-image: url("../img/violinead.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.header .icon {
display: block;
float: right;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script src="scripts/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="item header" id="myTopnav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</ul>
</div>
<div class="item sidebar">
<img src="img/contact1.jpg" alt="contact1">
</div>
<div class="item content-1">
<h1><br><br><br>André Rothweiler</h1>
<h2>Web-designer</h2>
</div>
<div class="item content-2">
<p>I’m an enthusiastic web-developer currently working as a freelancer in Zurich, Switzerland. I love to learn new things and create them! Just take a look on this side, to find out more about me! </p>
</div>
<!-- <div class="item content-3">Content-3</div> -->
<div class="item footer">footer</div>
</div>
</body>
</html>我希望你能帮帮我！
友好的问候。
最佳答案
单击该图标时，有关W3C的教程将添加和删除“响应”类。该类没有任何CSS，因此不会产生任何效果。