"Material Design Context Menu"
Pure CSS 1.0.0 Snippet by selimdoyranli

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE HTML> <html lang="en-US"> <head> <!-- material icon--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <!--RKcontextmenu--> <div class="RKcontextmenu"> <ul> <li><a href="javascript:void(0);" onclick="window.location.reload();"><i class="material-icons">refresh</i>Refresh</a></li> <li><a href="javascript:void(0);" onclick="window.history.back(-1);"><i class="material-icons">arrow_back</i>Back</a></li> <li><a href="https://www.facebook.com/radkodcom" target="_blank"><i class="material-icons">pages</i>RadKod Facebook Profile</a></li> <li><a href="https://www.twitter.com/radkodcom" target="_blank"><i class="material-icons">pages</i>RadKod Twitter Profile</a></li> <li><a href="https://www.instagram.com/freelancewebtasarim" target="_blank"><i class="material-icons">pages</i>RadKod İnstagram Profile</a></li> <li><a href="https://selimdoyranli.com" target="_blank"><i class="material-icons">person_outline</i>Selim Doyranlı Website</a></li> <li><a href="https://www.radkod.com" target="_blank"><i class="material-icons">public</i>RadKod Website</a></li> </ul> </div> </body> </html>
/* ignore this */ @import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext"); body { background: #eee; } body:after { content: "Right Click"; font-size: 2em; font-family: "Roboto", sans-serif; color: #444; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* #### RKcontextmenu #### */ .RKcontextmenu { display: none; position: absolute; width: 275px; height: auto; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19); z-index: 999; font-family: "Roboto", sans-serif; } .RKcontextmenu ul { margin: 0; padding: 0; } .RKcontextmenu ul li { list-style: none; font-size: 14px; } .RKcontextmenu ul li:hover { background: #f4f4f4; } .RKcontextmenu ul li a { position: relative; display: block; color: #666; padding: 10px 10px 10px 45px; margin: 10px; text-decoration: none; } .RKcontextmenu ul li a i { position: absolute; left: 10px; top: 10px; font-size:16px; color: #999; }
//RKcontextmenu $("html").on("contextmenu", function(e) { e.preventDefault(); var menu = $(".RKcontextmenu"); //firstly hide menu.hide(); var pageX = e.pageX; var pageY = e.pageY; menu.css({ top: pageY, left: pageX }); var mwidth = menu.width(); var mheight = menu.height(); var screenWidth = $(window).width(); var screenHeight = $(window).height(); var scrTop = $(window).scrollTop(); if (pageX + mwidth > screenWidth) { menu.css({ left: pageX - mwidth }); } if (pageY + mheight > screenHeight + scrTop) { menu.css({ top: pageY - mheight }); } //menu open menu.fadeIn(100); }); // menu hide - clicked outside $("html").on("click", function() { $(".RKcontextmenu").fadeOut(100); });

Related: See More

Paper Dashboard Pro Angular

Questions / Comments: