タグ

ブックマーク / www.asobou.co.jp (1)

  • JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報(株式会社アーティス)

    スマートフォンサイトでよく使われるメニューに三線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三線のアイコンがハンバーガーに見えるためそう名付けられました。この三線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ

    JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報(株式会社アーティス)
  • 1