要在jQuery下拉菜單中實現響應式設計,你需要考慮以下幾個步驟:
引入jQuery庫和jQuery移動插件(如:jQuery Mobile、Foundation等)。
為下拉菜單添加HTML結構。例如:
<div class="dropdown">
<button class="dropdown-btn">菜單</button>
<div class="dropdown-menu">
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
</div>
</div>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu a:hover {background-color: #f1f1f1}
$(document).ready(function() {
$(".dropdown-btn").click(function(e) {
e.stopPropagation();
$(".dropdown-menu").toggle();
});
$(".dropdown-menu a").click(function(e) {
e.stopPropagation();
// 在這里處理點擊鏈接后的操作,例如跳轉到指定頁面
});
$(window).click(function() {
$(".dropdown-menu").hide();
});
});
@media screen and (max-width: 600px) {
.dropdown-menu {
width: 100%;
}
}
這樣,當屏幕寬度小于或等于600px時,下拉菜單將占據整個屏幕寬度。你可以根據需要調整媒體查詢的參數以適應不同的屏幕尺寸。