CSS Ring + SASS-Config

Motivation: Trying to understand the CSS structure of http://www.cssplay.co.uk/menus/cssplay-ring-v2.html TODO: Make flexible nr. of fragments work Findings (you guessed it): SVG is much more easy.

by Jens Grochtdreis

HTML

<div class="nav-ring">
            <div class="ring-wrapper">
                <div class="ring-base"></div>
                <div class="ring-shadow"></div>
                <div class="ring-inner">
                    Circle
                </div>

                <ul class="ring-fragments">
                    <li class="fragment fragment-1 is-active"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-2"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-3"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-4"><div class="fragment-content"></div></li>
                    <li class="last"></li>
                </ul>

                <ul class="ring-fragment-contents">
                    <li class="fragment fragment-1 is-active"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-2"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-3"><div class="fragment-content"></div></li>
                    <li class="fragment fragment-4"><div class="fragment-content"></div></li>
                </ul>

            </div>
        </div>

SCSS

/* -----------------------------------------
    Ring Config
----------------------------------------- */

$nav-outer-ring-diameter: 660;
$nav-ring-thickness: 100;
$nav-inner-ring-diameter: $nav-outer-ring-diameter - ($nav-ring-thickness * 2);
$nav-outer-ring-gradient-start: $nav-inner-ring-diameter;
$nav-ring-fragment-diameter: $nav-outer-ring-diameter / 2;

body {
    background: #ccc;
}

.nav-ring {
    position: relative;
    margin: 0 auto;
    width: #{$nav-outer-ring-diameter}px;
}

.ring-wrapper {
    position: relative;
}

.ring-wrapper .ring-base {
    position: relative;
    top: 0;
    left: 0;

    border-radius: #{$nav-outer-ring-diameter}px;
    width: #{$nav-outer-ring-diameter}px;
    height: #{$nav-outer-ring-diameter}px;

    background: -moz-radial-gradient(#f2f2f2 0, #fff 660px);
    background: -webkit-radial-gradient(#f2f2f2 0, #fff 660px);
    background: -ms-radial-gradient(#f2f2f2 0, #fff 660px);
    background: -o-radial-gradient(#f2f2f2 0, #fff 660px);
    background: radial-gradient(#f2f2f2 0, #fff 660px);
}

.ring-shadow {
    position: absolute;
    top: 0;
    left: 0;

    border-radius: #{$nav-outer-ring-diameter}px;
    width: #{$nav-outer-ring-diameter}px;
    height: #{$nav-outer-ring-diameter}px;

    box-shadow:0 0 8px rgba(20,20,20,.10);
}

.ring-inner {
    position: absolute;
    top: #{$nav-ring-thickness}px;
    left: #{$nav-ring-thickness}px;

    width: #{$nav-inner-ring-diameter}px;
    height: #{$nav-inner-ring-diameter}px;

    border-radius: #{$nav-inner-ring-diameter}px;
    z-index: 20;

    color: #fff;
    text-align: center;
    line-height: #{$nav-inner-ring-diameter}px;
}

.ring-inner:after {
    content: "";
    width: #{$nav-inner-ring-diameter}px;
    height: #{$nav-inner-ring-diameter}px;
    border-radius:#{$nav-inner-ring-diameter}px;
    background: #ccc;
    box-shadow: inset 0 0 8px rgba(19,20,20,.10);
    position: absolute;
    top: 0;
    left: 0;
}


.ring-fragments,
.ring-fragment-contents {
 ...

JavaScript

// Original: http://jsfiddle.net/4ZT7V/3/