Team:NJU China

From 2013.igem.org

(Difference between revisions)
Line 4: Line 4:
<meta charset="UTF-8" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
 +
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Circular Navigation - Demo 2 | Codrops</title>
<title>Circular Navigation - Demo 2 | Codrops</title>
Line 10: Line 11:
<meta name="author" content="Sara Soueidan for Codrops" />
<meta name="author" content="Sara Soueidan for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="../favicon.ico">
 +
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
-
<style type="text/css">
+
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
-
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
+
<STYLE type="text/css">
-
</style>
+
-
 
+
-
<style type="text/css">
+
/* hiding the top section*/
/* hiding the top section*/
body{position:absolute; top:0px; width:100%; height:1480px;}
body{position:absolute; top:0px; width:100%; height:1480px;}
Line 142: Line 141:
/* end menu (edit, page ...) */
/* end menu (edit, page ...) */
 +
 +
/* HEADER STYLES: banner, navbar, etc. */
 +
 +
ul#nav {
 +
width:1200px;
 +
margin:0 0 0 30px;
 +
position:relative;
 +
}
 +
 +
#nav li {
 +
 +
color: #FFFFFF;
 +
background-color:none;
 +
margin: 0 50px 0 30px;
 +
float: left;
 +
position: relative;
 +
list-style: none;
 +
text-transform:uppercase;
 +
}
 +
#nav li:last-child { margin:0; }
 +
 +
 +
/* dropdown */
 +
#nav li:hover > ul {
 +
/*display: block;*/
 +
opacity:1;
 +
margin:0;
 +
background-color: none;
 +
z-index:0;
 +
}
 +
 +
/* level 2 list */
 +
#nav ul {
 +
/*display: none;*/
 +
opacity:0;
 +
margin: 200px 0 0 0;
 +
padding: 70px 0 0 0;
 +
width: 205px;
 +
position: absolute;
 +
left: 0;
 +
z-index:-1;
 +
-webkit-transition-duration:0.5s;
 +
-moz-transition-duration:0.5s;
 +
-o-transition-duration:0.5s;
 +
}
 +
#nav ul li {
 +
float: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#nav ul a {
 +
font-weight: normal;
 +
/*text-shadow: 0 1px 0 #fff;*/
 +
}
 +
 +
 +
</STYLE>
 +
 +
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
 +
 +
 +
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
@font-face {
Line 305: Line 367:
background: rgba(0,0,0,0.05);
background: rgba(0,0,0,0.05);
font-family: 'Lato', Arial, sans-serif;
font-family: 'Lato', Arial, sans-serif;
-
}
 
-
 
-
.component > h2 {
 
-
position: absolute;
 
-
overflow: hidden;
 
-
width: 100%;
 
-
text-align: center;
 
-
text-transform: uppercase;
 
-
white-space: nowrap;
 
-
font-weight: 300;
 
-
font-style: italic;
 
-
font-size: 12em;
 
-
opacity: 0.1;
 
-
cursor: default;
 
-
}
 
-
 
-
.cn-button {
 
-
position: absolute;
 
-
top: 100%;
 
-
left: 50%;
 
-
z-index: 11;
 
-
margin-top: -2.25em;
 
-
margin-left: -2.25em;
 
-
padding-top: 0em;
 
-
width: 4.5em;
 
-
height: 4.5em;
 
-
border: none;
 
-
border-radius: 50%;
 
-
background: none;
 
-
background-color: #fff;
 
-
color: #52be7f;
 
-
text-align: center;
 
-
font-weight: 700;
 
-
font-size: 1.5em;
 
-
text-transform: uppercase;
 
-
cursor: pointer;
 
-
-webkit-backface-visibility: hidden;
 
-
}
 
-
 
