スライドインで表示するナビゲーション

ナビゲーションのベースとなる CSS に加えて、ナビゲーションを開くとき・閉じるときの動作ごとの CSS、JQuery を記述する

CSS で表示位置を変更するのみでスライド方向を変更することができる

Point

ナビゲーションのベースとなる CSS を開いた時の CSS、JQuery を Class に分けて実装

MENU をクリックすると、toggleClass の動作により Class【 open 】が与えられナビゲーションが表示される

toggleClass ですでにナビゲーションが開いているときや、ナビゲーションをクリックするときの removeClass の動作により、Class【 open 】は除かれナビゲーションは非表示となる

SampleContents