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 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Context Menu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>
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
body
{
background: #F7F7F7;
}
h1
{
font-size: 30px;
font-family: 'Pacifico', cursive;
color: #292929;
font-weight: normal;
text-align: center;
margin-top: 50px;
}
section
{
background: #468EB3;
width: 260px;
height: 260px;
margin: auto;
margin-top: 30px;
border: 1px solid #4081A1;
padding: 20px;
-webkit-transition: background 0.5s linear 0.3s;
-moz-transition: all 0.5s linear 0.3s;
-o-transition: all 0.5s linear 0.3s;
-ms-transition: all 0.5s linear 0.3s;
transition: all 0.5s linear 0.3s;
}
section:hover
{
background: #559EC2;
box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}
p
{
font-family: arial,sans-serif;
color: #F7F7F7;
text-align: center;
padding-top: 30%;
font-size: 18px;
text-shadow: 0px 1px 5px rgba(0,0,0,0.4);
}