-
.csstransforms .cn-wrapper {
 
-
position: absolute;
 
-
top: 100%;
 
-
left: 50%;
 
-
z-index: 10;
 
-
margin-top: -13em;
 
-
margin-left: -13.5em;
 
-
width: 27em;
 
-
height: 27em;
 
-
border-radius: 50%;
 
-
background: transparent;
 
-
opacity: 0;
 
-
-webkit-transition: all .3s ease 0.3s;
 
-
-moz-transition: all .3s ease 0.3s;
 
-
transition: all .3s ease 0.3s;
 
-
-webkit-transform: scale(0.1);
 
-
-ms-transform: scale(0.1);
 
-
-moz-transform: scale(0.1);
 
-
transform: scale(0.1);
 
-
pointer-events: none;
 
-
overflow: hidden;
 
-
}
 
-
 
-
/*cover to prevent extra space of anchors from being clickable*/
 
-
.csstransforms .cn-wrapper:after{
 
-
  content:".";
 
-
  display:block;
 
-
  font-size:2em;
 
-
  width:6.2em;
 
-
  height:6.2em;
 
-
  position: absolute;
 
-
  left: 50%;
 
-
  margin-left: -3.1em;
 
-
  top:50%;
 
-
  margin-top: -3.1em;
 
-
  border-radius: 50%;
 
-
  z-index:10;
 
-
  color: transparent;
 
-
}
 
-
 
-
.csstransforms .opened-nav {
 
-
border-radius: 50%;
 
-
opacity: 1;
 
-
-webkit-transition: all .3s ease;
 
-
-moz-transition: all .3s ease;
 
-
transition: all .3s ease;
 
-
-webkit-transform: scale(1);
 
-
-moz-transform: scale(1);
 
-
-ms-transform: scale(1);
 
-
transform: scale(1);
 
-
pointer-events: auto;
 
-
}
 
-
 
-
.csstransforms .cn-wrapper li {
 
-
position: absolute;
 
-
top: 50%;
 
-
left: 50%;
 
-
overflow: hidden;
 
-
margin-top: -1.3em;
 
-
margin-left: -10em;
 
-
width: 10em;
 
-
height: 10em;
 
-
font-size: 1.5em;
 
-
-webkit-transition: all .3s ease;
 
-
-moz-transition: all .3s ease;
 
-
transition: all .3s ease;
 
-
-webkit-transform: rotate(76deg) skew(60deg);
 
-
-moz-transform: rotate(76deg) skew(60deg);
 
-
-ms-transform: rotate(76deg) skew(60deg);
 
-
transform: rotate(76deg) skew(60deg);
 
-
-webkit-transform-origin: 100% 100%;
 
-
-moz-transform-origin: 100% 100%;
 
-
transform-origin: 100% 100%;
 
-
pointer-events: none;
 
-
}
 
-
 
