Jeg har lavet denne css grid layout, men når den er i mobil size kan den godt vise nav menuen, når man clicker på open nav og når man så tager en stor skærm så er nav der også. Men hvis man lukker nav menuen i mobil size, så kan den ikke vise nav i stor skærm. Det er fra Web Designer tutorials
Hvad er der gal?
http://www.danskspeedway.dk/cssgrid/
Html code
Kode: Vælg alt
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid Tutorial</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="grid">
<header>
Header
<button id="nav-open">Open Nav</button>
</header>
<nav id="nav">
<ul>
<li>Nav</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>5
<button id="nav-close">Close Nav</button>
</nav>
<section id="hero">Hero</section>
<main>Main</main>
<article>Article</article>
<section id="sign-up">Sign Up</section>
<section id="gallery">
<!-- Gallery -->
<img src="http://via.placeholder.com/400x300">
<img src="http://via.placeholder.com/400x300">
<img src="http://via.placeholder.com/400x300">
<img src="http://via.placeholder.com/400x300">
</section>
<footer>Footer</footer>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Kode: Vælg alt
/* Optional general styles */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial';
}
/* all immediate descendants of grid */
#grid > * {
padding: 30px;
border: 1px solid black;
background: #fff;
text-align: center;
}
#hero {
padding: 80px 30px;
}
/* General */
#nav-open,
#nav-close {
padding: 10px;
background: #eee;
margin-top: 10px;
}
#gallery {
text-align: center;
}
#gallery img {
padding: 16px;
max-width: 100%;
}
/* Mobile */
@media (max-width: 720px) {
#nav {
display: none;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 50%;
}
}
@media (min-width: 721px) {
#nav-open,
#nav-close {
display: none;
}
}
/* Fallback */
#grid {
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 721px) {
article,
#sign-up,
#gallery img {
float: left;
width: 50%;
}
#gallery,
footer {
float: left;
width: 100%;
}
}
@supports (display: grid) {
/* Override Fallback */
article,
#sign-up,
#gallery,
#gallery img,
footer {
float: none;
width: 100%;
}
/* Define Grid Areas */
header {
grid-area: header;
}
nav {
grid-area: nav;
}
#hero {
grid-area: hero;
}
main {
grid-area: main;
}
#gallery {
grid-area: gallery;
}
article {
grid-area: article;
}
#sign-up {
grid-area: sign-up;
}
footer {
grid-area: footer;
}
/* Define Grid */
@media (min-width: 721px) {
#grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
}
/* Define item position on tablet */
@media (min-width: 721px) and (max-width: 1000px) {
#grid {
grid-template-areas: "header header header header"
"nav nav nav nav"
"hero hero hero hero"
"main main main main"
"gallery gallery gallery gallery"
"article article sign-up sign-up"
"footer footer footer footer";
}
}
/* Define item position on desktop */
@media (min-width: 1001px) {
#grid {
grid-template-areas: "header header nav nav"
"hero hero hero hero"
"sign-up main main article"
"gallery gallery gallery gallery"
"footer footer footer footer";
}
}
/* Nested gallery grid */
@media (min-width: 721px) {
#gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1001px) {
#gallery {
grid-template-columns: repeat(4, 1fr);
}
}
}
Kode: Vælg alt
var nav = document.getElementById('nav');
document.getElementById('nav-open').addEventListener('click', function() {
nav.style.display = 'block';
});
document.getElementById('nav-close').addEventListener('click', function() {
nav.style.display = 'none';
});