だから私はウェブサイト、特にモバイル版に取り組んでいます。ユーザーが「ナビコン」をクリックすると下にスライドする「ドロップダウン」メニューを作成しました。また、ユーザーが「ナビコン」をクリックすると、ウェブサイトが実際の「ナビコン」画像までスクロールダウンし、モバイル ナビゲーションがよりスムーズかつ高速になります。メニューが上ではなく下にスライドするときにのみスクロール機能を機能させるだけでなく、方法を理解することもできません(どこにも答えを見つけることもできません)。しかし、メニュー項目をクリックするたびにメニュー項目を閉じることも必要です。何か助けはありますか?
これが私のコードです:
<-----------------------------HTML----------------------- -->
<div class="naviconbutton displaydesktop displaytablet" id="navbutton">
<img src="sitefiles/img/navicon-black.png" alt="navicon" class="navicon">
</div>
<nav class="displaydesktop displaytablet">
<ul id="menu-m">
<li class="click click1"> Menu 1 </li>
<li class="click click2"> Menu 2 </li>
<li class="click click3"> Menu 3 </li>
<li class="click click4"> Menu 4 </li>
</ul>
</nav>
<-----------------------------CSS----------------------------------- -->
.naviconbutton {
background:#ddd;
width:100%;
opacity:0.3;
float:left;
margin:20px 0 0 0;
padding:20px 0 20px 0;
}
.naviconbutton .navicon {
display:block;
margin:0 auto;
width:10%;
padding:0;
}
#menu-m {
overflow:hidden;
float:left;
background:#eee;
width:100%;
list-style:none;
padding:0;
margin:0;
height:0px;
-webkit-box-shadow:inset 0 0 15px #999999;
-moz-box-shadow:inset 0 0 15px #999999;
-ms-box-shadow:inset 0 0 15px #999999;
box-shadow:inset 0 0 15px #999999;
-webkit-transition:height ease 0.3s;
-moz-transition:height ease 0.3s;
-ms-transition:height ease 0.3s;
transition:height ease 0.3s;
}
#menu-m.slide {
height:313px;
}
#menu-m li {
display:block;
width:100%;
float:left;
padding:30px;
text-align:center;
font-family:"Lato";
font-weight:300;
font-size:15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
<------------------------------JQUERY----------------------- -->
$(".naviconbutton").click(function(){
$("#menu-m").toggleClass("slide");
$("html, body").animate({
scrollTop: $("#navbutton").offset().top
}, 400);
});
$(".click").click(function(){
$("#menu-m").removeClass("slide");
});
$(".click1").click(function(){
$("html, body").animate({
scrollTop:("600px")
}, 400);
});