Circular Contextual App Menu Experiment

Jika berbicara tentang klik kanan (right click) pada mouse mungkin yang terbesit pada pikiran kita adalah tidak bisa di klik kanan ;)) Secara default pada masing-masing web browser telah disisipkan beberapa konteks menu. Misalkan pada mozilla jika sobat melakukan klik-kanan mouse di area kosong maka akan muncul: go back & go forward one page, Reload current page, Bookmark This Page, Save Page As, Select all, View Page Source, View Page Info dan Inspect Element. Konteks menu akan lain lagi jika sobat melakukan right-click pada textarea, input, link, image, iframe or etc!

Singkat cerita, bagaimana kalau perintah klik kanan pada mouse diisikan dengan context menu kreasi kita :-? Jadi kalo ada orang klik-kanan maka akan terpampang 6 menu bulet-bulet (Circular Contextual App Menu) Here original idea codepen.io/simgooder/details/BNLGXm.Seperti itu versi modifan gue bro! Pada source sumber memakai trik font-awesome. Sehingga akan sedikit berbeda pada pemanggilan script. Trick ini terintegrasi dengan jQuery script! Jadi pada template kalian harus sudah terpasang jQuery ;)

.circle-container {
position: relative;
width: 10em;
height: 10em;
padding: 0;
border-radius: 50%;
list-style: none;
-webkit-animation: 0.2s spin linear;
animation: 0.2s spin linear;
margin: 5em auto 0;
position: absolute;
display: none;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container > *:nth-of-type(1) {
-webkit-transform: rotate(0deg) translate(5em) rotate(0deg);
-ms-transform: rotate(0deg) translate(5em) rotate(0deg);
transform: rotate(0deg) translate(5em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
-webkit-transform: rotate(60deg) translate(5em) rotate(-60deg);
-ms-transform: rotate(60deg) translate(5em) rotate(-60deg);
transform: rotate(60deg) translate(5em) rotate(-60deg);
}
.circle-container > *:nth-of-type(3) {
-webkit-transform: rotate(120deg) translate(5em) rotate(-120deg);
-ms-transform: rotate(120deg) translate(5em) rotate(-120deg);
transform: rotate(120deg) translate(5em) rotate(-120deg);
}
.circle-container > *:nth-of-type(4) {
-webkit-transform: rotate(180deg) translate(5em) rotate(-180deg);
-ms-transform: rotate(180deg) translate(5em) rotate(-180deg);
transform: rotate(180deg) translate(5em) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
-webkit-transform: rotate(240deg) translate(5em) rotate(-240deg);
-ms-transform: rotate(240deg) translate(5em) rotate(-240deg);
transform: rotate(240deg) translate(5em) rotate(-240deg);
}
.circle-container > *:nth-of-type(6) {
-webkit-transform: rotate(300deg) translate(5em) rotate(-300deg);
-ms-transform: rotate(300deg) translate(5em) rotate(-300deg);
transform: rotate(300deg) translate(5em) rotate(-300deg);
}
.circle-container li > * {
display: block;
max-width: 100%;
border-radius: 50%;
-webkit-transition: .15s;
transition: .15s;
padding: 2em 0;
line-height: 1;
}
.circle-container li {
border: solid 5px #333;
border-radius: 50%;
box-shadow: 0px 3px 6px #333;
}
.home {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9XdDifXtZDr19wWBZpb2_4nHw4EgVfqvVh7AJUWrCl6UMVy9nMPAv9Br1bw7ulZO3OzWt8Jad_Awk3rd1mLs6SDOrXjJxMq9JJNurqQV8LpLahD6MDsBSEUBtGN0TQcGbh2FgLCLJR8/s32/) no-repeat center center;
}
.close {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEirqAKsADePoPaoAUu8NC19J9dy2apKerOGA2Spx8OmB76D8YLdKNfR7R9BSENaw9WZAVBn7tk0jwg-EwpLUbY1ffGJVqxXic20SukdvdDhVtC1NpBG4mCtNCjcyY4J2O0mTPRYk4zvj9/s32/) no-repeat center center;
}
.menu-1 {
background: #f90 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDTWnhKOUREj0fFwc9yltjwQg-kQ7x7mf2M7qdK5P0cx6_G03bFFOhQo2qK9CXp0hJ5-br3yD1ykrEx7N8G_oCU6LkQ8L5Ii_W8k4G34oKXzfq0Idq4ptK4BaOwlGIkSwe7NBjfGbXpI/s32/) no-repeat center center;
}
.menu-2 {
background: #06f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCG90_TWzowPea30Vv_jRZ34eKQV7Cs7-pSRdQueJTF6P190iGHT4LlHb-bWMne_2ZIkX9Jj-4T6yCUUf5kxYxQOx_L5FS-GtUz7A4nD1bRJn4S_3GRCqKNwN59_rPuvE8RQMqWyaXJRWq/s32/) no-repeat center center;
}
.menu-3 {
background: #09f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8tCJ7E1-etym4LQItr18GSjWPE97NCxp9Olaq1pTcgPvWJlmbqZ0DDHK5-9KxYJS5ZBQ17qZO1xryrGSvcIZ-PQBnmdWgsI3ngqfEpZkKi-OE3xuhsut0YT2HOT8n0hpIOuLYZuoNvn-/s32/) no-repeat center center;
}
.menu-4 {
background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM596bqeTJo_48a4P6ddxpSPg1DuP-X1TSZZrcljPMidozmiHMO-jygixNxAZoz69wJx1bVPCIl2HQSuzH32p6hDzY_MX3WoDoGC9pIom6y-TQcGPotzuL_lQqQkpDZYvZR4VKfjD7f8/s32/) no-repeat center center;
}
.menu-5 {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj834DpcjAGNzVgh4mC-zjbFnz25GfNybgU7wVVo_EIVJnkyslFGzB0cKritXHAqpCEgH1L4WqOyCYRRlhSELon25KzsdnzGTDH8aPyc4oSxln4yNdhyFjxLen3t59Od2gOGcYNTVpENYDY/s32/) no-repeat center center;
}
.hide {
-webkit-animation: 0.2s spinout linear !important;
animation: 0.2s spinout linear !important;
}
@-webkit-keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@-webkit-keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}
@keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}

