Template:Peking2012 Epilogue
From 2012.igem.org
(Difference between revisions)
m |
m |
||
(29 intermediate revisions not shown) | |||
Line 47: | Line 47: | ||
bottom: 46px; | bottom: 46px; | ||
right: 15px; | right: 15px; | ||
- | width: | + | width: 498px; |
padding: 0; | padding: 0; | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: block; | ||
} | } | ||
#PKU_navi_history_menu | #PKU_navi_history_menu | ||
Line 56: | Line 57: | ||
bottom: 46px; | bottom: 46px; | ||
left: 15px; | left: 15px; | ||
- | width: | + | width: 158px; |
padding: 0; | padding: 0; | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: block; | ||
} | } | ||
+ | #PKU_navi_index_menu * , | ||
+ | #PKU_navi_history_menu * | ||
+ | { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
#PKU_navi_index_menu ul , | #PKU_navi_index_menu ul , | ||
#PKU_navi_history_menu ul | #PKU_navi_history_menu ul | ||
{ | { | ||
- | + | line-height: 11px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #PKU_navi_index_menu ul | + | #PKU_navi_index_menu ul#PKU_navi_menu , |
+ | #PKU_navi_history_menu ul#PKU_navi_history_menu_BoxC | ||
{ | { | ||
- | + | line-height: 17px; | |
} | } | ||
- | #PKU_navi_history_menu | + | |
+ | #PKU_navi_index_menu a , | ||
+ | #PKU_navi_index_menu a:link , | ||
+ | #PKU_navi_index_menu a:visited , | ||
+ | #PKU_navi_history_menu a , | ||
+ | #PKU_navi_history_menu a:link , | ||
+ | #PKU_navi_history_menu a:visited | ||
{ | { | ||
- | + | color: #d3d3d3; | |
} | } | ||
+ | #PKU_navi_index_menu a:hover , | ||
+ | #PKU_navi_index_menu a:active , | ||
+ | #PKU_navi_history_menu a:hover , | ||
+ | #PKU_navi_history_menu a:active | ||
+ | { | ||
+ | color: #ffffff; | ||
+ | text-decoration: none; | ||
+ | } | ||
- | + | li.PKU_BoxBorderT , | |
+ | li.PKU_BoxBorderB , | ||
+ | li.PKU_BoxBorderT li , | ||
+ | li.PKU_BoxBorderB li | ||
{ | { | ||
- | + | line-height: 11px; | |
- | + | height: 11px; | |
- | + | ||
} | } | ||
- | + | .PKU_BoxT , | |
+ | .PKU_BoxB | ||
{ | { | ||
- | + | background-color: transparent; | |
- | + | background-repeat: repeat-x; | |
- | + | height: 11px; | |
} | } | ||
- | + | .PKU_Box11 , | |
- | + | .PKU_Box13 , | |
- | + | .PKU_Box31 , | |
- | + | .PKU_Box33 | |
- | + | ||
- | + | ||
- | + | ||
{ | { | ||
- | + | width: 11px; | |
+ | height: 11px; | ||
+ | } | ||
+ | .PKU_Box11 | ||
+ | { | ||
+ | background-image: url("/wiki/images/6/6a/Peking2012_FloatBox_11.png"); | ||
+ | } | ||
+ | .PKU_Box13 | ||
+ | { | ||
+ | background-image: url("/wiki/images/b/b5/Peking2012_FloatBox_13.png"); | ||
+ | } | ||
+ | .PKU_Box31 | ||
+ | { | ||
+ | background-image: url("/wiki/images/1/1e/Peking2012_FloatBox_31.png"); | ||
+ | } | ||
+ | .PKU_Box33 | ||
+ | { | ||
+ | background-image: url("/wiki/images/1/10/Peking2012_FloatBox_33.png"); | ||
} | } | ||
- | + | .PKU_BoxT | |
- | + | ||
- | + | ||
- | + | ||
{ | { | ||
- | color: | + | background-image: url("/wiki/images/0/0f/Peking2012_FloatBox_12.png"); |
- | + | } | |
+ | .PKU_BoxB | ||
+ | { | ||
+ | background-image: url("/wiki/images/e/e6/Peking2012_FloatBox_32.png"); | ||
+ | } | ||
+ | .PKU_BoxC | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-repeat: repeat; | ||
+ | background-image: url("/wiki/images/5/5f/Peking2012_FloatBox_22.png"); | ||
+ | } | ||
+ | .PKU_BoxL , | ||
+ | .PKU_BoxR | ||
+ | { | ||
+ | background-color: transparent; | ||
+ | background-repeat: repeat-y; | ||
+ | width: 11px; | ||
+ | } | ||
+ | .PKU_BoxL | ||
+ | { | ||
+ | background-image: url("/wiki/images/3/3c/Peking2012_FloatBox_21.png"); | ||
+ | } | ||
+ | .PKU_BoxR | ||
+ | { | ||
+ | background-image: url("/wiki/images/8/8c/Peking2012_FloatBox_23.png"); | ||
+ | } | ||
+ | #PKU_navi_index_menu .PKU_BoxT , | ||
+ | #PKU_navi_index_menu .PKU_BoxB | ||
+ | { | ||
+ | width: 460px; | ||
+ | } | ||
+ | #PKU_navi_history_menu .PKU_BoxT , | ||
+ | #PKU_navi_history_menu .PKU_BoxB | ||
+ | { | ||
+ | width: 120px; | ||
+ | } | ||
+ | #PKU_navi_index_menu .PKU_BoxL , | ||
+ | #PKU_navi_index_menu .PKU_BoxR | ||
+ | { | ||
+ | height: 0; /* edit in javascript */ | ||
+ | } | ||
+ | #PKU_navi_history_menu .PKU_BoxL , | ||
+ | #PKU_navi_history_menu .PKU_BoxR | ||
+ | { | ||
+ | height: 114px; | ||
+ | } | ||
+ | #PKU_navi_history_menu_BoxC | ||
+ | { | ||
+ | width: 120px; | ||
+ | height: 114px; | ||
+ | } | ||
+ | #PKU_navi_menu | ||
+ | { | ||
+ | width: 460px; | ||
+ | height: 0; /* edit in javascript */ | ||
} | } | ||
Line 133: | Line 222: | ||
</div> | </div> | ||
<div> | <div> | ||
- | <ul id="PKU_navi_history_menu" onmouseover="HoldNaviHistoryMenu();" onmouseout="WithdrawNaviHistoryMenu();"> | + | <ul id="PKU_navi_history_menu" class="vertical" onmouseover="HoldNaviHistoryMenu();" onmouseout="WithdrawNaviHistoryMenu();"> |
- | <li | + | <li class="PKU_BoxBorderT"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box11" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_history_menu_BoxTB" class="PKU_BoxT"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box13" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <ul> | + | <ul class="horizontal"> |
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxLR" class="PKU_BoxL"></p> |
</li> | </li> | ||
<li> | <li> | ||
- | <a href="https://2008.igem.org/Team:Peking" > 2008 Peking </a> | + | <ul id="PKU_navi_history_menu_BoxC" class="PKU_BoxC vertical"> |
+ | <li> | ||
+ | <a href="https://2007.igem.org/Peking" > 2007 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2008.igem.org/Team:Peking" > 2008 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2009.igem.org/Team:Peking" > 2009 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2010.igem.org/Team:Peking" > 2010 Peking </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Peking_R" > 2011 Peking R </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2011.igem.org/Team:Peking_S" > 2011 Peking S </a> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxLR" class="PKU_BoxR"></p> |
</li> | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="PKU_BoxBorderB"> | ||
+ | <ul class="horizontal"> | ||
<li> | <li> | ||
- | < | + | <p class="PKU_Box31" ></p> |
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p name="PKU_navi_history_menu_BoxTB" class="PKU_BoxB"></p> |
</li> | </li> | ||
<li> | <li> | ||
- | < | + | <p class="PKU_Box33" ></p> |
</li> | </li> | ||
</ul> | </ul> | ||
- | |||
- | |||
- | |||
</li> | </li> | ||
</ul> | </ul> | ||
Line 166: | Line 285: | ||
<div> | <div> | ||
- | <ul id="PKU_navi_index_menu" onmouseover="HoldNaviIndexMenu();" onmouseout="WithdrawNaviIndexMenu();"> | + | <ul id="PKU_navi_index_menu" class="vertical" onmouseover="HoldNaviIndexMenu();" onmouseout="WithdrawNaviIndexMenu();"> |
- | <li | + | <li class="PKU_BoxBorderT"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box11" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxTB" class="PKU_BoxT"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box13" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <ul id="PKU_navi_menu"> | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxLR" class="PKU_BoxL"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <ul id="PKU_navi_menu" class="PKU_BoxC vertical"> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxLR" class="PKU_BoxR"></p> | ||
+ | </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li | + | <li class="PKU_BoxBorderB"> |
- | < | + | <ul class="horizontal"> |
+ | <li> | ||
+ | <p class="PKU_Box31" ></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p name="PKU_navi_index_menu_BoxTB" class="PKU_BoxB"></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="PKU_Box33" ></p> | ||
+ | </li> | ||
+ | </ul> | ||
</li> | </li> | ||
</ul> | </ul> | ||
Line 217: | Line 366: | ||
var NaviHistoryMenu_Cur = 0; | var NaviHistoryMenu_Cur = 0; | ||
var NaviHistoryMenu_Des = 0; | var NaviHistoryMenu_Des = 0; | ||
- | var | + | var handle_NaviIndexMenuShrink = null; |
- | var | + | var handle_NaviHistoryMenuShrink = null; |
+ | var handle_NaviIndexMenuHide = null; | ||
+ | var handle_NaviHistoryMenuHide = null; | ||
+ | |||
+ | var menutitle = document.getElementsByTagName("h3"); | ||
+ | var menuhtml = ""; | ||
+ | var menuiter = null; | ||
+ | var borders = document.getElementsByName("PKU_navi_index_menu_BoxLR"); | ||
+ | var borderiter = null; | ||
+ | var indexheight = 1.5 * (menutitle.length-1) * 16; /* 1em = 16px */ | ||
function ShowNaviIndexMenu() | function ShowNaviIndexMenu() | ||
Line 224: | Line 382: | ||
IndexOn = 1; | IndexOn = 1; | ||
NaviIndexMenu_Des = 1; | NaviIndexMenu_Des = 1; | ||
+ | document.getElementById("PKU_navi_index_menu").style.display = 'block'; | ||
HoldNaviIndexMenu(); | HoldNaviIndexMenu(); | ||
} | } | ||
- | function | + | function ShrinkNaviIndexMenu() |
{ | { | ||
IndexOn = 0; | IndexOn = 0; | ||
NaviIndexMenu_Des = 0; | NaviIndexMenu_Des = 0; | ||
IndexMouseOut(document.getElementById("PKU_navi_index_button")); | IndexMouseOut(document.getElementById("PKU_navi_index_button")); | ||
- | if ( | + | if (handle_NaviIndexMenuShrink) |
- | + | { | |
+ | clearTimeout(handle_NaviIndexMenuShrink); | ||
+ | } | ||
+ | handle_NaviIndexMenuShrink = null; | ||
+ | handle_NaviIndexMenuHide = setTimeout("HideNaviIndexMenu();",500); | ||
+ | } | ||
+ | function HideNaviIndexMenu() | ||
+ | { | ||
+ | document.getElementById("PKU_navi_index_menu").style.display = 'none'; | ||
+ | if (handle_NaviIndexMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuHide); | ||
+ | } | ||
+ | handle_NaviIndexMenuHide = null; | ||
} | } | ||
function WithdrawNaviIndexMenu() | function WithdrawNaviIndexMenu() | ||
{ | { | ||
- | + | handle_NaviIndexMenuShrink = setTimeout("ShrinkNaviIndexMenu();",1000); | |
} | } | ||
function HoldNaviIndexMenu() | function HoldNaviIndexMenu() | ||
{ | { | ||
- | if ( | + | if (handle_NaviIndexMenuShrink) |
{ | { | ||
- | clearTimeout( | + | clearTimeout(handle_NaviIndexMenuShrink); |
- | + | handle_NaviIndexMenuShrink = null; | |
+ | } | ||
+ | if (handle_NaviIndexMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviIndexMenuHide); | ||
+ | handle_NaviIndexMenuHide = null; | ||
} | } | ||
} | } | ||
Line 250: | Line 427: | ||
{ | { | ||
HoldNaviHistoryMenu(); | HoldNaviHistoryMenu(); | ||
+ | document.getElementById("PKU_navi_history_menu").style.display = 'block'; | ||
NaviHistoryMenu_Des = 1; | NaviHistoryMenu_Des = 1; | ||
} | } | ||
- | function | + | function ShrinkNaviHistoryMenu() |
{ | { | ||
NaviHistoryMenu_Des = 0; | NaviHistoryMenu_Des = 0; | ||
- | if ( | + | if (handle_NaviHistoryMenuShrink) |
- | + | { | |
+ | clearTimeout(handle_NaviHistoryMenuShrink); | ||
+ | } | ||
+ | handle_NaviHistoryMenuShrink = null; | ||
+ | handle_NaviHistoryMenuHide = setTimeout("HideNaviHistoryMenu();",500); | ||
+ | } | ||
+ | function HideNaviHistoryMenu() | ||
+ | { | ||
+ | document.getElementById("PKU_navi_history_menu").style.display = 'none'; | ||
+ | if (handle_NaviHistoryMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuHide); | ||
+ | } | ||
+ | handle_NaviHistoryMenuHide = null; | ||
} | } | ||
function WithdrawNaviHistoryMenu() | function WithdrawNaviHistoryMenu() | ||
{ | { | ||
- | + | handle_NaviHistoryMenuShrink = setTimeout("ShrinkNaviHistoryMenu();",1000); | |
} | } | ||
function HoldNaviHistoryMenu() | function HoldNaviHistoryMenu() | ||
{ | { | ||
- | if ( | + | if (handle_NaviHistoryMenuShrink) |
{ | { | ||
- | clearTimeout( | + | clearTimeout(handle_NaviHistoryMenuShrink); |
- | + | handle_NaviHistoryMenuShrink = null; | |
+ | } | ||
+ | if (handle_NaviHistoryMenuHide) | ||
+ | { | ||
+ | clearTimeout(handle_NaviHistoryMenuHide); | ||
+ | handle_NaviHistoryMenuHide = null; | ||
} | } | ||
} | } | ||
Line 273: | Line 469: | ||
function FreshNavi() | function FreshNavi() | ||
{ | { | ||
- | NaviIndexMenu_Cur += ( NaviIndexMenu_Des - NaviIndexMenu_Cur ) * 0. | + | NaviIndexMenu_Cur += ( NaviIndexMenu_Des - NaviIndexMenu_Cur ) * 0.5; |
- | NaviHistoryMenu_Cur += ( NaviHistoryMenu_Des - NaviHistoryMenu_Cur ) * 0. | + | NaviHistoryMenu_Cur += ( NaviHistoryMenu_Des - NaviHistoryMenu_Cur ) * 0.5; |
- | var | + | var objs; |
+ | var objiter; | ||
- | + | objs = document.getElementsByName("PKU_navi_index_menu_BoxTB"); | |
- | + | for (objiter=0;objiter<objs.length;++objiter) | |
+ | { | ||
+ | objs[objiter].style.width = NaviIndexMenu_Cur * 460 + "px"; | ||
+ | } | ||
+ | objs = document.getElementsByName("PKU_navi_index_menu_BoxLR"); | ||
+ | for (objiter=0;objiter<objs.length;++objiter) | ||
+ | { | ||
+ | objs[objiter].style.height = NaviIndexMenu_Cur * indexheight + "px"; | ||
+ | } | ||
+ | objs = document.getElementById("PKU_navi_menu"); | ||
+ | objs.style.width = NaviIndexMenu_Cur * 460 + "px"; | ||
+ | objs.style.height = NaviIndexMenu_Cur * indexheight + "px"; | ||
+ | objs = document.getElementById("PKU_navi_index_menu"); | ||
+ | objs.style.right = (NaviIndexMenu_Cur-1) * 460 + 15 + "px"; | ||
- | + | objs = document.getElementsByName("PKU_navi_history_menu_BoxTB"); | |
- | + | for (objiter=0;objiter<objs.length;++objiter) | |
+ | { | ||
+ | objs[objiter].style.width = NaviHistoryMenu_Cur * 120 + "px"; | ||
+ | } | ||
+ | objs = document.getElementsByName("PKU_navi_history_menu_BoxLR"); | ||
+ | for (objiter=0;objiter<objs.length;++objiter) | ||
+ | { | ||
+ | objs[objiter].style.height = NaviHistoryMenu_Cur * 114 + "px"; | ||
+ | } | ||
+ | objs = document.getElementById("PKU_navi_history_menu_BoxC"); | ||
+ | objs.style.width = NaviHistoryMenu_Cur * 120 + "px"; | ||
+ | objs.style.height = NaviHistoryMenu_Cur * 114 + "px"; | ||
} | } | ||
var handleFreshNavi = setInterval("FreshNavi();",50); | var handleFreshNavi = setInterval("FreshNavi();",50); | ||
- | |||
- | |||
- | |||
- | |||
for (menuiter=1;menuiter<menutitle.length;++menuiter) | for (menuiter=1;menuiter<menutitle.length;++menuiter) | ||
Line 299: | Line 516: | ||
menunavi.innerHTML = menuhtml; | menunavi.innerHTML = menuhtml; | ||
+ | HideNaviIndexMenu(); | ||
+ | HideNaviHistoryMenu(); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 08:17, 1 September 2012