Context Menu in HTML 5

Context Menus allow us to add different options to any browser.

Context Menu in HTML 5 

 
Using the Context menu means giving additional features to the user so that the user can directly share the content over the social network. The Context Menu provides more flexibility, allowing us to have more than one menu item on the page within the different sections. 
 

HTML CODE

  1. <!doctype html><html><head><meta charset="UTF-8"><title>Context Menu</title><link rel="stylesheet" href="style.css" /></head><body><h1>  
  2.         Right click the section below for a context menu</h1><section contextmenu="my-right-click-menu"><p>Yes, this section right here</p></section><menu type="context" id="my-right-click-menu"><menuitem label="Please do not steal" icon="img/forbidden.png"></menuitem><menu label="Social Networks"><menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"></menu><menuitem label="Refresh" onclick="window.location.reload()"></menuitem></menu></body></html>  

CSS CODE

  1. body {  
  2.   background#F7F7F7;  
  3. }  
  4. h1 {  
  5.   font-size30px;  
  6.   font-family'Pacifico'cursive;  
  7.   color#292929;  
  8.   font-weightnormal;  
  9.   text-aligncenter;  
  10.   margin-top50px;  
  11. }  
  12. section {  
  13.   background#468EB3;  
  14.   width260px;  
  15.   height260px;  
  16.   marginauto;  
  17.   margin-top30px;  
  18.   border1px solid #4081A1;  
  19.   padding20px;  
  20.   -webkit-transition: background 0.5s linear 0.3s;  
  21.   -moz-transition: all 0.5s linear 0.3s;  
  22.   -o-transition: all 0.5s linear 0.3s;  
  23.   -ms-transition: all 0.5s linear 0.3s;  
  24.   transition: all 0.5s linear 0.3s;  
  25. }  
  26. section:hover {  
  27.   background#559EC2;  
  28.   box-shadow: 0px 2px 5px rgba(0,0,0,0.3);  
  29. }  
  30. p {  
  31.   font-familyarial,sans-serif;  
  32.   color#F7F7F7;  
  33.   text-aligncenter;  
  34.   padding-top30%;  
  35.   font-size18px;  
  36.   text-shadow0px 1px 5px rgba(0,0,0,0.4);  
  37. }