gpt4 book ai didi

jquery - 如何使移动设备的菜单从左侧出现

转载 作者:太空宇宙 更新时间:2023-11-04 14:35:19 25 4
gpt4 key购买 nike

我有一个在右上角显示用户名和图像的网站。
我使用 media query 检测移动设备,然后隐藏它并仅显示 user image
现在我正在尝试让用户点击该图像以从右侧出现菜单,就像在谷歌上一样。 enter image description here
我尝试遵循几个示例,但我不明白什么时候只使用 css 或 css + js 有人能解释一下怎么做的吗?
谢谢

更新

此代码应将叠加菜单置于内容之上:

$('.accountImageMobile').click(function () {
$('#over-menu').css({ left: '0' });
});

我的 HTML:

<body>
<header>
<div id="topHeader" style="background: #f5f5f5; min-height: 42px; padding-top: 5px; padding-left: 5px; padding-right: 5PX;">
...
<img id="accountImageMobile" style="max-width: 45px;" src="image.jpg" alt="" />
...
</div> >>>>top header end

<div id="over-menu">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
...

但是当我在移动设备上打开网站时,它会在顶部标题下方显示列表...

最佳答案

这是一个 Fiddle

#over-menu {
background: #ff0000;
position: absolute;
left: -200px;
top: 0;
width: 200px;
}

$(function() {
$('#accountImageMobile').click(function () {
$('#over-menu').css({ left: '0' });
});
});

关于jquery - 如何使移动设备的菜单从左侧出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18794200/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com