<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,300,300i,400,400i,500,500i,600,600i" rel="stylesheet">
<div class="radialContainer">
    <ul id="circleThisMenu" style="position: fixed!important;top:37%;left:35%;">
        <li class="ancestor"><a href="">Work</a></li>
        <li class="ancestor"><a href="">Services</a></li>
        <li class="ancestor"><a href="">About</a></li>
        <li class="ancestor"><a href="">Contact</a></li>
        <li><a href="" data-title="Lace Experiment"><img class="img-resp" src="images/lace-preview.jpg" alt=""></a><a href="" data-title="Logo Revamp"><img class="img-resp" src="images/logo-renew-preview.jpg" alt=""></a><a href="" data-title="Logo Challenge - Week 1"><img class="img-resp" src="images/logo1-preview.jpg" alt=""></a></li>
        <li><a href="" data-title="Washer Machine Experiment"><img class="img-resp" src="images/machine-preview.gif" alt=""></a><a href="" data-title="Orbits Experiment"><img class="img-resp" src="images/orbits-preview.gif" alt=""></a></li>
        <li class="parent"><a href="">Skills &amp; Services</a></li>
        <li class="child"><a href="">Web Design</a></li>
        <li class="child"><a href="">Web Development</a></li> 
        <li class="child"><a href="">Web Editing</a></li>
        <li class="child"><a href="">Writing</a></li>
        <li class="parent"><a>Languages / Tools</a></li>
        <li class="child"><a>HTML5</a></li>
        <li class="child"><a>CSS3</a></li>
        <li class="child"><a>JavaScript</a></li>
        <li class="child"><a>jQuery</a></li>
        <li class="child"><a>AJAX</a></li>
        <li class="child"><a>JSON</a></li>
        <li class="child"><a>PHP</a></li> 
    </ul>                                                
</div>
.radialContainer {position: fixed;z-index: 1998;transform: translate(-33%) rotate(120deg);top:calc(33% - 10px);left:75%;}
ul#circleThisMenu a {text-decoration: none;}
ul#circleThisMenu a.image {position: static;z-index: 0;display:inline-block;width: 23px;height: 23px;line-height: 21px;overflow: visible;border:1px solid rgb(0,0,0);margin-right: 5px;background: rgb(107,175,162);}
ul#circleThisMenu a.image:after {position: absolute;z-index: 2;content: attr(data-title);font-size: 13px;bottom:12.5%;left:100%;opacity: 0;}
ul#circleThisMenu a.image:hover:after {opacity: 1;}
ul#circleThisMenu li a.image:not(:hover) img {opacity: .7;}
ul#circleThisMenu li {line-height: 23px!important;}
ul#circleThisMenu li a {font-size: 16px;font-family: 'Montserrat Ultra', sans-serif;color: rgb(0,0,0);font-weight: 200;text-transform: uppercase;}
ul#circleThisMenu li.parent a {font-family: 'Montserrat', sans-serif;font-weight: 400!important;font-size: 15px;}
ul#circleThisMenu li.child a {font-size: 15px;}
function wrapAround(element, elementSize, elementAnglePoints) {
    var circle = element;
    var circleWidth = elementSize;
    var interpolations = elementAnglePoints;
    var items = circle.children('li');
    $(element).children('li').wrapInner('<span><span></span></span>');
    $(element).find('img').closest('a').addClass('image');
    $(element).css({
        'max-width':elementSize+'px',
        'width':elementSize+'px',
        'max-height':elementSize+'px',
        'height':elementSize+'px',
        'overflow':'visible',
        'list-style-type':'none',
        'padding':'0',
        'border':'none',
        'border-radius':'50%'
    });
    for(var i = 0; i < items.length; i++) {
        var item = items[i];
        var getItemDegree = (360/interpolations)*i;
        $(element).children('li:nth-child('+(i+1)+')').css({
            'position': 'absolute',
            'width': '100%',
            'height': 'auto',
            'white-space': 'nowrap',
            'overflow': 'visible',
            'transform':'translate('+circleWidth/2+'px) rotate('+getItemDegree+'deg) scale(-1)',
            '-webskit-transform':'translate('+circleWidth/2+'px) rotate('+getItemDegree+'deg) scale(-1)',
            '-moz-transform':'translate('+circleWidth/2+'px) rotate('+getItemDegree+'deg) scale(-1)',
            'display': 'block',
            'text-align': 'right',
            'top': '50%',
            'right': '50%',
            'line-height': circleWidth/interpolations+'%'
        });
        $(element).children('li').children('span').css({
            'position': 'absolute',
            'unicode-bidi':'bidi-override',
            'direction':'rtl',
            'transform': 'scaleX(-1)',
            '-webskit-transform': 'scaleX(-1)',
            '-moz-transform': 'scaleX(-1)'       
        });
        $(element).children('li').children('span').children('span').css({
            'position': 'absolute',
            'unicode-bidi':'bidi-override',
            'direction':'ltr',
            'transform': 'scaleX(-1)',
            '-webskit-transform': 'scaleX(-1)',
            '-moz-transform': 'scaleX(-1)'       
        });     
    }
}

wrapAround($('#circleThisMenu'), 480, 45);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.