Radial menu

index.html

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<section>
  <div class="nav">
    <ul class="radial-nav">
    <li data-content="js"><a href="#">JS</a></li>
    <li data-content="css"><a href="#">CSS</a></li>
    <li data-content="html5"><a href="#">HTML5</a></li>
    <li data-content="jade"><a href="#">JADE</a></li>
    <li data-content="git"><a href="#">GIT</a></li>
    <li data-content="grunt"><a href="#">GRUNT</a></li>
    <li data-content="yo"><a href="#">YO</a></li>
    <li data-content="gulp"><a href="#">GULP</a></li>
    <li class="menu"><span class="icon-menu"></span></li>
  </ul>
  </div>  
  <section class="content">
    <article class="item" id="grunt">
      <h1>Grunt: the task runner</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="jade">
      <h1>Jade: A Node templating engine</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="css">
      <h1>CSS3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="git">
      <h1>GIT: Version control</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="gulp">
      <h1>GULP: An other task runner</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="yo">
      <h1>YO</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
    <article class="item" id="js">
      <h1>JS</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ad laudantium ullam nobis magni, molestiae, nisi doloribus fugiat quam, quo odio ex sequi eum recusandae tempore optio! Veniam, mollitia soluta.</p>
    </article>
  </section>
</section>

radial-menu.markdown

Radial menu

A Pen by Carlos on CodePen.

License.

script.js

$(document).ready(function(){
  function radialMenu() {
    $('.radial-nav').on('click', function(evt){
      evt.stopPropagation();    
      $('.nav, .item').removeClass('active');
      $(this).toggleClass('expanded');
      $(this).find('li').removeClass('selected');
    });
    
    $('.radial-nav li').not('.menu').click(function(evt){
      evt.stopPropagation();
      $(this).addClass('selected');
      $('.nav').addClass('active');
      $('.radial-nav').removeClass('expanded');
      getContent(this);
    });    

    function getContent(elem){
      $('#'+$(elem).attr('data-content')).addClass('active');
    }
  }
  radialMenu();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

* {
  font-family: "Lato" !important;
}
.nav {
  width: 500px;
  height: 500px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  float: left;
  position:relative;
  margin-right:20px;
  &:before {
    content: "";
    display: inline-block;
    height:100%;
    vertical-align: middle;
  }
  &:after {
    content:"";
    display: inline-block;
    position: absolute;
    bottom:0;
    right:0;
    top:100%;
    border-right:1px solid rgb(62, 94, 223);
    transition: all 0.5s;
    transition-delay: 0.5s;
  }
  &.active {
    &:after {
      top:0;
    }
  }
}
.radial-nav {
  position: relative;
  display: inline-block;
  width:70px;
  height:70px;
  -webkit-transform-origin: center center;
  .menu{
      border: none !important;
      position:relative;
      width:70px;
      height:70px;
      z-index:100;
      transition: all 0.5s;
      display: table-cell;
      vertical-align: middle;
      &:active {
        -webkit-transform: rotate(-15deg);
      }
    }
  li:not(.menu) {
    position: absolute;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius:70px;
    border: 1px solid transparent;    
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.5s;
    z-index:1;
    &.selected {
        -webkit-transform: rotate(0deg) translateX(120px) rotate(-0deg);
        border: 1px solid #5151F1;
        a {opacity:1;}
     }
    
    &:before {
      content:"";
      display:inline-block;
      vertical-align:middle;
      height:100%;
    }
    a{
      display:inline-block;
      vertical-align:middle;
      opacity:0;
      -webkit-transition: all 0.5s;
    }
  }
  &.expanded { 
  
    li:not(.menu) {
      border: 1px solid #5151F1;
      &:hover {
        background-color: #5151F1;
      }
    }
    li:nth-child(1) {
      -webkit-transform: translateY(-120px);
    }
    li:nth-child(2) {
      -webkit-transform: rotate(-45deg) translateX(120px) rotate(45deg);
    }
    li:nth-child(3) {
      -webkit-transform: translateX(120px);
    }
    li:nth-child(4) {
      -webkit-transform: rotate(45deg) translateX(120px) rotate(-45deg);
    }
    li:nth-child(5) {
      -webkit-transform: translateY(120px);
    }
    li:nth-child(6) {
      -webkit-transform: rotate(135deg) translateX(120px) rotate(-135deg);
    }
    li:nth-child(7) {
      -webkit-transform: rotate(180deg) translateX(120px) rotate(-180deg);
    }
    li:nth-child(8) {
      -webkit-transform: rotate(225deg) translateX(120px) rotate(-225deg);
    }
     li {
       a{
         opacity: 1;
       }
     }
    .icon-menu {
      border-color: #5151F1;
      -webkit-transform: rotate(90deg);
      &:before {
        border-color:#5151F1;
      }
    }
    .menu{
      &:active {
        -webkit-transform: rotate(15deg) !important;
      }
    }
  }
 }

.icon-menu {
  display: inline-block;
  border-top: 3px solid #141444;
  border-bottom: 3px solid #141444;
  width: 30px;
  height:30px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  &:before {
    content: "";
    display: inline-block;
    border-bottom: 3px solid #141444;
    width:100%;
    -webkit-transition: all 0.3s;
  }
  &:hover {
    border-color: #00003A;
    &:before {
      border-color:#00003A;
    }
  }
}
html,body{
  height:100%;
  background-color: rgb(45, 45, 194); 
}
a{
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body {
  color: rgb(209, 209, 209);
}

.content {
  padding-top:65px;
  overflow:hidden;
  .item {
    opacity:0;
    transition: all 0.5s;
    transition-delay: 1.3s;
    position: absolute;
    &.active {
      opacity:1;
      position:static;
    }
    h1 {
      font-size:25px;
      margin-bottom: 0.3em;
    }
  }
}