jQuery・横幅3種類、マウスオーバードロップダウンを作りました [スマホ未対応 / IE8対応]

150815_001

仕事で依頼されるドロップダウンは、大抵この3種類なので作っておきました。マウスオーバーをスマホ対応に出来ないかと試行錯誤しましたが、すぐには無理っぽいので諦めました。

目次

検証済みブラウザとOS

  • IE 8~ ※一部CSSはIE8不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • 実務で必要なドロップダウンの横幅を全てカバー
  • iOSで一応は動作する
出来ないこと
Androidで動作しない

 

要点とコード

code

  • リストタグをネスト
  • ナビゲーション部分に id や class を適用しない、プレーンなHTML
  • jQueryはごく普通のコードで、id 以外は全て同じ

 

ベーシック

 

コンテンツ幅 100%

 

ブラウザ幅 100%

 

カスタマイズ

customize

メニューを画像にしたい
リストそれぞれに id を指定し、a / hover / .active に background を指定する。画像メニューは時代遅れかつ面倒なので、テキストにすべき。

 

問題点

動作はPCのみ
ユーザーエージェントを切り替えたり、touchstart / touchend を設定したりといろいろ試したが、まともに動かせなかった。
実務的には、PCとスマホでメニューのデザインを切り替えるのが普通なので、まぁ何とかなるだろう。

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 96,461

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。