jQuery を用いて、ポップアップメニューを実現します。
このページで、マウスを右クリックしてください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ポップアップメニュー</title> <style> #menu { margin: 0; position: absolute; min-width: 200px; padding: 2px; line-height: 12pt; color: #000; background-color: #eeeeee; border: 1pt solid #666666; box-shadow: 2px 2px 4px 0px #666666; font-size: 9pt; visibility: hidden; } #menu a { display: block; padding: 2px 2px 2px 10px; text-decoration: none; color: #000; cursor: default; } #menu li { border: 1px solid transparent; list-style: none; } #menu li:hover { border: 1px solid #78aee5; background-color: #d1e2f2; } </style> <script src="./lib/jquery-1.10.2.min.js"></script> <script> $(function() { $('body').bind('contextmenu', function(e) { $('#menu').css('top', e.pageY + 'px') .css('left', e.pageX + 'px') .css('visibility', 'visible'); return false; }); $('body').bind('click', function() { $('#menu').css('visibility', 'hidden'); }); }); </script> </head> <body> <p>このページで、マウスを右クリックしてください。</p> <ul id="menu"> <li><a href="html/index.htm">HTML入門</a></li> <li><a href="js/index.htm">JavaScript入門</a></li> <li><a href="css/index.htm">スタイルシート入門</a></li> <li><a href="php/index.html">PHP入門</a></li> <li><a href="ruby/index.html">Ruby入門</a></li> </ul> </body> </html>
IE11, Chrome 44, Firefox 40 で動作確認しています。