slideToggleを使って簡易的なメガメニューを作成（レスポンシブ対応） | web(K)campus|WEBデザイナーのための技術系メモサイトPC版のサイトでコンテンツ量（ページ数）の多いナビゲーションメニューを作成時、ボタンにカーソルを合わせるとニュッと出てくるメガメニューをjQueryのslideToggleメソッドを使って、数行でいい感じに表示させる方法を備忘録代わりにまとめておきます。 ※メガメニューはメガナビゲーションメニュー・メガドロップダウンとも呼ばれています。 テキストだけのリンクだけでなく、広いスペースでアイキャッチ画像を入れるなどして、多層構造のリンクをわかりやすく表示させることができます。 よくわからない人は完成DEMOを先に見たほうがわかりやすいかと。 DEMO やってる事の流れをサクッと解説するとこんな感じ 多層構造のナビゲーションのHTMLを書く ホバーだけのリンクはa タグの画面遷移を無効化する スライドするようのjQueryを書く メガメニューを表示中はコンテンツ部分が黒くなってオーバーレイ表示
http://diglog.org/javascript/1248.html