Jika mau mengganti gambar, gantilah dengan yang memiliki resolusi 32 x 32 pixel.

<script type='text/javascript'>
//<![CDATA[
 $(document).bind("contextmenu", function(event) {
       event.preventDefault();
       var circle = "<ul class='circle-container' style='display:block;'><li class='home'><a href='' target='top'></a></li><li class='menu-1'><a href=''></a></li><li class='menu-2'><a href=''></a></li><li class='menu-3'><a href=''></a></li><li class='menu-4'><a href=''></a></li><li class='menu-5'><a href=''></a></li><li class='close'><a href=''></a></li></ul>";
$(circle)
 .appendTo("body")
 .css({top: event.pageY-160 + "px", left: event.pageX-80 + "px"});
});
$('.circle-container').get(0).click();
//Better solution - Button Specific
$(document).mousedown(function(e){
 if( e.which==1 ) {
  $(".circle-container").toggleClass("hide");
  setTimeout(function(){
       $(".circle-container").hide();
    },100);
 }
});
//]]>
</script>

Isikan alamat link pada syntax <a href=''></a> Sobat bisa tambah variasi target='top' Ingat koma atas satu pakainya jangan yg koma atas dua "" Script di atas sudah ditambahkan sedikit, gak tau bener atau salahnya, tetapi berjalan :D Soalnya kalau pakai dari sumber, pas menanamkan syntax link tidak jalan!!!
Ternyata Circular Contextual App Menu masih sebuah konsep yg perlu pengembangan bro. Karena saya tidak bisa jQuery, silahkan bagi sobat yg mau berbagi ilmunya tolong di fix itu script jQuery di atas :)

Hmmm....:-<