Template:OUC-China.CommonCSS
From 2011.igem.org
(Difference between revisions)
(27 intermediate revisions not shown) | |||
Line 43: | Line 43: | ||
#mainnav{ | #mainnav{ | ||
top:125px; | top:125px; | ||
+ | left:10px; | ||
height: 230px; | height: 230px; | ||
width: 840px; | width: 840px; | ||
- | background:url( | + | background:url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) 0 0 no-repeat; |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
Line 67: | Line 68: | ||
background: white; | background: white; | ||
border: 1px solid #DDDDDD; | border: 1px solid #DDDDDD; | ||
- | opacity: 0. | + | opacity: 0.01; |
+ | filter: alpha(opacity=1); | ||
} | } | ||
.navmenus li:hover { | .navmenus li:hover { | ||
Line 80: | Line 82: | ||
top: 28px; | top: 28px; | ||
left: 0; | left: 0; | ||
- | z-index: | + | z-index:1111; |
+ | overflow: hidden; | ||
} | } | ||
#mainnavbar { | #mainnavbar { | ||
text-align: left; | text-align: left; | ||
- | opacity: 0. | + | opacity: 0.9; |
+ | filter: alpha(opacity=90); | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 96: | Line 100: | ||
background: white; | background: white; | ||
top: 0; | top: 0; | ||
- | z-index: | + | z-index: 2222; |
} | } | ||
Line 148: | Line 152: | ||
strVar += " <\/div>"; | strVar += " <\/div>"; | ||
strVar += " <div id=\"mainnavdrop\">"; | strVar += " <div id=\"mainnavdrop\">"; | ||
- | strVar += " <ul id=\"homenav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"homenav\" class=\"navmenus\" tag=\"0\">"; |
strVar += " <!--<li><a href=\"\/Team:OUC-China\">Home<\/a><\/li>-->"; | strVar += " <!--<li><a href=\"\/Team:OUC-China\">Home<\/a><\/li>-->"; | ||
strVar += " <\/ul>"; | strVar += " <\/ul>"; | ||
- | strVar += " <ul id=\"teamnav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"teamnav\" class=\"navmenus\" tag=\"840\">"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Team\/TeamIntro\">IGEMers introduction<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/TeamIntro\">IGEMers introduction<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Instructors\">Instructor and Adviser<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Instructors\">Instructor and Adviser<\/a><\/li>"; | ||
Line 159: | Line 163: | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Photos\">Photo gallery<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Photos\">Photo gallery<\/a><\/li>"; | ||
strVar += " <\/ul>"; | strVar += " <\/ul>"; | ||
- | strVar += " <ul id=\"projectnav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"projectnav\" class=\"navmenus\" tag=\"1680\">"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Project\/storm\">Brain storming<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/storm\">Brain storming<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Abstract\">Abstract<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Abstract\">Abstract<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Background\">Philosophical Background<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Background\">Philosophical Background<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Mp\">Modern perspective<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/Mp\">Modern perspective<\/a><\/li>"; | ||
- | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/PooSb\"> Performance on stage of Synthetic biology<\/a><\/li>"; | + | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/PooSb\/db\">Performance on stage of Synthetic biology<\/a><\/li>"; |
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Project\/prezi\">Prezi<\/a><\/li>"; | ||
strVar += " <\/ul>"; | strVar += " <\/ul>"; | ||
- | strVar += " <ul id=\"resultnav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"resultnav\" class=\"navmenus\" tag=\"2520\">"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Materials\">Materials<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Materials\">Materials<\/a><\/li>"; | ||
- | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Puf2011d\"> | + | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Puf2011d\">Previous biobricks we used<\/a><\/li>"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Protocol\">Protocol<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Protocol\">Protocol<\/a><\/li>"; | ||
- | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Notebook\"> | + | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Notebook\">Notebook & Data<\/a><\/li>"; |
- | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/aadb\"> | + | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/aadb\">Experiments on HB101<\/a><\/li>"; |
- | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/fv\"> | + | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/fv\">Experiments on devices<\/a><\/li>"; |
- | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/2011\">2011 | + | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/2011\">2011 OUC Wuxingbricks documentation<\/a><\/li>"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Finalresults\">Final results<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Finalresults\">Final results<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Judging\">Judging form<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Judging\">Judging form<\/a><\/li>"; | ||
strVar += " <\/ul>"; | strVar += " <\/ul>"; | ||
- | strVar += " <ul id=\"safetynav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"safetynav\" class=\"navmenus\" tag=\"3360\">"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Safety\/Consideration\">Human practice<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Safety\/Consideration\">Human practice<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Safety\">Safety<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Safety\">Safety<\/a><\/li>"; | ||
strVar += " <\/ul>"; | strVar += " <\/ul>"; | ||
- | strVar += " <ul id=\"othernav\" class=\"navmenus\" tag=\" | + | strVar += " <ul id=\"othernav\" class=\"navmenus\" tag=\"4200\">"; |
strVar += " <li><a href=\"\/Team:OUC-China\/Futurework\/Fa\">Foundational advance<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Futurework\/Fa\">Foundational advance<\/a><\/li>"; | ||
strVar += " <li><a href=\"\/Team:OUC-China\/Futurework\/Newapp\">New application of synthetic biology<\/a><\/li>"; | strVar += " <li><a href=\"\/Team:OUC-China\/Futurework\/Newapp\">New application of synthetic biology<\/a><\/li>"; | ||
Line 194: | Line 199: | ||
</script> | </script> | ||
<script> | <script> | ||
+ | (function($) { | ||
+ | $.extend($.fx.step,{ | ||
+ | backgroundPosition: function(fx) { | ||
+ | if (fx.state === 0){ if(typeof fx.end == 'string') { | ||
+ | var start = $.curCSS(fx.elem,'backgroundPosition'); | ||
+ | start = toArray(start); | ||
+ | fx.start = [start[0],start[2]]; | ||
+ | var end = toArray(fx.end); | ||
+ | fx.end = [end[0],end[2]]; | ||
+ | fx.unit = [end[1],end[3]]; | ||
+ | } | ||
+ | } | ||
+ | var nowPosX = []; | ||
+ | nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; | ||
+ | nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; | ||
+ | fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; | ||
+ | |||
+ | function toArray(strg){ | ||
+ | strg = strg.replace(/left|top/g,'0px'); | ||
+ | strg = strg.replace(/right|bottom/g,'100%'); | ||
+ | strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); | ||
+ | var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); | ||
+ | return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | })(jQuery); | ||
var hideSubNav = function(){ | var hideSubNav = function(){ | ||
$(".navmenus").stop(true,true).animate({opacity:0}, 200); | $(".navmenus").stop(true,true).animate({opacity:0}, 200); | ||
- | if(window.location.match("Team:OUC-China/Team"){ | + | $(".navmenus").css("height",10); |
- | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/ | + | if((window.location+"").match("Team:OUC-China/Team")){ |
- | }else if(window.location.match("Team:OUC-China/Project"){ | + | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) -840px 0 no-repeat"); |
- | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/ | + | }else if((window.location+"").match("Team:OUC-China/Project")){ |
- | }else if(window.location.match("Team:OUC-China/Result"){ | + | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) -1680px 0 no-repeat"); |
- | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/ | + | }else if((window.location+"").match("Team:OUC-China/Result")){ |
- | + | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) -2520px 0 no-repeat"); | |
- | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/ | + | }else if((window.location+"").match("Team:OUC-China/Safety")){ |
- | }else if(window.location.match("Team:OUC-China/Futurework"){ | + | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) -3360px 0 no-repeat"); |
- | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/ | + | }else if((window.location+"").match("Team:OUC-China/Futurework")){ |
+ | $("#mainnav").css("background","url(https://static.igem.org/mediawiki/2011/3/3b/OUC-China.daohang.jpg.jpg) -4200px 0 no-repeat"); | ||
} | } | ||
} | } | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
- | + | hideSubNav(); | |
$(".navitem").mouseenter(function(){ | $(".navitem").mouseenter(function(){ | ||
$(".navmenus").stop(true,true).animate({opacity:0}, 200); | $(".navmenus").stop(true,true).animate({opacity:0}, 200); | ||
- | + | $(".navmenus").css("height","auto"); | |
$($(this).attr("href")).stop(true,true).animate({opacity:0.9}, 200); | $($(this).attr("href")).stop(true,true).animate({opacity:0.9}, 200); | ||
var bg = $($(this).attr("href")).attr("tag"); | var bg = $($(this).attr("href")).attr("tag"); | ||
- | $("#mainnav").animate({ | + | $("#mainnav").stop().animate({backgroundPosition:"(-"+bg+"px 0px)"}, {duration:200,easing:'swing'}); |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}); | }); | ||
$(".navitem").click(function(){ | $(".navitem").click(function(){ | ||
+ | if($(this).attr("href")=="#homenav"){ | ||
+ | window.location="https://2011.igem.org/Team:OUC-China"; | ||
+ | } | ||
return false; | return false; | ||
}); | }); | ||
Line 228: | Line 260: | ||
hideSubNav(); | hideSubNav(); | ||
}); | }); | ||
- | $(". | + | $(".mainnav").mouseleave(function(){ |
hideSubNav(); | hideSubNav(); | ||
}); | }); |
Latest revision as of 15:41, 5 October 2011