Template:Peking2012 CSS

From 2012.igem.org

(Difference between revisions)
m
m
Line 25: Line 25:
{
{
   background-color: #222222;
   background-color: #222222;
-
   background-attachment: absolute;
+
   background-attachment: scroll;
   background-position: 50% 0;
   background-position: 50% 0;
   background-repeat: repeat;
   background-repeat: repeat;
Line 118: Line 118:
   -moz-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
   opacity: 0;
 +
}
 +
.hidden
 +
{
 +
  display: none;
 +
}
 +
.show
 +
{
 +
  display: block;
 +
}
 +
.show-text
 +
{
 +
  display: inline;
}
}
Line 185: Line 197:
   /***--- Top Banner ---***/
   /***--- Top Banner ---***/
 +
#PKU_banner_container
 +
{
 +
  padding: 0;
 +
  margin: 0 auto;
 +
  text-align: center;
 +
  clear: both;
 +
  position: absolute;
 +
  top: 80px;
 +
}
 +
#PKU_banner_image
 +
{
 +
  width: 965px;
 +
  height: auto;
 +
}
   /***--- Top Navigator ---***/
   /***--- Top Navigator ---***/
 +
#PKU_banner_menu
 +
{
 +
  width: 952px;
 +
  height: 32px;
 +
  padding: 0 7px;
 +
  position: relative;
 +
  top: - 32px;
 +
}
 +
#PKU_banner_menu li
 +
{
 +
  overflow: hidden;
 +
  width: 136px;
 +
  height: 32px;
 +
}
 +
.PKU_banner_submenu
 +
{
 +
  width: 952px;
 +
  height: 32px;
 +
  padding: 0 7px;
 +
  position: absolute;
 +
  top: 300px;
 +
  filter: Alpha(Opacity=0%);
 +
  -moz-opacity: 0;
 +
  opacity: 0;
 +
}
   /***--- Bottom Navigator ---***/
   /***--- Bottom Navigator ---***/
Line 346: Line 397:
<script type="text/javascript" >
<script type="text/javascript" >
 +
