忽略折叠菜单的展开,使某些项目不随其移动,可以通过以下方式实现:
.fixed-item {
position: fixed;
top: 50px; /* 根据实际需求设置固定位置 */
left: 20px; /* 根据实际需求设置固定位置 */
}
const menuToggle = document.querySelector('.menu-toggle');
const fixedItem = document.querySelector('.fixed-item');
menuToggle.addEventListener('click', function() {
if (menuToggle.classList.contains('expanded')) {
fixedItem.style.display = 'none'; // 折叠菜单展开时隐藏固定项目
} else {
fixedItem.style.display = 'block'; // 折叠菜单收起时显示固定项目
}
});
@media (max-width: 768px) {
.fixed-item {
display: none; // 在小屏幕设备上隐藏固定项目
}
}
以上是一些常见的实现方式,具体应根据实际需求和项目情况进行选择和调整。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云