2


右側から表示されるオフキャンバス メニューを作成しようとしています。body 要素には、メニューに nav タグがあります。Nav タグはブラウザのウィンドウの外にある必要があるため、絶対位置と right プロパティが負の値に設定されています。本文の幅は 100% で、overflow-x は非表示に設定されています。jquery を使用して、body 要素の css 'opened' クラスを切り替えます。これにより、body が左に移動し、nav が表示されます。

HTML 部分:

<a href="#" class="openMenu">MENU</a>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>        
        </ul>
    <nav>

CSS 部分:

body{
    position: relative;
    overflow-x: hidden;
    width: 100%;
    left: 0;
    top: 0;
    background: orange;
}

body.opened{
    left: -150px;
}

nav{
    position: absolute;
    right: -150px;
    top:0;
    background: grey;
    width: 150px;
    z-index: 99999;
}

body, body.opened{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

a.openMenu{
    position: absolute;
    top: 0;
    left: 50%;
    color: white;
}

ul{
    list-style: none;
}

nav ul li a{
    color: white;
}

Jquery 部分:

$('a.openMenu').click(function(){
    $('body').toggleClass('opened');
    return false;
});

これがどのように見えるかです: http://jsfiddle.net/EwCVH/
実際の 例: http://vital-element.com

PC ではすべて問題ありませんが、たとえば携帯電話で開くと、overflow-x プロパティが機能しなくなり、水平方向にスクロールして非表示のナビゲーションを表示できます。これはクリックでのみ開くはずです。

隠しオーバーフローxプロパティをhtmlタグに追加しようとしましたが、タッチデバイスで水平スクロールを実際に隠していますが、メニューを開こうとすると、本体だけが左に移動し、オーバーフロープロパティによってメニューが非表示になります(と思います)。

助言がありますか？ありがとう。

4

1 に答える 1

2

科学的な説明はありませんが、スライド ナビゲーション要素の位置を固定に変更すると、この問題が解決します。Android は、ナビゲーションがビューポートの一部であるとは考えなくなりました。

現在、メニューの位置に応じて、jquery を使用して変更する適切なプロパティを持つ 2 つのクラスを使用しています。

.menuRight{
    right: -150px;
 }

 .menuLeft{
    right: 0px;
 }
于 2013-08-20T10:35:22.607 に答える