-
.csstransforms .cn-wrapper li a {
 
-
position: absolute;
 
-
right: -7.25em;
 
-
bottom: -7.25em;
 
-
display: block;
 
-
width: 14.5em;
 
-
height: 14.5em;
 
-
border-radius: 50%;
 
-
background: #429a67;
 
-
background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
 
-
background: -moz-radial-gradient(transparent 35%, #429a67 35%);
 
-
background: radial-gradient(transparent 35%, #429a67 35%);
 
-
color: #fff;
 
-
text-align: center;
 
-
text-decoration: none;
 
-
font-size: 1.2em;
 
-
line-height: 2;
 
-
-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
 
-
-moz-transform: skew(-60deg) rotate(-75deg) scale(1);
 
-
-ms-transform: skew(-60deg) rotate(-75deg) scale(1);
 
-
transform: skew(-60deg) rotate(-75deg) scale(1);
 
-
-webkit-backface-visibility: hidden;
 
-
backface-visibility: hidden;
 
-
pointer-events: auto;
 
-
}
 
-
 
-
.csstransforms .cn-wrapper li a span {
 
-
position: relative;
 
-
top: 1.8em;
 
-
display: block;
 
-
font-size: .5em;
 
-
font-weight: 700;
 
-
text-transform: uppercase;
 
-
}
 
-
 
-
.csstransforms .cn-wrapper li a:hover,
 
-
.csstransforms .cn-wrapper li a:active,
 
-
.csstransforms .cn-wrapper li a:focus {
 
-
background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
 
-
background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
 
-
background: radial-gradient(transparent 35%, #449e6a 35%);
 
-
}
 
-
 
-
.csstransforms .opened-nav li {
 
-
-webkit-transition: all .3s ease .3s;
 
-
-moz-transition: all .3s ease .3s;
 
-
transition: all .3s ease .3s;
 
-
}
 
-
 
-
.csstransforms .opened-nav li:first-child {
 
-
-webkit-transform: rotate(-20deg) skew(60deg);
 
-
-moz-transform: rotate(-20deg) skew(60deg);
 
-
-ms-transform: rotate(-20deg) skew(60deg);
 
-
transform: rotate(-20deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav li:nth-child(2) {
 
-
-webkit-transform: rotate(12deg) skew(60deg);
 
-
-moz-transform: rotate(12deg) skew(60deg);
 
-
-ms-transform: rotate(12deg) skew(60deg);
 
-
transform: rotate(12deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav  li:nth-child(3) {
 
-
-webkit-transform: rotate(44deg) skew(60deg);
 
-
-moz-transform: rotate(44deg) skew(60deg);
 
-
-ms-transform: rotate(44deg) skew(60deg);
 
-
transform: rotate(44deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav li:nth-child(4) {
 
-
-webkit-transform: rotate(76deg) skew(60deg);
 
-
-moz-transform: rotate(76deg) skew(60deg);
 
-
-ms-transform: rotate(76deg) skew(60deg);
 
-
transform: rotate(76deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav li:nth-child(5) {
 
-
-webkit-transform: rotate(108deg) skew(60deg);
 
-
-moz-transform: rotate(108deg) skew(60deg);
 
-
-ms-transform: rotate(108deg) skew(60deg);
 
-
transform: rotate(108deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav li:nth-child(6) {
 
-
-webkit-transform: rotate(140deg) skew(60deg);
 
-
-moz-transform: rotate(140deg) skew(60deg);
 
-
-ms-transform: rotate(140deg) skew(60deg);
 
-
transform: rotate(140deg) skew(60deg);
 
-
}
 
-
 
-
.csstransforms .opened-nav li:nth-child(7) {
 
-
-webkit-transform: rotate(172deg) skew(60deg);
 
-
-moz-transform: rotate(172deg) skew(60deg);
 
-
-ms-transform: rotate(172deg) skew(60deg);
 
-
transform: rotate(172deg) skew(60deg);
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper {
 
-
overflow: hidden;
 
-
margin: 10em auto;
 
-
padding: .5em;
 
-
text-align: center;
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper ul {
 
-
display: inline-block;
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper li {
 
-
float: left;
 
-
width: 5em;
 
-
height: 5em;
 
-
background-color: #fff;
 
-
text-align: center;
 
-
font-size: 1em;
 
-
line-height: 5em;
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper li a {
 
-
display: block;
 
-
width: 100%;
 
-
height: 100%;
 
-
color: inherit;
 
-
text-decoration: none;
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper li a:hover,
 
-
.no-csstransforms .cn-wrapper li a:active,
 
-
.no-csstransforms .cn-wrapper li a:focus {
 
-
background-color: #f8f8f8;
 
-
}
 
-
 
-
.no-csstransforms .cn-wrapper li.active a{
 
-
background-color: #6F325C;
 
-
color: #fff;
 
-
}
 
-
 
-
.no-csstransforms .cn-button {
 
-
display: none;
 
}
}
Line 602: Line 409:
</style>
</style>
-
<script language="Javascript">
 
-
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 
-
* Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
 
-
*/
 
-
;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)u[c[d]]=c[d]in k;return u.list&&(u.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),u}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),t[a[d]]=!!e;return t}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={svg:"http://www.w3.org/2000/svg"},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="<svg/>",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
 
-
 
-
</script>
 
</head>
</head>
<body>
<body>
<div class="container">
<div class="container">
-
<!-- Top Navigation -->
 
-
<div class="codrops-top clearfix">
 
-
 
-
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16114"><span>Back to the Codrops Article</span></a></span>
 
-
</div>
 
<header>
<header>
<h1>Circular Navigation <span>Building a Circular Navigation with CSS Transforms</span></h1>
<h1>Circular Navigation <span>Building a Circular Navigation with CSS Transforms</span></h1>
</header>
</header>
 +
            <!--Start NavBar-->
 +
<ul id="nav">
 +
    <li><a href="https://2013.igem.org/Team:NJU_China">Home</a></li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Team">Team</a></li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Project">Project</a>
 +
        <ul>
 +
  <li><a href="http://https://2013.igem.org/Team:NJU_China/Project#Overall_project">Project Overview</a></li>
 +
          <li><a https://2013.igem.org/Team:NJU_China/Project#Project_Details">Project Details</a></li>
 +
          <li><a https://2013.igem.org/Team:NJU_China/Project#Part_2">Part2</a></li>
 +
          <li><a https://2013.igem.org/Team:NJU_China/Project#The_Experiments">The_Experiments</a></li>
 +
          <li><a https://2013.igem.org/Team:NJU_China/Project#Part_3">Part3</a></li>
 +
          <li><a https://2013.igem.org/Team:NJU_China/Project#Results">Results</a></li>
 +
        </ul>
 +
    </li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Parts">Parts</a></li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Modeling">Modeling</a></li>
 +
   
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Notebook">Notebook</a></li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Safety">Safety</a></li>
 +
 +
    <li><a href="https://2013.igem.org/Team:NJU_China/Attributions">Attributions</a></li>
 +
   
 +
</ul>
 +
<!--End NavBar-->
<div class="component">
<div class="component">
-
<!-- Start Nav Structure -->
 
-
<button class="cn-button" id="cn-button">Menu</button>
 
-
<div class="cn-wrapper" id="cn-wrapper">
 
-
<ul>
 
-
<li><a href="#"><span>About</span></a></li>
 
-
<li><a href="#"><span>Tutorials</span></a></li>
 
-
<li><a href="#"><span>Articles</span></a></li>
 
-
<li><a href="#"><span>Snippets</span></a></li>
 
-
<li><a href="#"><span>Plugins</span></a></li>
 
-
<li><a href="#"><span>Contact</span></a></li>
 
-
<li><a href="#"><span>Follow</span></a></li>
 
-
</ul>
 
-
</div>
 
-
<!-- End of Nav Structure -->
 
</div>
</div>
<section>
<section>
Line 645: Line 455:
</section>
</section>
</div><!-- /container -->
</div><!-- /container -->
-
<script language="Javascript">
 
-
/*!
 
-
* classie - class helper functions
 
-
* from bonzo https://github.com/ded/bonzo
 
-
*
 
-
* classie.has( elem, 'my-class' ) -> true/false
 
-
* classie.add( elem, 'my-new-class' )
 
-
* classie.remove( elem, 'my-unwanted-class' )
 
-
* classie.toggle( elem, 'my-class' )
 
-
*/
 
-
 
-
/*jshint browser: true, strict: true, undef: true */
 
-
/*global define: false */
 
-
 
-
( function( window ) {
 
-
 
-
'use strict';
 
-
 
-
// class helper functions from bonzo https://github.com/ded/bonzo
 
-
 
-
function classReg( className ) {
 
-
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 
-
}
 
-
 
-
// classList support for class management
 
-
// altho to be fair, the api sucks because it won't accept multiple classes at once
 
-
var hasClass, addClass, removeClass;
 
-
 
-
if ( 'classList' in document.documentElement ) {
 
-
  hasClass = function( elem, c ) {
 
-
    return elem.classList.contains( c );
 
-
  };
 
-
  addClass = function( elem, c ) {
 
-
    elem.classList.add( c );
 
-
  };
 
-
  removeClass = function( elem, c ) {
 
-
    elem.classList.remove( c );
 
-
  };
 
-
}
 
-
else {
 
-
  hasClass = function( elem, c ) {
 
-
    return classReg( c ).test( elem.className );
 
-
  };
 
-
  addClass = function( elem, c ) {
 
-
    if ( !hasClass( elem, c ) ) {
 
-
      elem.className = elem.className + ' ' + c;
 
-
    }
 
-
  };
 
-
  removeClass = function( elem, c ) {
 
-
    elem.className = elem.className.replace( classReg( c ), ' ' );
 
-
  };
 
-
}
 
-
 
-
function toggleClass( elem, c ) {
 
-
  var fn = hasClass( elem, c ) ? removeClass : addClass;
 
-
  fn( elem, c );
 
-
}
 
-
 
-
var classie = {
 
-
  // full names
 
-
  hasClass: hasClass,
 
-
  addClass: addClass,
 
-
  removeClass: removeClass,
 
-
  toggleClass: toggleClass,
 
-
  // short names
 
-
  has: hasClass,
 
-
  add: addClass,
 
-
  remove: removeClass,
 
-
  toggle: toggleClass
 
-
};
 
-
 
-
// transport
 
-
if ( typeof define === 'function' && define.amd ) {
 
-
  // AMD
 
-
  define( classie );
 
-
} else {
 
-
  // browser global
 
-
  window.classie = classie;
 
-
}
 
-
 
-
})( window );
 
-
// EventListener | @jon_neal | //github.com/jonathantneal/EventListener
 
-
!window.addEventListener && window.Element && (function () {
 
-
    function addToPrototype(name, method) {
 
-
        Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
 
-
    }
 
-
 
-
    var registry = [];
 
-
 
-
    addToPrototype("addEventListener", function (type, listener) {
 
-
        var target = this;
 
-
 
-
        registry.unshift({
 
-
            __listener: function (event) {
 
-
                event.currentTarget = target;
 
-
                event.pageX = event.clientX + document.documentElement.scrollLeft;
 
-
                event.pageY = event.clientY + document.documentElement.scrollTop;
 
-
                event.preventDefault = function () { event.returnValue = false };
 
-
                event.relatedTarget = event.fromElement || null;
 
-
                event.stopPropagation = function () { event.cancelBubble = true };
 
-
                event.relatedTarget = event.fromElement || null;
 
-
                event.target = event.srcElement || target;
 
-
                event.timeStamp = +new Date;
 
-
 
-
                listener.call(target, event);
 
-
            },
 
-
            listener: listener,
 
-
            target: target,
 
-
            type: type
 
-
        });
 
-
 
-
        this.attachEvent("on" + type, registry[0].__listener);
 
-
    });
 
-
 
-
    addToPrototype("removeEventListener", function (type, listener) {
 
-
        for (var index = 0, length = registry.length; index < length; ++index) {
 
-
            if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
 
-
                return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
 
-
            }
 
-
        }
 
-
    });
 
-
 
-
    addToPrototype("dispatchEvent", function (eventObject) {
 
-
        try {
 
-
            return this.fireEvent("on" + eventObject.type, eventObject);
 
-
        } catch (error) {
 
-
            for (var index = 0, length = registry.length; index < length; ++index) {
 
-
                if (registry[index].target == this && registry[index].type == eventObject.type) {
 
-
                    registry[index].call(this, eventObject);
 
-
                }
 
-
            }
 
-
        }
 
-
    });
 
-
})();
 
-
 
-
 
-
</script>
 
-
<script language="Javascript">
 
-
(function(){
 
-
 
-
var button = document.getElementById('cn-button'),
 
-
    wrapper = document.getElementById('cn-wrapper');
 
-
 
-
    //open and close menu when the button is clicked
 
-
var open = false;
 
-
button.addEventListener('click', handler, false);
 
-
 
-
function handler(){
 
-
  if(!open){
 
-
    this.innerHTML = "Close";
 
-
    classie.add(wrapper, 'opened-nav');
 
-
  }
 
-
  else{
 
-
    this.innerHTML = "Menu";
 
-
classie.remove(wrapper, 'opened-nav');
 
-
  }
 
-
  open = !open;
 
-
}
 
-
function closeWrapper(){
 
-
classie.remove(wrapper, 'opened-nav');
 
-
}
 
-
 
-
})();
 
-
</script>
 
</body>
</body>
</html>
</html>

Revision as of 20:16, 25 September 2013

<!DOCTYPE html> Circular Navigation - Demo 2 | Codrops

Circular Navigation Building a Circular Navigation with CSS Transforms

Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.

Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.

Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli. Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.

Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.

Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli.