VenDiagram-asMenu_stage2

by spacexplorer

HTML

<script src="http://s.cdpn.io/33073/TweenMax.min.js"></script>
<script src="http://eightmedia.github.io/hammer.js/dist/jquery.hammer.min.js"></script>
<div id="mainColumn">
<!-- begin nav -->  
<div class="multiNavigation">
<ul>
    <li class="pm"><a href="#" class="active" alt="PM">Project Management</a>
        <ul>
            <li><a href="#">Planning & Programming Services</a>
                <ul>
                    <li><a href="#">Masterplanning 
                        <span class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>
                        </a>
                    </li>
                    <li><a href="#">Tender & construction programmes 
                        <span class="description"><img src="http://placehold.it/120x100&text=120x120"/>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span>
                        </a>
                    </li>
                    <li><a href="#">Schematic design and cost advice 
                        <span class="description"><p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p><p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p></span>
                        </a>
                    </li>
                    <li><a href="#">As-built programmes</a></li>
                    <li><a href="#">Programme updates & revisions</a></li>
                    <li><a href="#">Construction methodologies</a></li>
                    <li><a href="#">Preparation and defence of EOT claims 
          ...

CSS

html, body{
  background:#444;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: #fff;
  
}
.element{
  width:10px;
  height:13px;
  background:#00f;
  position:absolute;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  color:#FFF;
}
#mainContainer{
  width:220px;
  height:220px;
  position:absolute;
  border:solid 2px #000;
  background:#999;
  bottom: 0px;
  right: 0px;
}
#elemContainer{
  position:relative;
  width:210px;
  height:210px;
  margin:5px;
  /*background:#FFF;*/
}


/*---jaco----*/


#console {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 200px;
  background-color: rgba(0,0,0,.25);
  font-color: #fff;  
  font-family: "Verdana";
  font-size: 9px;
  overflow: scroll;
  overflow: auto;
overflow-x: hidden;
  overflow-y:scroll
}


.cell{
  
width: 20%;  
  float: right;
  position: relative;
  height: 500px;
  background-color: rgba(200,100,200,.1);
}

div#mainColumn {
  position: relative;
  float: left;
  width: 80%;
  min-height: 100%;
  background-color: rgba(80,180,0,.1);
  float: left;
  overflow: hidden;
}

div#venDiagram {
  position: relative;
  background-color: rgba(100,100,100,.15);
  width: 100%;
  height: auto;
  float: right;
  overflow: visible;
  border: 1px solid #fff;
  /*zoom: 2;*/
  
  
}



div#pmCircle, div#ppCircle, div#ccCircle, div#cqCircle {
  width: 100px;
  height:100px;
  position: absolute;
  left: 35px;
  top: 0px;
  z-index: 24;
  /*border: 2px dashed rgba(255,255,255,0.5);*/
}

div#pmCircle > div.circle, 
div#ppCircle > div.circle, 
div#ccCircle > div.circle, 
div#cqCircle > div.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(235,0,0,1.00);
  opacity: .4;
  position: absolute;
  left: 0px;
  top: 0px;
  /*border: 2px dashed rgba(255,255,255,0.5);*/
}

div#pmCircle > div.line1, 
div#ppCircle > div.line1, 
div#ccCircle > div.line1, 
div#cqCircle  > div.line1,
div#pmCircle > div.line2,...

JavaScript

$(document).ready(function(){

    test("1. start - ");
    
 setupVenDiagram();
  setupSwipeOnVenD();
  
  $(window).resize(function() {
    resizeVenDiagram();
    //fireAnotherFunction();
});
  
  
 /* 
var amount = 4,
    // indRotation = 0 / amount,
    indRotation = (0 / amount)-90,
    element,
    elemContainer = $("div#elemContainer"),
    btn1 = $("button#btn1"),
    path = [{x:0,y:0},{x:100,y:-100},{x:200,y:0},{x:100,y:100},{x:0,y:0}],
    location = {x:path[0].x,y:path[0].y},
    tn1 = TweenMax.to(location, amount, {bezier:{curviness:1.5, values:path}, ease:Linear.easeNone}),
    tn2 = TweenMax.to(elemContainer, 5, {rotation:360,paused:true,ease:Linear.easeNone});    

for(i = 0; i < amount; i++)
{
    tn1.time(i)
    console.log(location.x + ' // ' + location.y);
    element = '<div class="element" id="element' + i + '">1</div>';
    elemContainer.append(element);
    TweenMax.set($("div#element" + i), {x:location.x,y:location.y + 100,rotation:((indRotation * i )- 90)})
}
 
btn1.click(function()
{
    tn2.play(0);  
});
  

*/
});
/*
#pmCircle, #ppCircle, #ccCircle, #cqCircle
#venDiagram
*/


var circleDiam = 100;
var cirleRatio = .57;
var circleOffset;
var $pp;
var $cq;
var $cc;
var $pm;
var $venDiagram;
var $venWidth;

//test
var $console;


function setupVenDiagram(){
  console.log("setupVenDiagram 3");
  $console = $("div#console");
  
  circleOffset = (1 - cirleRatio)/2;
  
  
  test("setupVenDiagram 3");
  
  
  
  
$pm = $("div#pmCircle");
$cq = $("div#cqCircle");
$cc = $("div#ccCircle");
$pp = $("div#ppCircle");
$venDiagram = $("div#venDiagram");

//$pm.css("width","100px");
  /*
  $pm.css({
    "width":"100px",
           "height":"100px"
          });
  */
  
//corresponding GSAP transform (tweened over 2 seconds):
  //TweenLite.to($pm, 2, {rotationZ:45, left:"-=150"});
  /*
  TweenLite.to($cq, 2, {rotationZ:-90});
  TweenLite.to($cc, 2, {rotationZ:-90});
  TweenLite.to($pp, 2, {rotationZ:-90});
  TweenLite.to($pm, 2, {rotationZ:-90});
 ...