1
Webデザインにはかなり新しいので、コーディングに関する知識が不足していることをお詫び申し上げます。私は数日間のソリューションを探し、さまざまな方法を試して、助けが必要であることに気付きました。<！DOCTYPE HTML>ハンバーガーnav barが機能しないようにします。
基本的に私のコードは、ブラウザが縮小されたときにハンバーガーアイコンを示すようにプログラムされていますが、これは完全にうまく動作します。私が問題を抱えているのは、ハンバーガーのアイコンをクリックすると、ドロップダウンメニューが表示されないということです。
私は最初に行を追加していなかったが、私のサイトは本当に遅く、遅かった。行を追加した後、私のjavascriptはまったく動作せず、私は失われてしまいます。ここで
は、HTML、CSSやJSのために私のコードです：
$('.hamburger').on('click', function() {
if ($('.menu').hasClass('open')) {
$('.menu').removeClass('open');
} else {
$('.menu').addClass('open');
}
});@media only screen and (max-width: 768px) {
.hamburger {
cursor: pointer;
padding: 30px;
display: block;
}
.line {
border-bottom: 5px solid #fff;
width: 35px;
margin: auto;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
/* Our styles here */
#nav li {
width: 100%;
border-bottom: 1px solid white;
text-align: center;
border-top: 1px solid white;
border-bottom: none;
background: rgba(204, 204, 204, 1);
}
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s;
margin: 0;
padding: 0;
margin-top:-14;
}
.open {
height: 255;
}<!DOCTYPE HTML>
<body>
<div id="nav">
<div href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="clearfix menu">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>私はより多くの情報を提供する必要がある場合は、MSGしてください!!
コードが少ないので、質問に入れてみてはいかがですか、誰にも役立たない外部リンクではない –