【jQuery】facebook風スライドメニューをちょっと作ってみた結果

css

最近、皆さんfacebookを日々使ってると思いますがあのメニューを左からスライドインされてくるアニメーションが以前から気になっていました。

て事で、せっかくなのでCSS3のtransitionも試しに使いつつjQueryを利用してスライドパネルを実装してみました。

htmlの構造

とりあえずhtmlのコードを記載します。がサンプルはfacebookを模倣してるので余計なコードが含まれてるのでなるべく簡潔にするために省きます。











    



  
☰

各IDと役割は下の表を確認してください。

left-nav 左のメニュー。facebookだとプロフとかニュースフィード・メッセージなど
right-nav 右のメニュー。facebookだと友達のオンラインの状況など。
page-wrap 移動させるためのメインのコンテンツを含むラッパー。
left-btn 左のメニューを表示させる為のボタン。
right-btn 右のメニューを表示させる為のボタン。

CSSの設定

下記にCSSの設定を書きます。こちらもfacebook風にする為に余計なコードを記載してるのでそういうのは省くようにしています。

body要素の設定

body {
   height:100%;
   overflow-x:hidden;
}

スライドさせるとブラウザのスクロールバーが出てしまうので横方向に出ないようにしたいのでとりあえず、overflow-xで横方向ではみ出した要素は隠れるようにしています。

左右のメニューのCSS

/* 左側のナビゲーション */
#left-nav{
    position:fixed;
    z-index:1;
    width:80%;
  
}

/* 右側のナビゲーション */
#right-nav{
    position:fixed;
    right:0;
    width:80%;
    z-index:2;
    
}

左右のメニューは常に左右に設置しておきたいのでpositionをfixedで固定位置にしています。また幅を80%にしているのは、実際のfacebookのアプリものくらいの幅があったので。ただ80％にすると左右のメニューが重なってしまうのでz-indexを1と2に指定して重なり順を指定しています。

移動させる要素：page-wrapの設定

#page-wrap{
    position:absolute;
    z-index:10;
    width: 100%;
    -webkit-transition:left 0.2s ease-in-out;
    transition:left 0.2s ease-in-out;
}

スライドさせる要素は移動させないといけないのでpositionは絶対配置のabsoluteを指定します。そして、幅を100%にしています。
あとは、こちらは常に最善面に表示したいのでz-indeをとりあえず10を設定しています。

CSS3によるtransitionによるアニメーションの設定

とりあえず移動させるpage-wrap要素に対してCSS3のtransitionによるアニメーションの設定をしておきます。

cssで絶対配置にしているので左側を基準にしてleftプロパティを0.2秒で加速・減速の設定をしておきます。こうする事でpage-wrap要素のleftプロパティが変更された場合にtransitionによるアニメーションが実行されます。

詳しい説明は「CSS3 Transitionでアニメーションさせてみる。」に書いてあります。

アニメーションを切り替える為のクラスを作る

今回は、jqueryで移動させる要素にクラスを追加したり削除したり切り替える事で、アニメーションを実行させています。

例えば、page-wrap要素に下記のopen-leftmenuクラスを追加した場合に、leftプロパティが80％の位置に指定されているのでその位置まで、transitionで設定した0.2秒で加速・減速で移動することになります。


.open-leftmenu{
    left:80%;
}

.close-leftmenu{
   left:0;
}

.open-rightmenu{
    left:-80%;
}

.close-rightmenu{
   left:0;
}
.open-leftmenu 要素を80％の位置（右方向）に移動させる
.close-leftmenu 要素を0の位置（初期位置）に移動させる
.open-rightmenu 要素を－80％の位置（左方向）に移動させる
.close-rightmenu 要素を0の位置（初期位置）に移動させる

jQueryの処理

jqueryの処理ですが、左ボタンと右ボタンの記述は同じなので左ボタンの設定だけ説明を書きます。

また今回はflagを立ててクラスを切り替える仕様にしています。そして実際のfacebookアプリもそうですが、左ボタンをクリックするとメインのコンテンツが右方向にスライドして左メニューが表示され、その間は右ボタンは表示領域から隠れる仕様になっています。

これは、例えば常に両方のボタンが表示されている状態だと、左ボタンをクリックするとflagがtrueになりスライドされ左メニューが表示ますが、この状態で右ボタンをクリックするとflagがfalseになり初期位置には戻りますが、ユーザーとしては右ボタンをクリックしたのに右メニューが表示されない！という事態が起こってしまう為です。


var flag=false;
$("p#left-btn").click(function(){

　/* 1:クラスの削除 */   
 $("#page-wrap").removeClass();
   
 /* 2:flagの切り替え */
　　flag=!flag;
    if(flag){

 /* 3:クラスの設定と重なり順の切り替え */
        $("#page-wrap").addClass("open-leftmenu");
        $("#left-nav").css("z-index",2);
        $("#right-nav").css("z-index",1);
    }else{

/* 4:閉じる設定 */  
        $("#page-wrap").addClass("close-leftmenu");   
        }
});

1:クラスの削除

まずクリックしたらremoveClassメソッドを利用してpage-wrap要素に設定していたクラスを削除します。これは、その後の処理でクラスを設定するのでクラスが競合してしまわないように最初に削除します。

2:flagの切り替え

これは、最初はfalseに設定していますが、「false⇒true」「true⇒false」を切り替えるようにしています。

3:クラスの設定と重なり順の切り替え

もしtrueだった場合の処理。trueだった場合はスライドさせたいのでaddClassメソッドでopen-leftmenuのクラスを追加しております。それによりpage-wrap要素にクラスが追加され、left要素が変更されるのでtransitionが実行されます。

また、左のメニューと右のメニューの要素の幅がお互いが80％の為、重なっている状態なので左メニューが表示されるときは左メニューが上に表示されないといけないのでz-indexで重なり順を右メニューより上に来るようにしています。同様に右メニューを下に設定しています。

4:閉じる設定

flagがfalseの時の設定。これはスライドを初期位置に戻したいたのでaddClassメソッドでclose-leftmenuのクラスを追加することで、transitionが実行され初期位置に戻るようにしています。

といった具合に処理しています。まーもっと効率の良い書き方もあるんですが（笑）

また、CSS3のグラデーションやflexボックス等の設定もしていたりするので、後はサンプルコードを見てみてください。間違えてんじゃん！！ってのは大目にみてください。

調べてみたらCSSだけでも出来るみたいですね（笑）実装方法が違いますが。

Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」