Template:OUC-China.CommonCSS
From 2011.igem.org
(Difference between revisions)
Line 39: | Line 39: | ||
content: "."; | content: "."; | ||
} | } | ||
+ | </style> | ||
+ | <style> | ||
+ | #mainnav{ | ||
+ | margin-top:125px; | ||
+ | height: 230px; | ||
+ | width: 840px; | ||
+ | background:url(home.jpg) top center no-repeat; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | #mainnav a{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #mainnav a:hover{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #mainnav ul, .navmenus li{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .navmenus{ | ||
+ | display: inline; | ||
+ | width: 138px; | ||
+ | float: left; | ||
+ | background: white; | ||
+ | border: 1px solid #DDDDDD; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | .navmenus li:hover { | ||
+ | background: #EEEEEE; | ||
+ | } | ||
+ | #mainnav li{ | ||
+ | padding: 5px; | ||
+ | border-bottom: 1px solid #DDDDDD; | ||
+ | } | ||
+ | #mainnavdrop{ | ||
+ | position: absolute; | ||
+ | top: 28px; | ||
+ | left: 0; | ||
+ | z-index:1; | ||
+ | } | ||
+ | #mainnavbar { | ||
+ | text-align: left; | ||
+ | opacity: 0.8; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #mainnavbar li{ | ||
+ | padding: 5px 0; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 138px; | ||
+ | text-align: center; | ||
+ | background: white; | ||
+ | top: 0; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | #navitem1{ | ||
+ | left: 1px; | ||
+ | } | ||
+ | #navitem2{ | ||
+ | left: 141px; | ||
+ | } | ||
+ | #navitem2 a, #teamnav a{ | ||
+ | color: #c7b635; | ||
+ | } | ||
+ | #navitem3{ | ||
+ | left: 281px; | ||
+ | } | ||
+ | #navitem3 a, #projectnav a{ | ||
+ | color: #87430b; | ||
+ | } | ||
+ | #navitem4{ | ||
+ | left: 421px; | ||
+ | } | ||
+ | #navitem4 a, #resultnav a{ | ||
+ | color: green; | ||
+ | } | ||
+ | #navitem5{ | ||
+ | left: 561px; | ||
+ | } | ||
+ | #navitem5 a, #safetynav a{ | ||
+ | color:#5225a0; | ||
+ | } | ||
+ | #navitem6{ | ||
+ | left: 701px; | ||
+ | } | ||
+ | #navitem6 a, #othernav a{ | ||
+ | color: #2d7eed; | ||
+ | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | var addNav = function(){ | ||
+ | var strVar=""; | ||
+ | strVar += " <div id=\"mainnav\">"; | ||
+ | strVar += " <div id=\"mainnavbar\">"; | ||
+ | strVar += " <ul>"; | ||
+ | strVar += " <li id=\"navitem1\"><a class=\"navitem\" href=\"#homenav\">Home<\/a><\/li>"; | ||
+ | strVar += " <li id=\"navitem2\"><a class=\"navitem\" href=\"#teamnav\">Team<\/a><\/li>"; | ||
+ | strVar += " <li id=\"navitem3\"><a class=\"navitem\" href=\"#projectnav\">Project<\/a><\/li>"; | ||
+ | strVar += " <li id=\"navitem4\"><a class=\"navitem\" href=\"#resultnav\">Methods & Results<\/a><\/li>"; | ||
+ | strVar += " <li id=\"navitem5\"><a class=\"navitem\" href=\"#safetynav\">Consideration<\/a><\/li>"; | ||
+ | strVar += " <li id=\"navitem6\"><a class=\"navitem\" href=\"#othernav\">Future Work<\/a><\/li>"; | ||
+ | strVar += " <\/ul>"; | ||
+ | strVar += " <\/div>"; | ||
+ | strVar += " <div id=\"mainnavdrop\">"; | ||
+ | strVar += " <ul id=\"homenav\" class=\"navmenus\" tag=\"Home.jpg\">"; | ||
+ | strVar += " <!--<li><a href=\"\/Team:OUC-China\">Home<\/a><\/li>-->"; | ||
+ | strVar += " <\/ul>"; | ||
+ | strVar += " <ul id=\"teamnav\" class=\"navmenus\" tag=\"team.jpg\">"; | ||
+ | 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#cop\">Collaborator<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Instructors#sup\">Support and thanks<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Instructors#mp\">Mutual help with other teams<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Team\/Photos\">Photo gallery<\/a><\/li>"; | ||
+ | strVar += " <\/ul>"; | ||
+ | strVar += " <ul id=\"projectnav\" class=\"navmenus\" tag=\"projects.jpg\">"; | ||
+ | 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\/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\/PooSb\"> Performance on stage of Synthetic biology<\/a><\/li>"; | ||
+ | strVar += " <\/ul>"; | ||
+ | strVar += " <ul id=\"resultnav\" class=\"navmenus\" tag=\"result.jpg\">"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Materials\">Materials<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Puf2011d\">Part used from 2011 distribution<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Protocol\">Protocol<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/Notebook\">Note book<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/aadb\">amino acid deficient bacteria<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/fv\">function verification<\/a><\/li>"; | ||
+ | strVar += " <li><a href=\"\/Team:OUC-China\/Result\/2011\">2011 Biobrick standardization and documentation<\/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 += " <\/ul>"; | ||
+ | strVar += " <ul id=\"safetynav\" class=\"navmenus\" tag=\"Consideration.jpg\">"; | ||
+ | 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 += " <\/ul>"; | ||
+ | strVar += " <ul id=\"othernav\" class=\"navmenus\" tag=\"futurework.jpg\">"; | ||
+ | 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 += " <\/ul>"; | ||
+ | strVar += " <\/div>"; | ||
+ | strVar += " <\/div>"; | ||
+ | return strVar; | ||
+ | } | ||
$("#menubar.right-menu ul li:first-child").before("<li><a href='https://2011.igem.org/Main_Page'>iGEM HQ</a></li>"); | $("#menubar.right-menu ul li:first-child").before("<li><a href='https://2011.igem.org/Main_Page'>iGEM HQ</a></li>"); | ||
- | $("#content").before("<div id='gTop'><a href='/Team:OUC-China'></a></div>"); | + | $("#content").before("<div id='gTop'><a href='/Team:OUC-China'></a>"+addNav()+"</div>"); |
$(document).ready(function(){$('a,input[type="submit"]').bind('focus',function(){if(this.blur){ this.blur();}});}); | $(document).ready(function(){$('a,input[type="submit"]').bind('focus',function(){if(this.blur){ this.blur();}});}); | ||
+ | </script> | ||
+ | <script> | ||
+ | var hideSubNav = function(){ | ||
+ | $(".navmenus").stop(true,true).animate({opacity:0}, 200); | ||
+ | $("#mainnav").css("background","url(Home.jpg) top center no-repeat"); | ||
+ | } | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $(".navmenus").stop(true,true).animate({opacity:0}, 200); | ||
+ | $(".navitem").mouseenter(function(){ | ||
+ | $(".navmenus").stop(true,true).animate({opacity:0}, 200); | ||
+ | console.log("done"); | ||
+ | $($(this).attr("href")).stop(true,true).animate({opacity:0.9}, 200); | ||
+ | var bg = $($(this).attr("href")).attr("tag"); | ||
+ | $("#mainnav").animate({opacity:0.5}, 200,function(){ | ||
+ | $("#mainnav").css("background","url("+bg+") top center no-repeat"); | ||
+ | $("#mainnav").animate({opacity:1}, 200); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | $(".navitem").click(function(){ | ||
+ | return false; | ||
+ | }); | ||
+ | $(".navmenus").mouseleave(function(){ | ||
+ | hideSubNav(); | ||
+ | }); | ||
+ | $(".mainnavbar").mouseleave(function(){ | ||
+ | hideSubNav(); | ||
+ | }); | ||
+ | }); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 03:10, 5 October 2011