/*
 +
* Peking 2012 TopBar
 +
* by Sun Sibai
 +
* E-mail: sun.niasw@gmail.com
 +
*/
var thispage = document.location.toString().slice("https://2012.igem.org/".length); /* relative location */
var thispage = document.location.toString().slice("https://2012.igem.org/".length); /* relative location */
document.getElementById('PKU_menubar_ViewSource_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
document.getElementById('PKU_menubar_ViewSource_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
Line 402: Line 458:
</script>
</script>
 +
<div id="PKU_banner_container">
 +
<img id="PKU_banner_image" src="/wiki/images/4/4c/Peking2012_Banner_TitleY.png" alt="banner" /> /*src="/wiki/images/d/df/Peking2012_Banner_TitleB.png" src="/wiki/images/4/4c/Peking2012_Banner_TitleY.png"*/
 +
<div>
 +
  <ul id="PKU_banner_menu">
 +
  <li>
 +
    <a id="PKU_banner_Home" onmouseover="ButtonMouseOver();" onmouseout="ButtonMouseOut();" href="/Team:Peking">
 +
    <img class="show" src="" alt="Home" />
 +
    <img class="hidden" src="" alt="Home" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_Team" onmouseover="ButtonMouseOver();ShowSubmenuTeam();" onmouseout="ButtonMouseOut();HideSubmenuTeam();" href="/Team:Peking/Team">
 +
    <img class="show" src="" alt="Team" />
 +
    <img class="hidden" src="" alt="Team" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_Project" onmouseover="ButtonMouseOver();ShowSubmenuProject();" onmouseout="ButtonMouseOut();HideSubmenuProject();" href="/Team:Peking/Project">
 +
    <img class="show" src="" alt="Project" />
 +
    <img class="hidden" src="" alt="Project" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_Parts" onmouseover="ButtonMouseOver();" onmouseout="ButtonMouseOut();" href="/Team:Peking/Parts">
 +
    <img class="show" src="" alt="Parts" />
 +
    <img class="hidden" src="" alt="Parts" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_Modeling" onmouseover="ButtonMouseOver();ShowSubmenuModeling();" onmouseout="ButtonMouseOut();HideSubmenuModeling();" href="/Team:Peking/Modeling">
 +
    <img class="show" src="" alt="Modeling" />
 +
    <img class="hidden" src="" alt="Modeling" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_HumanPractice" onmouseover="ButtonMouseOver();ShowSubmenuHumanPractice();" onmouseout="ButtonMouseOut();HideSubmenuHumanPractice();" href="/Team:Peking/HumanPractice">
 +
    <img class="show" src="" alt="HumanPractice" />
 +
    <img class="hidden" src="" alt="HumanPractice" />
 +
    </a>
 +
  </li>
 +
  <li>
 +
    <a id="PKU_banner_Safety" onmouseover="ButtonMouseOver();" onmouseout="ButtonMouseOut();" href="/Team:Peking/Safety">
 +
    <img class="show" src="" alt="Safety" />
 +
    <img class="hidden" src="" alt="Safety" />
 +
    </a>
 +
  </li>
 +
  </ul>
 +
</div>
 +
<div>
 +
  <img id="PKU_banner_Team_submenu" class="PKU_banner_submenu" src="" alt="Team_submenu" >
 +
  <img id="PKU_banner_Project_submenu" class="PKU_banner_submenu" src="" alt="Project_submenu" >
 +
  <img id="PKU_banner_Modeling_submenu" class="PKU_banner_submenu" src="" alt="Modeling_submenu" >
 +
  <img id="PKU_banner_HumanPractice_submenu" class="PKU_banner_submenu" src="" alt="HumanPractice_submenu" >
 +
</div>
 +
</div>
 +
 +
<script type="text/javascript" >
 +
/*
 +
* Peking 2012 MenuBar
 +
* by Sun Sibai
 +
* E-mail: sun.niasw@gmail.com
 +
*/
 +
function ButtonMouseOver()
 +
{
 +
  var Img = this.childNodes;
 +
  Img[1].style.display = "block";
 +
  Img[0].style.display = "none";
 +
}
 +
 +
function ButtonMouseOut()
 +
{
 +
  var Img = this.childNodes;
 +
  Img[0].style.display = "block";
 +
  Img[1].style.display = "none";
 +
}
 +
 +
var SubmenuAlpha_Des_Team = 0; //Destination
 +
var SubmenuAlpha_Cur_Team = 0; //Current Val
 +
var SubmenuAlpha_Des_Project = 0; //Destination
 +
var SubmenuAlpha_Cur_Project = 0; //Current Val
 +
var SubmenuAlpha_Des_Modeling = 0; //Destination
 +
var SubmenuAlpha_Cur_Modeling = 0; //Current Val
 +
var SubmenuAlpha_Des_HumanPractice = 0; //Destination
 +
var SubmenuAlpha_Cur_HumanPractice = 0; //Current Val
 +
 +
function ShowSubmenuTeam()
 +
{
 +
  SubmenuAlpha_Des_Team = 1;
 +
}
 +
function HideSubmenuTeam()
 +
{
 +
  SubmenuAlpha_Des_Team = 0;
 +
}
 +
function ShowSubmenuProject()
 +
{
 +
  SubmenuAlpha_Des_Project = 1;
 +
}
 +
function HideSubmenuProject()
 +
{
 +
  SubmenuAlpha_Des_Project = 0;
 +
}
 +
function ShowSubmenuModeling()
 +
{
 +
  SubmenuAlpha_Des_Modeling = 1;
 +
}
 +
function HideSubmenuModeling()
 +
{
 +
  SubmenuAlpha_Des_Modeling = 0;
 +
}
 +
function ShowSubmenuHumanPractice()
 +
{
 +
  SubmenuAlpha_Des_HumanPractice = 1;
 +
}
 +
function HideSubmenuHumanPractice()
 +
{
 +
  SubmenuAlpha_Des_HumanPractice = 0;
 +
}
 +
 +
function FreshSubmenuAlpha()
 +
{
 +
  SubmenuAlpha_Cur_Team += ( SubmenuAlpha_Des_Team - SubmenuAlpha_Cur_Team ) * 0.3;
 +
  SubmenuAlpha_Cur_Project += ( SubmenuAlpha_Des_Project - SubmenuAlpha_Cur_Project ) * 0.3;
 +
  SubmenuAlpha_Cur_Modeling += ( SubmenuAlpha_Des_Modeling - SubmenuAlpha_Cur_Modeling ) * 0.3;
 +
  SubmenuAlpha_Cur_HumanPractice += ( SubmenuAlpha_Des_HumanPractice - SubmenuAlpha_Cur_HumanPractice ) * 0.3;
 +
 
 +
  var tmp;
 +
 +
  tmp = getElementById("PKU_banner_Team_submenu");
 +
  tmp.filter.alpha.value = SubmenuAlpha_Cur_Team;
 +
  tmp.style.opacity = SubmenuAlpha_Cur_Team;
 +
 +
  tmp = getElementById("PKU_banner_Project_submenu");
 +
  tmp.filter.alpha.value = SubmenuAlpha_Cur_Project;
 +
  tmp.style.opacity = SubmenuAlpha_Cur_Project;
 +
 +
  tmp = getElementById("PKU_banner_Modeling_submenu");
 +
  tmp.filter.alpha.value = SubmenuAlpha_Cur_Modeling;
 +
  tmp.style.opacity = SubmenuAlpha_Cur_Modeling;
 +
 +
  tmp = getElementById("PKU_banner_HumanPractice_submenu");
 +
  tmp.filter.alpha.value = SubmenuAlpha_Cur_HumanPractice;
 +
  tmp.style.opacity = SubmenuAlpha_Cur_HumanPractice;
 +
}
 +
 +
var handleFreshSubmenuAlpha = setInterval("FreshSubmenuAlpha();",50);
 +
 +
</script>
</html>
</html>

Revision as of 08:30, 7 August 2012
banner /*src="/wiki/images/d/df/Peking2012_Banner_TitleB.png" src="/wiki/images/4/4c/Peking2012_Banner_TitleY.png"*/
Team_submenu Project_submenu Modeling_submenu HumanPractice_submenu

Retrieved from "http://2012.igem.org/Template:Peking2012_CSS"