{"id":231611,"date":"2019-10-19T09:11:25","date_gmt":"2019-10-19T09:11:25","guid":{"rendered":"https:\/\/themes.kerjemtec.com\/code-snippets\/?page_id=231611"},"modified":"2019-10-19T09:42:13","modified_gmt":"2019-10-19T09:42:13","slug":"segmented-circular-menu","status":"publish","type":"page","link":"https:\/\/themes.kerjemtec.com\/code-snippets\/segmented-circular-menu\/","title":{"rendered":"Segmented Circular Menu"},"content":{"rendered":"<p>[et_pb_section bb_built=&#8221;1&#8243; _builder_version=&#8221;4.0.1&#8243; hover_enabled=&#8221;0&#8243; height=&#8221;0px&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; prev_background_color=&#8221;#000000&#8243;][et_pb_row _builder_version=&#8221;3.29.1&#8243; background_color=&#8221;#8857f2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;1&#8243; width=&#8221;30em&#8221; height=&#8221;30em&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; box_shadow_style=&#8221;preset1&#8243; border_radii=&#8221;on|50%|50%|50%|50%&#8221; hover_enabled=&#8221;0&#8243; custom_css_main_element=&#8221;position: fixed !important;||bottom: -10em;||left: 50%;||margin-left: -15em;||margin-bottom: -5em;&#8221; z_index=&#8221;11&#8243; module_class=&#8221;has-transform&#8221; transform_scale=&#8221;1%|1%&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.29.1&#8243;][et_pb_blurb admin_label=&#8221;Blurb #1&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#773ef2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; \/][et_pb_blurb admin_label=&#8221;Blurb #2&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#8857f2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; transform_rotate=&#8221;0deg|0deg|30deg&#8221; \/][et_pb_blurb admin_label=&#8221;Blurb #3&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#773ef2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; transform_rotate=&#8221;0deg|0deg|60deg&#8221; \/][et_pb_blurb admin_label=&#8221;Blurb #4&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#8857f2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; transform_rotate=&#8221;0deg|0deg|90deg&#8221; \/][et_pb_blurb admin_label=&#8221;Blurb #5&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#773ef2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; transform_rotate=&#8221;0deg|0deg|120deg&#8221; \/][et_pb_blurb admin_label=&#8221;Blurb #6&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#8857f2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute !important;||left: 50%;||top: 50%;&#8221; custom_margin=&#8221;|||-15em|false|false&#8221; transform_skew_linked=&#8221;off&#8221; transform_skew=&#8221;60deg|0deg&#8221; transform_origin=&#8221;100%|100%&#8221; animation=&#8221;off&#8221; custom_css_blurb_content=&#8221;transform: skew(-60deg) rotate(-75deg);||position: absolute;||height: 27em;||width: 27em;||bottom: -13.5em;||right: -13.5em;&#8221; custom_css_blurb_image=&#8221;margin-bottom: 15px;&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; transform_rotate=&#8221;0deg|0deg|150deg&#8221; \/][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=&#8221;1&#8243; _builder_version=&#8221;3.29.1&#8243; width=&#8221;100px&#8221; height=&#8221;100px&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; border_radii=&#8221;on|50%|50%|50%|50%&#8221; box_shadow_style=&#8221;preset1&#8243; background_color=&#8221;#ffffff&#8221; custom_css_main_element=&#8221;position: fixed !important;||bottom: -50px;||left: 50%;||margin-left: -50px;&#8221; module_class=&#8221;transform_target&#8221; z_index=&#8221;12&#8243; hover_enabled=&#8221;0&#8243; prev_background_color=&#8221;#000000&#8243;][et_pb_row _builder_version=&#8221;3.29.1&#8243; custom_padding=&#8221;0px||0px||false|false&#8221; background_enable_color=&#8221;off&#8221; hover_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.29.1&#8243;][et_pb_blurb _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%43%%&#8221; icon_color=&#8221;#222222&#8243; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;50px&#8221; animation=&#8221;off&#8221; custom_css_main_element=&#8221;margin-bottom: 0px;&#8221; hover_enabled=&#8221;0&#8243; \/][et_pb_code _builder_version=&#8221;4.0.1&#8243; hover_enabled=&#8221;0&#8243;]<\/p>\n<style><!-- [et_pb_line_break_holder] -->.has-transform, .transform_target .et-pb-icon, .toggle-transform-animation {<!-- [et_pb_line_break_holder] -->  transition: all 400ms ease-in-out;<!-- [et_pb_line_break_holder] -->} <!-- [et_pb_line_break_holder] -->.has-transform, .toggle-transform-animation {<!-- [et_pb_line_break_holder] -->  font-size:14px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.toggle-transform-animation {<!-- [et_pb_line_break_holder] -->  transform: none !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.transform_target {<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.toggle-active-target .et_pb_blurb .et-pb-icon {<!-- [et_pb_line_break_holder] -->  transform: rotateZ(45deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media all and (max-width: 980px) {<!-- [et_pb_line_break_holder] -->  .has-transform {<!-- [et_pb_line_break_holder] -->    -webkit-mask-image: -webkit-radial-gradient(white, black);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  .has-transform, .toggle-transform-animation {<!-- [et_pb_line_break_holder] -->    font-size:10px;<!-- [et_pb_line_break_holder] -->  } <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->(function($) {<!-- [et_pb_line_break_holder] -->  $(document).ready(function(){<!-- [et_pb_line_break_holder] -->    $('.transform_target').click(function(){<!-- [et_pb_line_break_holder] -->      $(this).toggleClass('toggle-active-target');<!-- [et_pb_line_break_holder] -->      $('.has-transform').toggleClass('toggle-transform-animation');   <!-- [et_pb_line_break_holder] -->    });    <!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] -->})( jQuery );   <!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section bb_built=&#8221;1&#8243; _builder_version=&#8221;4.0.1&#8243; hover_enabled=&#8221;0&#8243; height=&#8221;0px&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; prev_background_color=&#8221;#000000&#8243;][et_pb_row _builder_version=&#8221;3.29.1&#8243; background_color=&#8221;#8857f2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;1&#8243; width=&#8221;30em&#8221; height=&#8221;30em&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; box_shadow_style=&#8221;preset1&#8243; border_radii=&#8221;on|50%|50%|50%|50%&#8221; hover_enabled=&#8221;0&#8243; custom_css_main_element=&#8221;position: fixed !important;||bottom: -10em;||left: 50%;||margin-left: -15em;||margin-bottom: -5em;&#8221; z_index=&#8221;11&#8243; module_class=&#8221;has-transform&#8221; transform_scale=&#8221;1%|1%&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.29.1&#8243;][et_pb_blurb admin_label=&#8221;Blurb #1&#8243; title=&#8221;link&#8221; _builder_version=&#8221;3.29.1&#8243; use_icon=&#8221;on&#8221; font_icon=&#8221;%%134%%&#8221; background_color=&#8221;#773ef2&#8243; background__hover_enabled=&#8221;on|hover&#8221; hover_enabled=&#8221;0&#8243; background_color__hover=&#8221;#222222&#8243; background_enable_color__hover=&#8221;on&#8221; icon_color=&#8221;#ffffff&#8221; use_icon_font_size=&#8221;on&#8221; icon_font_size=&#8221;40px&#8221; icon_font_size_last_edited=&#8221;on|desktop&#8221; icon_font_size_tablet=&#8221;30px&#8221; text_orientation=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font=&#8221;Archivo Narrow|||on|||||&#8221; header_font_size=&#8221;14px&#8221; header_font_size_last_edited=&#8221;on|desktop&#8221; header_font_size_tablet=&#8221;12px&#8221; width=&#8221;15em&#8221; height=&#8221;15em&#8221; custom_css_main_element=&#8221;position:absolute [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":231626,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-231611","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/comments?post=231611"}],"version-history":[{"count":5,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231611\/revisions"}],"predecessor-version":[{"id":231630,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231611\/revisions\/231630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/media\/231626"}],"wp:attachment":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/media?parent=231611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}