Template:Team:Bonn:PageMenu

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<div id="page">
+
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
-
<div class="menu">
+
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
-
<ul id="menu-top">
+
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
-
  <li id="menu-1" class="menu-column">
+
-
      <div id="menu-home" class="menu-head"></html> [[Team:Bonn|Home]] <html></div>
+
-
  </li>
+
-
  <li id="menu-2" class="menu-column">
+
-
    <span class="menu-head"></html> Team <html></span>
+
-
    <ul class="menu-sub-ul" id="menu-sub-team">
+
-
      <li class="menu-sub" id="menu-team-aboutus">
+
-
        </html> About Us <html>
+
-
      </li>
+
-
      <li class="menu-sub" id="menu-team-officialprofile">
+
-
        </html> [https://igem.org/Team.cgi?year=2013&team_name=Bonn Official Profile] <html>
+
-
      </li>
+
-
      <li class="menu-sub" id="menu-team-sponsors">
+
-
        </html> Sponsors <html>
+
-
      </li>
+
-
      <li class="menu-sub" id="menu-team-sponsors">
+
-
        </html> Acknowledgements<html>
+
-
      </li>
+
-
      <li class="menu-sub" id="menu-team-sponsors">
+
-
        </html> Bonn <html>
+
-
      </li>
+
-
    </ul>
+
-
  </li>
+
-
  <li id="menu-3" class="menu-column">
+
-
    <div class="menu-head"></html> Introduction <html></div>
+
-
    <ul class="menu-sub-ul" id="menu-sub-intro">
+
-
    </ul>
+
-
  </li>
+
-
  <li id="menu-4" class="menu-column">
+
-
    <span class="menu-head"></html> Project <html></span>
+
-
    <ul class="menu-sub-ul" id="menu-sub-project">
+
-
    </ul>
+
-
  </li>  <li id="menu-5" class="menu-column">
+
-
    <div class="menu-head"></html> Human Practice <html></div>
+
-
    <ul class="menu-sub-ul" id="menu-sub-hp">
+
-
    </ul>
+
-
  </li>
+
-
 
+
-
</ul>
+
-
</div>
+
<script>
<script>
-
for(var m,m=1; m<3;m++) {
+
function dropdown(id) {
-
  dropdown("menu-"+m);
+
  $('#'+id).hover( function()
-
}
+
    {
 +
      $('#'+id+' > ul').stop().slideUp();
 +
      $('#'+id+' > ul').slideDown("1000");
 +
 
 +
    });
 +
  $('#'+id).mouseleave(function()
 +
    {
 +
      $('#'+id+' > ul').stop().slideDown();
 +
      $('#'+id+' > ul').slideUp("1000");
 +
    });
 +
 
 +
}
 +
 
 +
function sidetextFade(id)
 +
{
 +
  $('#'+id).hover(
 +
  function() {
 +
    var hover;
 +
    hover = document.getElementById(id).childNodes;
 +
    for(var i=0, ii = hover.length; i < ii; i++) {
 +
      if(hover[i].nodeName == "DIV"){
 +
        if(hover[i].className == "page-box-bottom") {
 +
          $('#'+hover[i].id).stop().fadeOut();
 +
          $('#'+hover[i].id).fadeIn(1000);
 +
        }
 +
      }
 +
    }
 +
  });
 +
  $('#'+id).mouseleave(
 +
  function() {
 +
    var hover;
 +
    hover = document.getElementById(id).childNodes;
 +
    for(var i=0, ii = hover.length; i < ii; i++) {
 +
      if(hover[i].nodeName == "DIV"){
 +
        if(hover[i].className == "page-box-bottom") {
 +
          $('#'+hover[i].id).stop().fadeIn();
 +
          $('#'+hover[i].id).fadeOut(1000);
 +
        }
 +
      }
 +
    }
 +
  });
 +
}
 +
 
</script>
</script>
 +
<style type="text/css">
 +
.mw-headline{
 +
color:#ffffff;
 +
}
 +
.editsection{
 +
color:#ffffff;
 +
}
 +
#globalWrapper{
 +
background-color:#aaaaaa;
 +
}
 +
