jQuery ContextMenu を使えばコンテキストメニューを簡単に表示できる。
デフォルトのコンテキストメニューのデザインが気に食わなかったので css をいじった。
Mac ライクなのが良かったけど、一から CSS 書く時間もセンスもないのでどうしようかなと思ったが、Twitter Bootstrap のドロップダウンメニューがコンテキストメニューっぽかったので、該当箇所を真似た。
# アプリケーションに Twitter Bootsrap を使ってるし統一が取れるし。
Bootstrap
.context-menu-list { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .context-menu-item { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 20px; color: #333333; white-space: nowrap; background-color: #ffffff; } .context-menu-item.hover { cursor: pointer; background-color: #39F; } .context-menu-item.hover > .context-menu-list { display: block; }
色々足りない気がするけど、とりあえず最低限出来たのでこれでいいや。