{"id":25116,"date":"2017-11-17T22:06:21","date_gmt":"2017-11-17T12:06:21","guid":{"rendered":"https:\/\/codemyui.com\/?p=25116"},"modified":"2017-11-17T22:06:21","modified_gmt":"2017-11-17T12:06:21","slug":"react-right-click-context-menu","status":"publish","type":"post","link":"https:\/\/codemyui.com\/react-right-click-context-menu\/","title":{"rendered":"React Right Click Context Menu"},"content":{"rendered":"<p>This is a React right-click context menu designed by devHamsters.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/c27d44ead857d1cb93d1e8be85f4123a\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>React Right Click Menu Snippet<\/h2>\n<p class='codepen'  data-height='436' data-theme-id='0' data-slug-hash='yMProm' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen React right-click context menu by devHamsters (@devhamsters) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a React right-click context menu designed by devHamsters.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/react-right-click-context-menu\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25117,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[36516635],"class_list":["post-25116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/react-right-click-context-menu.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26566,"url":"https:\/\/codemyui.com\/hamburger-menu-to-sidebar-navigation-menu\/","url_meta":{"origin":25116,"position":0},"title":"Hamburger Menu to Sidebar Navigation Menu","author":"Saijo George","date":"July 7, 2018","format":false,"excerpt":"In this code snippet, the hamburger menu icon transforms into the sidebar navigation menu on click and on clicking the x icon on the menu it collapses back to a hamburger menu. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Menu to Sidebar\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Hamburger Menu to Sidebar Navigation Menu Snippet","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6533,"url":"https:\/\/codemyui.com\/concentric-circles-navigation-menu\/","url_meta":{"origin":25116,"position":1},"title":"Concentric Circles Navigation Menu","author":"Hima Vincent","date":"February 26, 2017","format":false,"excerpt":"This is an experimental navigation menu by Bennett Feely. When you click on the menu button on the top right it expands into a series of concentric circles to display the navigation menu, you can click on it again to collapse the menu. If you are having trouble with the\u2026","rel":"","context":"In \"circle\"","block_context":{"text":"circle","link":"https:\/\/codemyui.com\/tag\/circle\/"},"img":{"alt_text":"Concentric Circles Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/concentric-circles-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13953,"url":"https:\/\/codemyui.com\/mobile-dropdown-menu\/","url_meta":{"origin":25116,"position":2},"title":"Mobile Dropdown Menu","author":"Hima Vincent","date":"March 27, 2017","format":false,"excerpt":"This mobile optimised dropdown was designed by Patrick Rice. When you click on the menu you get a dropdown of the navigation menu, clicking on it again will hide it from view. If you are having trouble with the pen, try the archived copy on GitHub Mobile Dropdown Menu Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dropdown-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dropdown-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dropdown-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dropdown-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":20111,"url":"https:\/\/codemyui.com\/click-show-sub-menu-card-ui\/","url_meta":{"origin":25116,"position":3},"title":"Click to Show Sub Menu in Card UI","author":"Hima Vincent","date":"July 17, 2017","format":false,"excerpt":"This snippet by Paresh Deshpande is useful when you want to reveal the sub menu in you card UI section. When you click on the plus icon, it pushes the content to reveal a sub menu that is hidden away offering new options. If you are having trouble with the\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Click to Show Sub Menu in Card UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/click-to-show-sub-menu-in-card-ui.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/click-to-show-sub-menu-in-card-ui.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/click-to-show-sub-menu-in-card-ui.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/click-to-show-sub-menu-in-card-ui.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13428,"url":"https:\/\/codemyui.com\/simple-hamburger-menu-x-mark-animation\/","url_meta":{"origin":25116,"position":4},"title":"Simple Hamburger Menu to X Mark Animation","author":"Hima Vincent","date":"March 21, 2017","format":false,"excerpt":"Here is a simple hamburger menu icon to a close animation designed by Dicson. When you click on it the hamburger menu collapses to a single line and then transforms into an X mark. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Menu\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/menu-button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/menu-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/menu-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/menu-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13043,"url":"https:\/\/codemyui.com\/hover-click-slideout-sidebar-navigation\/","url_meta":{"origin":25116,"position":5},"title":"Hover Click Slideout Sidebar Navigation","author":"Hima Vincent","date":"March 21, 2017","format":false,"excerpt":"This hover or click slideout sidebar navigation was designed by Nick Ciliak. When you hover or click on the hamburger menu in the top left the modal sidebar navigation slides out. If you are having trouble with the pen, try the archived copy on GitHub Slideout Sidebar Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/sidebar-navigation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25116"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25117"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}