はじめに

レスポンシブの js 対応… いつもカオスになりますよね…?

PC版はこんな動きで~、SP版ではこういう動きにしてください♪
なんていうのは厳禁です。

わたくしたちコーダーから冷たい視線を浴びることになるので注意が必要です。
レスポンシブなんて無かった時代が懐かしい… ゜(ノД`)゜。

今回はカオスにならない方法で ドロップダウンメニュー を実装する方法をご紹介します。
至ってシンプルです… サブメニューのアコーディオン?
…大丈夫、別の機能は切り離して考えましょう。

目次

サンプル

まずはサンプルをご覧くださいませ。

デモ

HTML

基本的なタグ構造はこちら!

CSS

ポイントとなる部分をピックアップしています。
その他、色々アレンジしてみてください!

SP

PC

jQuery

jQuery はたったのこれだけです。
複雑なことは一切していません!!

jQuery の便利な toggle 系のメソッドを使ってよしなにしてもらいましょう。
あんまり複雑な処理にすると泥沼にはまりがちなので…

皆さまのお力になれますように…(´ω`*)
以上!小ネタでした!

あわせて読みたい記事