Team:KAIST/header
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <head> |
- | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
- | <script type="text/javascript" | + | <script type="text/javascript"> |
- | + | $(document).ready(function(){ | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $(function(){ | |
- | + | var path = location.pathname.substring(1); | |
- | + | var last = path.split("/"); | |
- | + | if ( last[1] ) { | |
- | + | $('#headover ul li a[href*="' + last[1] + '"]').addClass("curlink").css("color","#ea8828"); | |
- | } | + | } |
+ | else { | ||
+ | $('#headover ul li a[href$="' + path + '"]').addClass("curlink").css("color","#ea8828"); | ||
+ | } | ||
+ | }); | ||
- | # | + | $('#menuback').mouseover(function() { |
- | + | $('#headover').stop().animate({height:'150px',top:'0px'},1000); | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | # | + | $('#menu').mouseleave(function() { |
- | + | $('.listhead').not('.curlink').css("color","#ffffff"); | |
- | + | $('.listmain').not('.curlink').css("color","#dddddd"); | |
- | + | $('#headover ul').fadeOut(500); | |
- | + | $('#headover').stop().animate({height:'50px',top:'100px'},1000); | |
- | } | + | }); |
- | + | $('.listhead').mouseover(function(){ | |
- | + | $('.listhead').not('.curlink').css("color","#ffffff"); | |
- | + | $(this).css("color","#444444"); | |
- | + | $('#headover ul').css("display","none"); | |
- | + | var vActive = $(this).attr("id"); | |
- | + | $('.'+vActive).stop(true, true).fadeIn(500); | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | $('.listmain').mouseover(function(){ | |
- | + | $('.listmain').not('.curlink').css("color","#dddddd"); | |
- | + | $(this).css("color","#ea8828"); | |
- | + | }); | |
- | } | + | |
- | # | + | $('#headover').mouseleave(function(){ |
- | + | $('.listmain').not('.curlink').css("color","#dddddd"); | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | }); | |
- | + | </script> | |
- | + | <style type="text/css"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | a:link {color:#20548f;} | |
- | + | a:visited {color:#20548f;} | |
- | } | + | a:hover {color:#20548f;} |
+ | a:active {color:#20548f;} | ||
- | # | + | #top-section { |
- | + | background-color: #ffffff; | |
- | + | height: 100px; | |
- | + | border: none; | |
- | + | width:910px; | |
- | + | height:20px} | |
- | } | + | |
- | + | #p-logo { | |
- | + | position: absolute; | |
- | } | + | display: none;} |
- | # | + | #search-controls { |
- | + | display: none;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | # | + | #menubar.left-menu { |
- | + | position: absolute; | |
- | + | top:0px; | |
- | + | left:0px;} | |
- | + | ||
- | } | + | |
- | . | + | #menubar.right-menu { |
- | + | position: absolute; | |
- | } | + | top:0px; |
+ | right:0px;} | ||
- | |||
- | |||
- | |||
- | |||
- | # | + | #menubar a:active,#menubar a:hover,#menubar a:link,#menubar a:visited { |
- | color: # | + | color: #000000;} |
- | } | + | |
- | #footer | + | #footer-box { |
- | + | width:900px;} | |
- | + | ||
- | } | + | |
- | + | body { | |
- | + | background-color: #555555} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | .firstHeading { | |
+ | display: none;} | ||
- | # | + | #content { |
- | + | width: 900px; | |
- | + | border: none; | |
- | + | font-family: helvetica, arial, sans-serif; | |
- | + | color: #555555} | |
- | } | + | |
- | # | + | #title { |
- | width: | + | width:900px; |
- | + | height:55px; | |
- | } | + | position: relative; |
+ | top: 0px; | ||
+ | left: 0px;} | ||
- | # | + | #paralogo { |
- | width: | + | width:400px; |
- | height:0px; | + | height:50px; |
- | } | + | position: relative; |
+ | top: 0px; | ||
+ | left: 20px;} | ||
- | # | + | #implogo { |
- | width: | + | width:200px; |
- | height: | + | height:50px; |
- | + | position: absolute; | |
- | + | top: 0px; | |
- | } | + | left: 435px;} |
- | # | + | #igemlogo { |
- | width: | + | width:84px; |
- | + | height:50px; | |
- | + | position:absolute; | |
- | + | top:0px; | |
- | + | left:615px;} | |
- | } | + | |
- | # | + | #csynbilogo { |
- | width: | + | width:140px; |
- | height: | + | height:35px; |
- | + | position:absolute; | |
- | + | top:-10px; | |
- | + | left:695px;} | |
- | + | ||
- | } | + | |
- | + | #csbl { | |
+ | width:140px; | ||
+ | height:35px;} | ||
- | # | + | #belink { |
- | + | width:200px; | |
- | + | height:16px; | |
- | + | position: absolute; | |
- | + | top: 25px; | |
- | font-size: | + | font-size:1em; |
- | + | left: 697px; | |
- | } | + | font-weight:500;} |
- | # | + | #belink a { |
- | + | text-decoration:none;} | |
- | + | ||
- | + | ||
- | text- | + | |
- | + | ||
- | } | + | |
- | # | + | #mblink { |
- | + | width:205px; | |
- | + | height:16px; | |
- | } | + | position: absolute; |
+ | top: 42px; | ||
+ | font-size:1em; | ||
+ | left: 697px; | ||
+ | font-weight:500;} | ||
- | # | + | #mblink a { |
- | + | text-decoration:none;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | # | + | #menu { |
- | + | width:900px; | |
- | + | height:150px; | |
- | } | + | position: relative; |
+ | top: 20px; | ||
+ | left: 0px;} | ||
- | # | + | #menuback { |
- | + | width:100px; | |
- | } | + | height:150px; |
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | background-color: #ea8828} | ||
- | + | #headpic { | |
+ | width:800px; | ||
+ | height:150px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 100px; | ||
+ | background-image: url(''); } | ||
+ | #headover { | ||
+ | width: 800px; | ||
+ | height:50px; | ||
+ | position: absolute; | ||
+ | top: 100px; | ||
+ | left: 0px; | ||
+ | background: url('') 0px 0px no-repeat; } | ||
- | + | a { | |
- | + | outline:none;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | # | + | #headtit{ |
- | + | font-family: helvetica, arial, sans-serif; | |
- | + | font-size: 1.2em; | |
- | + | color: #ffffff; | |
- | + | position: absolute; | |
- | + | top: 0.5em; | |
- | + | right: 1.4em;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | .dark{ | |
- | + | color: #dddddd;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | .highlight{ | |
- | + | color: #ea8828;} | |
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | # | + | #menulist{ |
- | + | position: absolute; | |
- | + | top: 16px; | |
- | + | left: 3px; | |
- | + | list-style: none;} | |
- | + | ||
- | + | ||
- | } | + | |
- | + | #menulist li{ | |
+ | height: 30px; | ||
+ | } | ||
- | + | #menulist li a{ | |
- | + | font-weight: 100; | |
- | + | font-size: 1.2em; | |
- | + | text-decoration: none; | |
- | + | font-family: helvetica, arial, sans-serif; | |
- | + | color: #ffffff;} | |
- | + | ||
- | } | + | |
- | + | #headover ul{ | |
- | + | list-style: none; | |
- | + | display: none; | |
- | + | position: absolute; | |
- | + | top: 1.2em; | |
- | + | left: 0.2em; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | display | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | #headover ul ul{ | |
+ | position: absolute; | ||
+ | width:10em; | ||
+ | top:-0.2em; | ||
+ | left: 10em; | ||
+ | list-style:none;} | ||
- | + | #headover ul li{ | |
- | + | height: 2.4em; | |
- | + | } | |
- | + | ||
+ | #headover ul li a{ | ||
+ | font-weight: 100; | ||
+ | font-size: 1.2em; | ||
+ | text-decoration: none; | ||
+ | font-family: helvetica, arial, sans-serif; | ||
+ | color: #dddddd;} | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id='title'> | ||
+ | <div id='paralogo'> | ||
+ | <a href=''> | ||
+ | <img src=''> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div id='implogo'> | ||
+ | <a href=''> | ||
+ | <img src=''> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div id='igemlogo'> | ||
+ | <a href='https://2010.igem.org/Main_Page'> | ||
+ | <img src='https://static.igem.org/mediawiki/2010/7/7d/ICLlogo2.png'> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div id='csynbilogo'> | ||
+ | <a href=''> | ||
+ | <img id="" src=''> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div id='belink'> | ||
+ | <a href=''></a> | ||
+ | </div> | ||
+ | <div id='mblink'> | ||
+ | <a href=''></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id='menu'> | ||
+ | <div id='menuback'> | ||
+ | <ul id='menulist'> | ||
+ | <li><a href='#' class='listhead' id='project'></a></li> | ||
+ | <li><a href='#' class='listhead' id='plan'></a></li> | ||
+ | <li><a href='#' class='listhead' id='results'></a></li> | ||
+ | <li><a href='#' class='listhead' id='extra'></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id='headpic'> | ||
+ | <div id='headover'> | ||
+ | <p id='headtit'>Parasight<span class='dark'> <span class='highlight'>|</span> Parasite detection with a rapid response</span></p> | ||
+ | <ul class='project'> | ||
+ | <li><a href=''class='listmain' id='results'></a></li> | ||
+ | <li><a href=''class='listmain' id='results'></a></li> | ||
+ | <li><a href=''class='listmain' id='results'></a></li> | ||
+ | <li><a href='https://2010.igem.org/Team:Imperial_College_London/Chassis' class='listmain' id='results'>Chassis</a></li> | ||
+ | </ul> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 08:05, 14 June 2011