0

右上隅にユーザー名と画像を表示する Web サイトがあります。
私はmedia queryモバイルデバイスを検出するために使用し、それを非表示にしてのみ表示しますuser image。
今、ユーザーがその画像をタップしてメニューを表示すると、Googleのように右から表示されるようにしようとしています。 ここに画像の説明を入力
私はいくつかの例に従おうとしましたが、いつ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 に答える