Team:ETH Zurich/Templates/HeaderNew

From 2011.igem.org

(Difference between revisions)
 
(309 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/wiki/images/c/c4/Jquery.swfobject.1-1-1.min.txt"></script>
<script type="text/javascript" src="/wiki/images/c/c4/Jquery.swfobject.1-1-1.min.txt"></script>
-
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script>
+
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
-
<link rel="stylesheet" href="https://2011.igem.org/Team:ETH_Zurich/Templates/StyleSheetNew?action=raw&amp;ctype=text/css" type="text/css" />
+
<script type="text/javascript" src="https://2011.igem.org/Team:ETH_Zurich/Templates/HeaderNew/SearchJS?action=raw&ctype=text/javascript">
 +
</script>
<script type="text/javascript">
<script type="text/javascript">
-
/*
+
$('head').append('<meta content="IE=edge" http-equiv="X-UA-Compatible">');
-
function restoreMenu(fadeOutOnly)
+
</script>
-
{
+
-
$('.submenu').stop(true,  true).fadeOut(200);
+
-
for (key in colors)
+
-
{
+
-
obj = $('#' + key);
+
-
obj.children().stop(true).animate({color: colors[key]}, 500);
 
-
obj.stop(true).animate({ backgroundColor: '#FFFFFF' }, 500);
 
-
}
 
-
 
-
if (!fadeOutOnly)
 
-
{
 
-
if (currSection != "{{{currSection}}}")
 
-
{
 
-
var obj = $('#' + currSection);
 
-
obj.stop(true).animate({ backgroundColor: colors[currSection] }, 500);
 
-
obj.children().stop(true).animate({color: 'white'}, 500);
 
-
$('#headpic').stop(true).delay(200).animate({ backgroundColor: colors[currSection]}, 500);
 
-
$('.'+currSection+'Sub').stop(true).delay(400).fadeIn(500);
 
-
}
 
-
}
 
-
}
 
-
 
-
 
-
$(document).ready( function()
 
-
{
 
-
 
-
    $(function()
 
-
{
 
-
restoreMenu(false);
 
-
    });
 
-
 
-
 
-
    $('#menu').mouseleave(function() {
 
-
// restoreMenu(false);
 
-
    });
 
-
 
-
    $('#menulist li').mouseover(function(){
 
-
// $('.listhead').not('.curlink').css("color","#ffffff");
 
-
 
-
var foo = $(this).attr('id');
 
-
if (foo != lastPage)
 
-
{
 
-
  $('#overlayFront').stop(true).css('background-image', $('#overlay').css('background-image'));
 
-
  $('#overlayFront').stop(true).animate({opacity: 1}, 0);
 
-
  $('#overlay').stop(true).animate({opacity: 0}, 0);
 
-
  $('#overlay').stop(true).css('background-image', 'url(' + backgrounds[foo] + ')');
 
-
 
 
-
  $('#overlayFront').stop(true).animate({opacity: 0}, 500);
 
-
  $('#overlay').stop(true).delay(400).animate({opacity: 1}, 500);
 
-
 
-
  lastPage = foo;
 
-
}
 
-
 
-
 
-
restoreMenu(true);
 
-
 
-
$(this).stop(true).animate({ backgroundColor: colors[foo] }, 500);
 
-
$(this).children().stop(true).animate({color: 'white'}, 500);
 
-
 
-
$('#headpic').stop(true).delay(200).animate({ backgroundColor: colors[foo]}, 500);
 
-
 
-
 
-
 
-
var vActive = $(this).attr("id");
 
-
$('.'+vActive+'Sub').stop(true).delay(400).fadeIn(500);
 
-
    });
 
-
 
-
$('.listmain').mouseover(function(){
 
-
$(this).stop(true).animate({color: '#FFFFFF'}, 200);
 
-
    });
 
-
$('.listmain').mouseleave(function(){
 
-
$(this).stop(true).animate({color: '#DDDDDD'}, 200);
 
-
    });
 
-
 
-
});
 
-
*/
 
-
</script>
 
 +
<link rel="stylesheet" href="https://2011.igem.org/Team:ETH_Zurich/Templates/StyleSheetNew?action=raw&ctype=text/css" type="text/css" />
<style type="text/css">
<style type="text/css">
 +
</html> {{{css|}}} <html>
-
 
+
.toc
-
 
+
-
 
+
-
/**
+
-
* Horizontal CSS Drop-Down Menu Module
+
-
*
+
-
* @file dropdown.css
+
-
* @package Dropdown
+
-
* @version 0.7.1
+
-
* @type Transitional
+
-
* @stacks 597-599
+
-
* @browsers Windows: IE6+, Opera7+, Firefox1+
+
-
* Mac OS: Safari2+, Firefox2+
+
-
*
+
-
* @link http://www.lwis.net/
+
-
* @copyright 2006-2008 Live Web Institute. All Rights Reserved.
+
-
*
+
-
*/
+
-
 
+
-
ul.dropdown,
+
-
ul.dropdown li,
+
-
ul.dropdown ul {
+
-
list-style: none;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
ul.dropdown {
+
-
position: relative;
+
-
z-index: 597;
+
-
float: left;
+
-
}
+
-
 
+
-
ul.dropdown li {
+
-
float: left;
+
-
line-height: 1.3em;
+
-
vertical-align: middle;
+
-
zoom: 1;
+
-
}
+
-
 
+
-
ul.dropdown li.hover,
+
-
ul.dropdown li:hover {
+
-
position: relative;
+
-
z-index: 599;
+
-
cursor: default;
+
-
}
+
-
 
+
-
ul.dropdown ul {
+
-
visibility: hidden;
+
-
position: absolute;
+
-
top: 100%;
+
-
left: 0;
+
-
z-index: 598;
+
-
width: 100%;
+
-
}
+
-
 
+
-
ul.dropdown ul li {
+
-
float: none;
+
-
}
+
-
 
+
-
ul.dropdown ul ul {
+
-
top: 1px;
+
-
left: 99%;
+
-
}
+
-
 
+
-
ul.dropdown li:hover > ul {
+
-
visibility: visible;
+
-
}
+
-
 
+
-
 
+
-
/**
+
-
* Vimeo.com CSS Drop-Down Menu Theme
+
-
*
+
-
* @file default.css
+
-
* @name Vimeo
+
-
* @version beta
+
-
* @type transitional
+
-
* @browsers Windows: IE5+, Opera9+, Firefox1+
+
-
* Mac OS: Safari2+, Firefox2+
+
-
*
+
-
* @link http://www.lwis.net/
+
-
* @copyright 2009 Live Web Institute. All Rights Reserved.
+
-
*
+
-
*/
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Base Drop-Down Styling
+
-
*/
+
-
 
+
-
 
+
-
ul.dropdown {
+
-
background: transparent url(images/box1-bottom-left.png) 0 100% no-repeat;
+
-
font: normal 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
+
-
}
+
-
 
+
-
ul.dropdown li {
+
-
padding: 5px 10px;
+
-
background-color: #172322;
+
-
color: #fff;
+
-
line-height: 22px;
+
-
white-space: nowrap;
+
-
}
+
-
 
+
-
ul.dropdown li.first {
+
-
padding-left: 15px;
+
-
background: transparent url(images/box1-bottom2.png) 0 100% no-repeat;
+
-
}
+
-
 
+
-
ul.dropdown li.last {
+
-
padding-right: 15px;
+
-
background: transparent url(images/box1-bottom2.png) 100% 100% no-repeat;
+
-
}
+
-
 
+
-
ul.dropdown li.hover,
+
-
ul.dropdown li:hover {
+
-
color: #b0d730;
+
-
}
+
-
 
+
-
ul.dropdown a:link,
+
-
ul.dropdown a:visited { color: #fff; text-decoration: none; }
+
-
ul.dropdown a:hover { color: #b0d730; }
+
-
ul.dropdown a:active { color: #0395cc; }
+
-
 
+
-
 
+
-
/* -- level mark -- */
+
-
 
+
-
ul.dropdown ul {
+
-
left: -21px;
+
-
width: 150px;
+
-
padding: 0 16px;
+
-
background: url(images/box1-top.png) 50% 0 no-repeat;
+
-
}
+
-
 
+
-
ul.dropdown li.last ul {
+
-
left: auto;
+
-
right: 16px;
+
-
}
+
-
 
+
-
ul.dropdown ul li {
+
-
height: auto;
+
-
padding: 5px 15px;
+
-
line-height: 1.3em;
+
-
white-space: normal;
+
-
}
+
-
 
+
-
ul.dropdown ul li.first {
+
-
padding-left: 0;
+
-
background: #172322;
+
-
}
+
-
 
+
-
ul.dropdown ul li.last {
+
-
padding-bottom: 10px;
+
-
background: transparent url(images/box1-bottom.png) 50% 100% no-repeat;
+
-
}
+
-
 
+
-
ul.dropdown ul li.first ul {
+
-
top: 0;
+
-
padding: 0 16px 0 0;
+
-
background-image: url(images/box1-outwards-top-right.png);
+
-
}
+
-
 
+
-
ul.dropdown ul li.first li.first {
+
-
background-image: none;
+
-
}
+
-
 
+
-
ul.dropdown ul li.last {
+
-
padding-right: 0;
+
-
}
+
-
 
+
-
ul.dropdown ul li.last ul {
+
-
left: 100%;
+
-
right: auto;
+
-
top: -16px;
+
-
}
+
-
 
+
-
/* -- level mark -- */
+
-
 
+
-
ul.dropdown ul ul {
+
-
top: -12px;
+
-
left: 100%;
+
-
padding: 16px 0 0;
+
-
background: transparent url(images/box1-top-left.png) 0 0 no-repeat;
+
-
}
+
-
 
+
-
ul.dropdown ul ul li.first {
+
-
padding-top: 10px;
+
-
background: #172322 url(images/box1-top-right.png) 100% 0 no-repeat;
+
-
}
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Search Form
+
-
*/
+
-
 
+
-
ul.dropdown form * {
+
-
display: inline;
+
-
float: left;
+
-
}
+
-
 
+
-
ul.dropdown form label {
+
-
display: none;
+
-
}
+
-
 
+
-
ul.dropdown form input.text {
+
-
width: 143px;
+
-
height: 18px;
+
-
padding: 2px 25px 2px 5px;
+
-
border-width: 0;
+
-
background: transparent url(images/bg_search-field.png) 0 0 no-repeat;
+
-
color: #969696;
+
-
font: normal 14px/17px Tahoma, Verdana, Arial, Helvetica, sans-serif;
+
-
vertical-align: middle;
+
-
}
+
-
 
+
-
ul.dropdown form input.text:focus {
+
-
outline: none;
+
-
}
+
-
 
+
-
ul.dropdown form input.button {
+
-
position: relative;
+
-
margin: 4px 0 0 -20px;
+
-
}
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Support Class `dir`
+
-
*/
+
-
 
+
-
 
+
-
ul.dropdown *.dir {
+
-
padding-right: 20px;
+
-
background-image: url(images/nav-arrow-down.png);
+
-
background-position: 100% 50%;
+
-
background-repeat: no-repeat;
+
-
}
+
-
 
+
-
 
+
-
/* -- Components override -- */
+
-
 
+
-
ul.dropdown-horizontal ul *.dir {
+
-
padding-right: 15px;
+
-
background-image: url(images/nav-arrow-right.png);
+
-
background-position: 95% 50%;
+
-
background-repeat: no-repeat;
+
-
}
+
-
/**
+
-
* Default Advanced CSS Drop-Down Menu Theme
+
-
*
+
-
* @file default.advanced.css
+
-
* @name Default
+
-
* @version beta
+
-
* @type transitional
+
-
* @browsers Windows: IE5+, Opera9+, Firefox1+
+
-
* Mac OS: Safari2+, Firefox2+
+
-
*
+
-
* @link http://www.lwis.net/
+
-
* @copyright 2008 Live Web Institute. All Rights Reserved.
+
-
*
+
-
*/
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Base Style Extension
+
-
*/
+
-
 
+
-
ul.dropdown li a {
+
-
display: block;
+
-
padding: 5px 10px;
+
-
}
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Base Style Override
+
-
*/
+
-
 
+
-
ul.dropdown li, ul.dropdown ul li {
+
-
padding: 0;
+
-
}
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Base Style Reinitiate: post-override activities
+
-
*/
+
-
 
+
-
ul.dropdown li.dir {
+
-
padding: 5px 20px 5px 10px;
+
-
}
+
-
 
+
-
ul.dropdown ul li.dir {
+
-
padding: 5px 15px;
+
-
}
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Custom
+
-
*/
+
-
 
+
-
ul.dropdown ul a {
+
-
padding-left: 15px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
ul.dropdown li.hover *.open {
+
-
color: #b0d730;
+
-
}
+
-
 
+
-
/* CSS2 clone */
+
-
 
+
-
ul.dropdown li:hover > *.dir {
+
-
color: #b0d730;
+
-
}
+
-
 
+
-
 
+
-
/* ------------------------------- */
+
-
/* ------------------------------- */
+
-
/* ------------------------------- */
+
-
/* ------------------------------- */
+
-
 
+
-
#navi,.navi
+
{
{
-
    height: 35px;
+
  width: 100%;
-
    width: 100%;
+
  padding: 10px;
}
}
-
.navi
+
.toc .tocnumber
{
{
-
    z-index: 1;
+
  display: none;
-
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+
-
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */
+
-
    position: relative;
+
-
    border-bottom: 1px solid #000000;
+
}
}
-
.stickToTop
 
-
{
 
-
    position: fixed;
 
-
    top:0;
 
-
    width:100%;
 
-
}
 
-
 
-
</html> {{{css|}}} <html>
 
</style>
</style>
-
<div class="navi stickToTop">
+
<!-- Easter Egg -->
-
<ul class="dropdown dropdown-horizontal">
+
<div id="easteregg" style="position:fixed; width: 100%; height: 100%; z-index:1500; background-color: rgba(0,0,0,0.8); display: none;">
-
  <li class="first dir"><a href="/Team:ETH_Zurich">Overview</a>
+
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="400" height="325" src="http://www.youtube.com/embed/n8FM8nyy_Fk?hd=1" frameborder="0" style="position: absolute; left:50%; top:50%; margin: -162px 0 0 -200px;"></iframe>
-
  <ul>
+
<img src="/wiki/images/1/11/ETHZ_dialog-close.png" onclick="document.getElementById('easteregg').style.display='none'" style="position: absolute; left:50%; top:50%; margin-left: 202px; margin-top: 139px"/>
-
      <li class="first"><a href="/Team:ETH_Zurich/Overview/Project">What is SmoColi?</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Overview/CircuitDesign">The Circuit</a></li>
+
-
      <li class="last"><a href="/Team:ETH_Zurich/Achievements/Data_page">The Team</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir"><a href="/Team:ETH_Zurich/Biology">Biology</a>
+
-
    <ul>
+
-
      <li class="first"><a href="/Team:ETH_Zurich/Biology/Detector">Building the network</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Biology/MolecularMechanism">Genetic Design</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Biology/Validation">Results</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Biology/Cloning">Materials and Methods</a></li>
+
-
      <li class="last"><a href="/Team:ETH_Zurich/Biology/Journal">Lab Journal</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir"><a href="/Team:ETH_Zurich/Process/Microfluidics">Microfluidics</a>
+
-
    <ul>
+
-
      <li class="first"><a href="/Team:ETH_Zurich/Process/Microfluidics">Designing Channels...</a></li>
+
-
      <li class="last"><a href="/Team:ETH_Zurich/Process/Validation">Experimental Results</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir"><a href="/Team:ETH_Zurich/Modeling">Modeling</a>
+
-
    <ul>
+
-
      <li class="first"><a href="/Team:ETH_Zurich/Modeling/SingleCell">Single-Cell Model</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Modeling/Analysis">Systematic Circuit Analysis</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Modeling/Combined">Diffusion Model</a></li>
+
-
<li><a href="/Team:ETH_Zurich/Modeling/Parameters">Parameters</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Modeling/References">References</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Modeling/Code">Code</a></li>
+
-
      <li class="last"><a href="/Team:ETH_Zurich/Modeling/Model_Results">Predictions &amp; Results</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir"><a href="/Team:ETH_Zurich/Team/Human practices">Human Practices</a>
+
-
  <ul>
+
-
    <li class="first"><a href="/Team:ETH_Zurich/Team/Human practices">Outreach</a></li>
+
-
      <li class="last"><a href="/Team:ETH_Zurich/Biology/Safety">Safety</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir"><a href="/Team:ETH_Zurich/Team">Team</a>
+
-
<ul>
+
-
    <li class="first"><a href="/Team:ETH_Zurich/Team">Team SmoColi</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Team/Media">Photo Gallery</a></li>
+
-
      <li><a href="/Team:ETH_Zurich/Team/Acknowledgements">Acknowledgements &amp; Contributions</a></li>
+
-
      <li><a href="https://igem.org/Team.cgi?year=2011&team_name=ETH_Zurich" target="_blank">Official Team Overview</a></li>
+
-
     
+
-
      <li class="last"><a href="">Sponsors</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li class="dir last">
+
-
    <form method="post" action="">
+
-
      <label for="search">Search:</label>
+
-
      <input type="text" id="search" class="text" value="Search me!" onfocus="if (this.value == 'Search me!') this.value = '';" onblur="if (this.value == '') this.value = 'Search me!';" maxlength="255" />
+
-
      <input type="image" src="/profile/CSS/dropdown/transitional/themes/vimeo.com/images/btn_search.png" class="button" />
+
-
    </form>
+
-
    <ul>
+
-
      <li class="first"><a href="./">Search result #1</a></li>
+
-
      <li><a href="./">Search result #2</a></li>
+
-
      <li><a href="./">Search result #3</a></li>
+
-
      <li><a href="./">Search result #4</a></li>
+
-
      <li class="last"><a href="./">Search result #5</a></li>
+
-
    </ul>
+
-
  </li>
+
-
</ul>
+
-
 
+
</div>
</div>
-
<div id="preload">
+
<!-- Dropdown Menu -->
-
  <img src="/wiki/images/e/e2/ETHZ-bg-overview.png" width="1" height="1" alt="Menu image preload" />
+
<div class="stickToTop" id="naviBox" style="text-align:center; line-height: 0px; font-size: 0px; z-index: 500;">
-
  <img src="/wiki/images/0/03/ETHZ-bg-biology.png" width="1" height="1" alt="Menu image preload" />
+
<div style="width:210px; display: inline-block; position: relative; height:0px;"></div>
-
  <img src="/wiki/images/a/ac/ETHZ-bg-process.png" width="1" height="1" alt="Menu image preload" />
+
<div style="position: relative; margin: 0 auto; display:inline-block; left: 0px; right: 0px;">
-
  <img src="/wiki/images/b/b8/ETHZ-bg-modeling.png" width="1" height="1" alt="Menu image preload" />
+
<div align="center" id="naviMenu" style="left: 0px; right: 0px; margin: 0pt auto; text-align: left;">
-
  <img src="/wiki/images/3/3d/ETHZ-bg-achievements.png" width="1" height="1" alt="Menu image preload" />
+
</html>{{:Team:ETH_Zurich/Templates/HeaderNew/MenuItems}}<html>
-
  <img src="/wiki/images/e/ed/ETHZ-bg-team.png" width="1" height="1" alt="Menu image preload" />
+
</div>
 +
</div>
</div>
</div>
-
<div id="easteregg" style="position:absolute; left:200px; top:100px;display:none;z-index:99999999">
 
-
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="400" height="325" src="http://www.youtube.com/embed/n8FM8nyy_Fk?hd=1" frameborder="0"></iframe>
 
-
</div>
 
-
<div class=""> <a href='/Team:ETH_Zurich'> <img src='/wiki/images/5/5f/ETH_Zurich_iGEM_new.png'> </a> </div>
+
<!-- Nav Box -->
-
<!--<div id='slogan'><b><a href="#" onclick="document.getElementById('easteregg').style.display='block'" style="text-decoration:none;color:#000000;">Can you feel the smoke tonight?</a></b></div>-->
+
<!-- <div style="position: fixed; top: 37px; left: 10px; border-radius: 15px; padding: 15px; border: #172322 1px solid; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Safari/Chrome */"> -->
-
<div class=""> <a href='https://2011.igem.org'> <img src='/wiki/images/f/fb/IGEM_small.png'> </a> </div>
+
<div style="position: fixed; top: 37px; left: 0px; padding: 15px; width:220px; bottom: 0px; z-index: 600; overflow: auto;">  
 +
</html>{{:Team:ETH_Zurich/Templates/HeaderNew/SideBar}}<html>
 +
</div>
 +
<!-- Page -->
 +
<div style="bottom: 0; left: 235px; overflow: auto; position: fixed; right: 0px; top: 32px;">
 +
<div style="margin-left: 20px; margin-right: 20px; padding-top: 20px;">
</html>
</html>
-
__NOTOC__
 

Latest revision as of 19:54, 28 October 2011

Can you feel the smoke tonight?
 

Retrieved from "http://2011.igem.org/Team:ETH_Zurich/Templates/HeaderNew"