Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="menu menu--circle">
  <input type="checkbox" id="menu__active"/>
  <label for="menu__active" class="menu__active">
    <div class="menu__toggle">
      <div class="icon">
        <div class="hamburger"></div>
      </div>
    </div>
    <input type="radio" name="arrow--up" id="degree--up-0"/>
    <input type="radio" name="arrow--up" id="degree--up-1" />
    <input type="radio" name="arrow--up" id="degree--up-2" />
    <div class="menu__listings">
      <ul class="circle">
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="https://codepen.io/logrithumn" class="button"><i class="fa fa-user"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-cog"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#">&nbsp</a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-commenting"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-trash"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-battery-4"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-calendar"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-cloud"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-wifi"></i></a>
            </div>
          </div>
        </li>
        <li>
          <div class="placeholder">
            <div class="upside">
              <a href="#" class="button"><i class="fa fa-envelope-o"></i></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="menu__arrow menu__arrow--top">
      <ul>
        <li>
          <label for="degree--up-0"><div class="arrow"></div></label>
          <label for="degree--up-1"><div class="arrow"></div></label>
          <label for="degree--up-2"><div class="arrow"></div></label>
        </li>
      </ul>
    </div>
  </label>
</section>

              
            
!

CSS

              
                background_color = #392338
menu_color = #fff
hamburger_color = background_color
icon_hover_color = #c1264e 
arrow_hover_color = #ff947f

body
  padding 0
  margin 0
  background-color background_color
  color white
  *
    box-sizing border-box

.icon
  position absolute
  top 70%
  left 70%
  transform translateX(-50%) translateY(-50%)

hamburger_width = 20px
hamburger_height = 2px
hamburger_animation_duration = 1s

.hamburger
  content ' '
  position relative
  width hamburger_width
  border hamburger_height solid hamburger_color
  border-radius 5px
  transition all (hamburger_animation_duration / 3) ease
  &:after, &:before
    content ' '
    position absolute
    left 50%
    width 100%
    border hamburger_height solid hamburger_color
    border-radius 5px
    transform translateX(-50%)
    transition-property top, bottom, transform
    transition-duration (hamburger_animation_duration / 1), (hamburger_animation_duration / 1), (hamburger_animation_duration / 4)
  &:after
    top -(hamburger_height * 4)
  &:before
    bottom -(hamburger_height * 4)
   
 
 arrow_size = 20px   
 menu_toggle_size = 200px
 menu_whole_size = menu_toggle_size * 3 + arrow_size * 2
 
 
.menu
  pointer-events none
  &--circle
    position absolute
    z-index 13
    width (menu_whole_size / 3 + arrow_size + 10)
    height (menu_whole_size / 3 + arrow_size + 10)
    background-color background_color
    overflow hidden
  &__active
    position relative
  &__toggle
    z-index 11
    position absolute
    top -(menu_toggle_size / 2)
    left -(menu_toggle_size / 2)
    width menu_toggle_size
    height menu_toggle_size
    background-color menu_color
    border-radius 50%
    transition transform (hamburger_animation_duration * 1.3)
    cursor pointer
    pointer-events auto
  &__listings
    z-index 10
    position absolute
    top -(menu_toggle_size)
    left -(menu_toggle_size)
    width (menu_toggle_size * 2)
    height (menu_toggle_size * 2)
    border-radius 50%
    transform scale(.1) rotate(150deg)
    transition transform hamburger_animation_duration 
  &__arrow
    visibility hidden
    position absolute
    input[type="radio"]
      position fixed
      top -99999px
      left -99999px
    ul
      padding 0
      margin 0
      list-style none
    &--top
      top .5em
      left (menu_toggle_size + arrow_size)
      .arrow
        transform rotate(-45deg)
    &--left
      top (menu_toggle_size + arrow_size)
      left .5em
      .arrow
        transform rotate(-135deg)
      

.arrow
  width arrow_size
  height arrow_size
  border-right (arrow_size / 3) solid menu_color
  border-top (arrow_size / 3) solid menu_color
  border-radius 3px      
  transition border-color .3s
  cursor pointer
  pointer-events auto
  &:hover
    border-color arrow_hover_color
    transition border-color .3s
        

li_count = 10
li_angle = 360 / li_count + 0deg
skew_angle =  -(90 - li_angle)
skew_angle_content = - skew_angle
li_angle_content = li_angle / 2

.circle
  position relative
  padding 0
  margin 0
  height 100%
  width 100%
  background-color menu_color
  border-radius 50%
  transform rotate(li_angle * (li_count / 2 - 2))
  overflow hidden
  list-style none
  li
    position absolute
    top 0
    right 0
    width 50%
    height 50%
    transform-origin 0 100%
    .placeholder
      position absolute
      left -100%
      padding-top 1.5em
      width 200%
      height 200%
      text-align center
      transform skewY(skew_angle_content) rotate(li_angle_content)
      .upside
        transform rotate(180deg)
      a
        text-decoration none
        pointer-events auto
      button
        pointer-events auto
      .button
        font-size 2.3em
        background-color transparent
        border none
        color background_color
        cursor pointer
    for i in (1..li_count)
      &:nth-child({i})
        transform: rotate(((i - 1) * li_angle)) skewY(skew_angle);
        background-color menu_color
        
#menu__active
  position fixed
  top -99999px
  left -99999px
  &:checked ~ label
    .menu__listings
      transform rotate(10deg) scale(1)
      transition transform hamburger_animation_duration 
    .menu__toggle
      background-color background_color
      transition all hamburger_animation_duration
    .hamburger
      border-color transparent
      transition border-color (hamburger_animation_duration / 3)
      &:after
        top -(hamburger_height)
        border-color menu_color
        transform translateX(-50%) rotate(45deg)
        transition-property top, transform
        transition-duration (hamburger_animation_duration / 4), hamburger_animation_duration
      &:before
        bottom -(hamburger_height)
        border-color menu_color
        transform translateX(-50%) rotate(-45deg)
        transition-property bottom, transform
        transition-duration (hamburger_animation_duration / 4), hamburger_animation_duration
    .button
      &:hover
        color icon_hover_color
    .menu__arrow
      visibility visible
      transition all hamburger_animation_duration (hamburger_animation_duration / .9)
    .menu__arrow--top
        label
          display none
        label[for="degree--up-0"]
          display block
    #degree--up
      &-0:checked 
        & ~ .menu__listings
          transform rotate(116deg)
        & ~ .menu__arrow--top
          label
            display none
          label[for="degree--up-1"]
            display block
      &-1:checked ~ .menu__listings
        transform rotate(224deg)
        & ~ .menu__arrow--top
          label
            display none
          label[for="degree--up-2"]
            display block
       
              
            
!

JS

              
                /* Inspired by https://codepen.io/k-ya/pen/evxZpZ */
              
            
!
999px

Console