読者です 読者をやめる 読者になる 読者になる

ジンジャー研究室

長めのつぶやき。難しいことは書きません。

Context Menu のデザイン

ブラウザ上に Context Menu を実装するときに何を参考にすればいいのかわからなかったので、自分用にメモ。

見た目

Win10 - Chrome

f:id:jinjor:20161105202640p:plain

Win10 - Firefox

f:id:jinjor:20161105200406p:plain

Win10 - Edge

f:id:jinjor:20161105200412p:plain

Win10 - Desktop

f:id:jinjor:20161105200348p:plain

Mac - Browsers/Desktop

f:id:jinjor:20161105200422p:plain

f:id:jinjor:20161105202508p:plain

Google Spreadsheet

f:id:jinjor:20161105200428p:plain

位置

クリックした位置からメニューが出る方向と、はみ出したときに画面内に収める方法。

環境 デフォルト方向 左右はみ出し 上下はみ出し
Win10 Desktop 左下 シフト 反転
Win10 Chrome 右下 シフト 反転
Win10 Firefox 右下 シフト 反転
Win10 Edge 右下 反転 反転
Mac Desktop/Browsers 右下 反転 シフト
Google Spreadsheet 右下 反転 反転