#content{
 +
 +
background-color:#aaaaaa;
 +
}
 +
#menu-top{
 +
margin:0 auto;
 +
padding: 0 20px 1px 20px;
 +
position:absolute;
 +
left:100px; top:20px; width:900px; height:200px;
 +
z-index:10;
 +
opacity:0.95;
 +
  list-style: none;
 +
color:#ffffff;
 +
}
 +
li{
 +
float:left;
 +
}
 +
.menu-head{
 +
font-weight:bold;
 +
font-size: 14px;
 +
margin:0;
 +
padding:5px;
 +
}
 +
.menu-column{
 +
background-color: #555555;
 +
font-size:14px;
 +
width:150px;
 +
margin-right:20px;
 +
border: 1.5px solid white;
 +
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 +
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2));
 +
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 +
}
 +
.menu-sub-ul{
 +
display:none;
 +
background-color: #555555;
 +
color:#ffffff;
 +
font-weight:bold;
 +
margin-left:0px;
 +
}
 +
.menu-sub-ul a{
 +
color:#ffffff;
 +
}
 +
.menu-sub{
 +
clear:both;
 +
list-style: none;
 +
padding:5px;
 +
width:138px;
 +
}
 +
.menu-sub:hover {
 +
  background-color:#aaaaaa;
 +
}
 +
.menu-sub a:hover{
 +
  background-color:#aaaaaa;
 +
}
 +
#page{
 +
border-radius:2px;
 +
margin:40px 0 0 0;
 +
padding:0;
 +
font-family: Calibri;
 +
background-color:none;
 +
background-color: #ffffff;
 +
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 +
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 +
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 +
}
 +
#page-middle {
 +
padding: 50px 10px 10px 10px;
 +
}
 +
#page-table{
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  border-spacing: 10px;
 +
  background-color:transparent;
 +
}
 +
.page-box{
 +
border: 1px solid black;
 +
background-color: #eeeeee;
 +
position:relative;
 +
border-radius:4px;
 +
border: 3px solid white;
 +
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 +
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2));
 +
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 +
}
 +
#page-box0{
 +
width:755px;
 +
height:200px;
 +
padding:30px;
 +
position:relative;
 +
}
 +
.page-box0-slide{
 +
width:755px;
 +
height:200px;
 +
font-size:15px;
 +
padding:30px;
 +
text-align:justify;
 +
}
 +
#page-box0-pic{
 +
background-color:#ffffff;
 +
}
 +
#page-box0-pic img{
 +
    position: absolute;
 +
    margin: auto;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    }
 +
#page-box1{
 +
width:320px;
 +
height:515px;
 +
}
 +
#page-box2{
 +
width:480px;
 +
height:250px;
 +
}
 +
#page-box3{
 +
width:480px;
 +
height:250px;
 +
}
 +
#page-box4{
 +
width:815px;
 +
height:200px;
 +
}
 +
.page-box-bottom {
 +
display:none;
 +
width:100%;
 +
height:40%;
 +
position:absolute;
 +
bottom:0;
 +
left:0;
 +
background-image: -webkit-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
 +
background-image: -moz-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
 +
background-image: -o-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
 +
background-image: linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
 +
text-align:bottom;
 +
color:#eeeeee;
 +
}
 +
.page-bottom {
 +
margin-top:30px;
 +
opacity:1;
 +
}
 +
.page-bottom-sponsors{
 +
background-color:rgba(255,255,255,0.35);
 +
margin:0 40px 0 40px;
 +
border-radius:5px;
 +
}
 +
.bottom-headline{
 +
margin:10px 0 10px 0;
 +
text-align:center;
 +
font-size:22px;
 +
font-weight:bold;
 +
}
 +
.bottom-sponsor{
 +
margin:10px;
 +
}
 +
</style>
</html>
</html>

Revision as of 17:01, 27 April 2013

Retrieved from "http://2013.igem.org/Template:Team:Bonn:PageMenu"