タグ

ブックマーク / webdesign.practice.jp (1)

  • ドロワーメニュー(ハンバーガーメニュー)を簡単な jQueryとCSSだけで作る手順

    ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー(ハンバーガーメニュー)にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS だけで簡単に作れることがわかったので、メモっておきます。 デモを作りました。(画像クリックで別ウィンドウで開きます) スマホで見るならこちらから→ 日のINDEX クラスを付与・解除できる jQueryの「.toggleClass」 ドロワーメニューの動作の原理 ドロワーメニューの作り方 ハンバーガー部分のCSS参考サイト クラス名を付与・解除できる jQueryの「.toggleClass」 ヘッダー部分のグローバルナビゲーションは、<nav>要素の中に <ul>を仕込んで作ります。 これを、PCビューの時は表示させて、

    ドロワーメニュー(ハンバーガーメニュー)を簡単な jQueryとCSSだけで作る手順
  • 1