0

我有在右上角显示用户名和图像的网站。
我media query用来检测移动设备，然后将其隐藏并仅显示user image。
现在我正在尝试在用户点击该图像以从右侧出现菜单时，就像在谷歌上一样。 在此处输入图像描述
我试图遵循几个例子，但我不明白什么时候只使用 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>
...

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

4

2 回答 2

1

这是一个小提琴

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

$(function() {
  $('#accountImageMobile').click(function () {
     $('#over-menu').css({ left: '0' });
  });
});
于 2013-09-13T19:59:22.760 回答
0

Snap.js是一个很棒且易于使用的 JS 库，可以做到这一点。不过需要注意的一件事是：iOS 7 全面使用边缘滑动手势，这可能会干扰您使用的任何移动 UI。只是一个注释。您可以禁用滑动，如果您愿意，只需从按钮触发菜单。

于 2013-09-13T20:16:27.897 回答