0

カスタム スライド メニューを作成しましたが、これが少し残念です。ここをクリックして、たとえばメニュー ボタンをクリックすると、スライド メニューは背景画像を右に押し出し、余分な x スクロールを残します。

この機能の私の目的は、背景画像の上にスライド メニューを配置することです。現在、私の背景画像は<img>タグでありabsolute、クライアントが画像を手動で更新したいときに配置されています。これが、この問題が発生している主な理由かもしれません。また、div id="right"背景画像を含むすべてのコンテンツをラップしています。コンテンツをラップする場所を配置しようとしましたが、これを正しく機能させる方法がわかりません。これを回避する方法があるかどうか疑問に思っています。以下は、JavaScript と HTML 構造の両方のコードのスニペットです。 .

$('#button').toggle( 
function() {
    $('#right').animate({ left: 400 }, 'slow', function() {
        $('#button').html('Close');
    });
}, 
function() {
    $('#right').animate({ left: 0 }, 'slow', function() {
        $('#button').html('Menu');
    });
}

);

<div id="right">
    <div id="menubar">
        <div id="button">
            Menu
        </div>
    </div>

<div id="menu">
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
        <li><a href="#">Menu Item 5</a></li>
        <li><a href="#">Menu Item 6</a></li>
        <li><a href="#">Menu Item 7</a></li>
        <li><a href="#">Menu Item 8</a></li>
        <li><a href="#">Menu Item 9</a></li>
        <li><a href="#">Menu Item 10</a></li>
        <li><a href="#">Menu Item 11</a></li>
        <li><a href="#">Menu Item 12</a></li>
    </ul>
</div>

誰かがこの問題を解決できる方法について私にアドバイスできますか?

4

1 に答える 1

0

簡単な追加：

Body{
    overflow-x:hidden;
}

したがって、body -s 水平スクロールを非表示にします。

owerflowに関する詳細情報。

于 2013-04-18T19:25:58.297 に答える