ハンバーガーメニューの不具合について

Question

ハンバーガーメニューの不具合について、どなたかご教授お願いいたします。

700px以下から、ハンバーガーメニューを表示させたいのですが、
700px以上の画面表示にすると、ハンバーガー内のリスト(g-nav)が表示されてしまいます。
700px以上の画面表示で、リストが表示が出ないようにするには、どのようにしたら直したら良いでしょうか？

以下、該当部分のコードを載せさせていただきます。

/html/
<div class="openbtn"><span></span><span></span><span></span></div>
<nav id="g-nav">
<ul>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいいい</a></li>
<li><a href="#">うううう</a></li>
<li><a href="#">ええええ</a></li>
</ul>
</nav>

/css/
@media (max-width:700px){
.openbtn{
background:#000;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 5px;
display: block;
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}

.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 12px;
height: 2px;
border-radius: 5px;
background: #fff;
width: 45%;
}

.openbtn span:nth-of-type(1) {
top:13px;
}

.openbtn span:nth-of-type(2) {
top:19px;
}

.openbtn span:nth-of-type(3) {
top:25px;
}

.openbtn span:nth-of-type(3)::after {
content:"Menu";
position: absolute;
top:5px;
left:-4px;
color: #fff;
font-size: 0.6rem;
text-transform: uppercase;
}

.openbtn.active span:nth-of-type(1) {
top: 14px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
top: 26px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
content:"Close";
transform: translateY(0) rotate(-45deg);
top:5px;
left:4px;
}

#g-nav{
position:fixed;
z-index: 999;
top:0;
right: -120%;
width:100%;
height: 100vh;
background:#fbfb7c;
transition: all 0.6s;
}

#g-nav.panelactive{
right: 0;
}

#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav ul {
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

#g-nav li{
list-style: none;
text-align: center;
}

#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

}

/js/
$(".openbtn").click(function () {
$(this).toggleClass('active');
$("#g-nav").toggleClass('panelactive');
});

$("#g-nav a").click(function () {
$(".openbtn").removeClass('active');
$("#g-nav").removeClass('panelactive');
});

Answer 1

cssに下記を追加して701px以上では非表示にしてはどうでしょう。

@media (min-width:701px){
	#g-nav{
		display: none;
	}
}

また、コードが正しく表示されていないので、投稿にコードを乗せるときは<code>機能を使用した方が良いでしょう。

Comments

[退会済みユーザー]

ありがとうございます！
うまくできました！
次回から<code>機能を使用したいと思います。