Team:NYMU-Taipei/Templates/Header
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<!---top---> | <!---top---> | ||
<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"> | ||
+ | $(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: '180px',width: '823px',left: '0px',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:'0px',width:'425px',left:'400px',top:'180px'},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"> | ||
#n11 | #n11 | ||
{ | { | ||
Line 31: | Line 79: | ||
color: #000; | color: #000; | ||
} | } | ||
+ | |||
+ | |||
+ | 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: #000000;} | ||
+ | |||
+ | #footer-box { | ||
+ | width:900px;} | ||
+ | |||
+ | |||
+ | |||
+ | .firstHeading { | ||
+ | display: none;} | ||
+ | |||
+ | #content { | ||
+ | width: 900px; | ||
+ | border: none; | ||
+ | font-family: helvetica, arial, sans-serif; | ||
+ | color: #555555} | ||
+ | |||
+ | #title { | ||
+ | width:900px; | ||
+ | height:55px; | ||
+ | position: relative; | ||
+ | top: 0px; | ||
+ | left: 0px;} | ||
+ | |||
+ | #paralogo { | ||
+ | width:400px; | ||
+ | height:50px; | ||
+ | position: relative; | ||
+ | top: 0px; | ||
+ | left: 20px;} | ||
+ | |||
+ | #implogo { | ||
+ | width:200px; | ||
+ | height:50px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 435px;} | ||
+ | |||
+ | #igemlogo { | ||
+ | width:84px; | ||
+ | height:50px; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:615px;} | ||
+ | |||
+ | #csynbilogo { | ||
+ | width:140px; | ||
+ | height:35px; | ||
+ | position:absolute; | ||
+ | top:-10px; | ||
+ | left:695px;} | ||
+ | |||
+ | #csbl { | ||
+ | width:140px; | ||
+ | height:35px;} | ||
+ | |||
+ | #belink { | ||
+ | width:200px; | ||
+ | height:16px; | ||
+ | position: absolute; | ||
+ | top: 25px; | ||
+ | font-size:1em; | ||
+ | left: 697px; | ||
+ | font-weight:500;} | ||
+ | |||
+ | #belink a { | ||
+ | text-decoration:none;} | ||
+ | |||
+ | #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: 0px; | ||
+ | left: 0px;} | ||
+ | |||
+ | #menuback { | ||
+ | width:120px; | ||
+ | height:180px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: -1px; | ||
+ | background-color: #999 | ||
+ | } | ||
+ | |||
+ | #headpic { | ||
+ | width:832px; | ||
+ | height:180px; | ||
+ | position: absolute; | ||
+ | top: | ||
+ | 0px; | ||
+ | left: 75px; | ||
+ | background-image: url(http://gel.ym.edu.tw/~evelyn132/demo3/out.png); | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | #headover { | ||
+ | width: 1px; | ||
+ | height:0; | ||
+ | position: absolute; | ||
+ | top: 183px; | ||
+ | left: 833px; | ||
+ | background-image: url(http://gel.ym.edu.tw/~evelyn132/demo3/heatop.png); | ||
+ | background-repeat: repeat-y; | ||
+ | background-position: 0px 0px; | ||
+ | margin-top: 0px; | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | outline:none;} | ||
+ | |||
+ | #headtit{ | ||
+ | font-family: helvetica, arial, sans-serif; | ||
+ | font-size: 1.2em; | ||
+ | color: #ffffff; | ||
+ | position: absolute; | ||
+ | top: 1px; | ||
+ | right: 23px; | ||
+ | } | ||
+ | |||
+ | .dark{ | ||
+ | color: #dddddd;} | ||
+ | |||
+ | .highlight{ | ||
+ | color: #ea8828;} | ||
+ | |||
+ | #menulist{ | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #menulist li{ | ||
+ | height: 30px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #menulist li a{ | ||
+ | font-weight: 100; | ||
+ | font-size: 1.2em; | ||
+ | text-decoration: none; | ||
+ | font-family: helvetica, arial, sans-serif; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #headover ul{ | ||
+ | list-style: none; | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 0.2em; | ||
+ | left: 0.2em; | ||
+ | } | ||
+ | |||
+ | #headover ul ul{ | ||
+ | position: absolute; | ||
+ | width:10em; | ||
+ | top:-0.2em; | ||
+ | left: 10em; | ||
+ | list-style:none;} | ||
+ | |||
+ | #headover ul li{ | ||
+ | height: 2em; | ||
+ | } | ||
+ | |||
+ | #headover ul li a{ | ||
+ | font-weight: 110; | ||
+ | font-size: 1.2em; | ||
+ | text-decoration: none; | ||
+ | font-family: helvetica, arial, sans-serif; | ||
+ | color: #dddddd;} | ||
+ | |||
</style> | </style> | ||
+ | </head> | ||
<body> | <body> | ||
Line 44: | Line 308: | ||
</table> | </table> | ||
</div> | </div> | ||
- | <div class="grpelem" id="n11"> | + | <div class="grpelem" id="n11"></div> |
- | < | + | <div id='menu'> |
- | < | + | <div id='menuback'> |
- | < | + | <ul id='menulist'> |
- | < | + | <li><a href='#' class='listhead' id='project'>Idea</a></li> |
- | + | <li><a href='#' class='listhead' id='test2'>Design</a></li> | |
- | + | <li><a href='#' class='listhead' id='test3'>Result</a></li> | |
- | < | + | <li><a href='#' class='listhead' id='test3'>STS</a></li> |
- | + | <li><a href='#' class='listhead' id='test3'>About Us</a></li> | |
- | < | + | |
- | + | ||
- | < | + | |
- | </ | + | |
- | </ | + | |
- | </div> | + | </ul> |
+ | </div> | ||
+ | <div id='headpic'> | ||
+ | <div id='headover'> | ||
+ | <p id='headtit'><span class='dark'> <span class='highlight'>|</span> </span></p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | < | + | </body> |
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Revision as of 08:50, 6 September 2011
Tailoring Your Avatara wireless neuro-stimulator |
---|