ハンバーガーメニューが常に表示されている
HTMLに
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Home</title>
</head>
<body>
<div id="page-container">
<nav class="menu">
<header>
<h1>WEB SITE</h1>
</header>
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<ul class="sidebar-ul" id="menu">
<li>
<a class="home" href="home.html">Home</a>
</li>
<li>
<a class="profile" href="profile.html">Profile</a>
</li>
</ul>
</div>
<ul id="social">
<li>
<a class="contact" href="">
<i class="icon_head" aria-hidden="true"></i>Email</a>
</li>
<li>
<a class="contact" href="">
<i class="icon_head" aria-hidden="true"></i>Facebook</a>
</li>
</ul>
</nav>
<main>
<div id="carousel-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="test1.jpg" alt="Arch">
<p>WELCOME</p>
</div>
<div class="item contain">
<img class="img-responsive" src="test2.jpg" alt="Nature">
<p>MY SITE</p>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
と書いて、CSSに
@media all and (max-width: 1500px) {
body,
html {
margin: 0;
height: 100%;
}
#page-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: "NAV MAIN";
height: 100%;
}
nav {
grid-area: NAV;
background-color: black;
height: 100%;
float: left;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}
.nav-unshown {
display:none;
}
main {
grid-area: MAIN;
}
header {
grid-area: HEADER;
}
header h1 {
color: white;
text-align: center;
font-size: 30px;
}
#menu {
grid-area: MENU;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0px;
}
#menu>li {
margin: 10px 10px;
padding: 2px 0px;
}
#menu>li:hover>a {
color: white;
text-decoration: none;
}
#social {
grid-area: SOCIAL;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0px;
}
#social>li {
margin: 10px 10px;
padding: 2px 0px;
}
#copy-right {
grid-area: COPYRIGHT;
color: white;
text-align: center;
}
#carousel-container {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
.icon_head {
padding-right: 10px;
}
.carousel {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-inner>.item {
height: 100%;
}
.carousel-inner>.item>img {
height: 100%;
}
.item {
position:relative;
}
.item p{
position: absolute;
color: white;
font-weight: bold;
font-size: 3em;
top: 20%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
}
@media all and (min-width: 500px) {
#page-container {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "NAV MAIN";
height: 100%;
}
nav {
grid-area: NAV;
background-color: white;
height: 100%;
float: left;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #fff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}
と書きました。このHTMLにアクセスした時、ハンバーガーメニューが常に表示されています。
ハンバーガーメニューは500px以下の時に表示したいのですが。
500px以下の時のHTMLの構成は
のようにして、それ以上の時の構成は、
のような配置にしたいです。CSSに
.nav-unshown {
display:none;
}
のように書けば、ハンバーガーメニューは表示されないと思っていましたが、それは間違いでした。しかし、どのように修正すればいいのでしょうか？どのように書き直せば意図したアウトプットになりますか？
ハンバーガーメニュー作成で参考にしたサイトは、https://saruwakakun.com/html-css/reference/nav-drawer のサイトです。