GitHub<\/a><\/p>\n\nSee the Pen Circle Menu by Willmer Barahona (@wbarahona) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
Check out this amazing circle menu effect on clicking will pop items around and on selecting the item will animate the button to circle around and then change the background color to the one selected. Designed by Willmer Barahona.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":478,"comment_status":"open","ping_status":"open","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":true,"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":[119262,1520705],"class_list":["post-44","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-icon","tag-navigation-menu","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/03\/circle-menu-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":6533,"url":"https:\/\/codemyui.com\/concentric-circles-navigation-menu\/","url_meta":{"origin":44,"position":0},"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":19812,"url":"https:\/\/codemyui.com\/hand-drawn-pencil-circle-hover\/","url_meta":{"origin":44,"position":1},"title":"Hand Drawn Pencil Circle on Hover","author":"Hima Vincent","date":"June 29, 2017","format":false,"excerpt":"This navigation menu was designed by Mariusz Dabrowski, when you hover over any of the menu links it will be highlighted by a hand drawn circle. If you are having trouble with the pen, try the archived copy on GitHub Hand Drawn Circle Snippet","rel":"","context":"In \"hand drawn\"","block_context":{"text":"hand drawn","link":"https:\/\/codemyui.com\/tag\/hand-drawn\/"},"img":{"alt_text":"Hand Drawn Pencil Circle On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Hand-Drawn-Pencil-Circle-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29895,"url":"https:\/\/codemyui.com\/services-in-icons-with-circular-navigation\/","url_meta":{"origin":44,"position":2},"title":"Services In Icons With Circular Navigation","author":"Saijo George","date":"May 19, 2020","format":false,"excerpt":"Code by: Jes\u00fas Castro from Codepen If you are having trouble with the pen, try the archived copy on GitHub Circular Navigation Snippet","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Services In Icons With Circular Navigation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Services-In-Icons-With-Circular-Navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Services-In-Icons-With-Circular-Navigation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Services-In-Icons-With-Circular-Navigation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Services-In-Icons-With-Circular-Navigation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":926,"url":"https:\/\/codemyui.com\/jquery-dropdown-navigation-menu\/","url_meta":{"origin":44,"position":3},"title":"jQuery Dropdown Navigation Menu","author":"Hima Vincent","date":"June 28, 2016","format":false,"excerpt":"A simple menu that reveals the submenu on hover, will work well on websites with a few child elements for each parent menu item. When you hover over a menu item, you get a dropdown with the sub-menu items. It uses CSS and jQuery. If you are having trouble with\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"jQuery Dropdown Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/jquery-dropdown-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\/2016\/06\/jquery-dropdown-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/jquery-dropdown-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/jquery-dropdown-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":23,"url":"https:\/\/codemyui.com\/responsive-sidebar-menu\/","url_meta":{"origin":44,"position":4},"title":"Responsive Sidebar Menu","author":"Hima Vincent","date":"May 19, 2016","format":false,"excerpt":"Checkout this\u00a0cool responsive sidebar menu animation on clicking the hamburger menu icon reveals the menu items. Designed by\u00a0tonkec_palonkec.If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"responsive sidebar","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/responsive-sidebar.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/responsive-sidebar.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/responsive-sidebar.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/responsive-sidebar.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26408,"url":"https:\/\/codemyui.com\/3d-cube-flip-navigation-menu\/","url_meta":{"origin":44,"position":5},"title":"3D Cube Flip Navigation Menu","author":"Saijo George","date":"June 5, 2018","format":false,"excerpt":"Looking for some 3D effect to add to your website? How about this navigation menu by Mahmoud Zohdi that add a 3d flip to each page load? When you click on the navigation menu item it doe s a3d flip of the content and loads the pages in. If you\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Cube Flip Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-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\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.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\/44","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":26149,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/44\/revisions\/26149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/478"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}