0

左からスライドしてページの 20% を占めるオフ キャンバス ナビゲーションを作成しようとしていますが、コンテンツは左にスライドし (一部はキャンバスからはみ出します)、ページの 80% を占めます。これは、Google のモバイル サイトと Facebook のモバイル アプリで確認されています。

CSS3 トランジションを使用したバージョンは次のとおりです: http://codepen.io/chriscoyier/pen/umEgv

ただし、CSS Transitions ではなく、JQuery/Javascript のみに依存するものを作成しようとしています。

以下は、私がこれまでに持っているものへのリンクです。

なぜ機能しないのかわかりません。#main-nav の幅は、.menu-button がクリックされるたびに切り替える必要があります。したがって、右にスライドする効果が生まれます。

誰かがこれを修正するのを手伝ってくれますか、そして/または私が達成しようとしていることを手伝ってくれますか?

これが私がこれまでに持っているものです：http://pastebin.com/0X7uT7tC

4

1 に答える 1

1

css で幅を 20% に変更し、ロード時にこれを非表示にします。

ここにフィドルがあります

jQuery

 $('#main-nav').hide();
 $('.menu-button').click(function () {
     $('#main-nav').animate({
         width: 'toggle'
     });
 });

CSS

    .main-nav {
    position: fixed;
    top: 0;
    width: 20%;
    height: 100%;
    background: #3B3B3B;
    overflow: hidden;
}
于 2013-02-05T21:11:40.963 に答える