Team:Tianjin/frame/modeling

From 2012.igem.org

(Difference between revisions)
Line 17: Line 17:
}}
}}
-
<html>
 
-
<head>
 
-
<script type="text/javascript">
 
-
$(document).ready(function()
 
-
{
 
-
//slides the element with class "menu_body" when mouse is over the paragraph
 
-
$("#secondpane p.menu_head").mouseover(function()
 
-
    {
 
-
    $(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
 
-
        $(this).siblings();
 
-
});
 
-
});
 
-
</script>
 
-
 
-
<script type="text/javascript">
 
-
function getScrollTop() {
 
-
    var scrollPos;
 
-
    if (window.pageYOffset) {
 
-
        scrollPos = window.pageYOffset;
 
-
    }
 
-
    else if (document.compatMode && document.compatMode != 'BackCompat') {
 
-
        scrollPos = document.documentElement.scrollTop;
 
-
    }
 
-
    else if (document.body) {
 
-
        scrollPos = document.body.scrollTop;
 
-
    }
 
-
    if(scrollPos < 200){
 
-
document.getElementById("secondpane").className=" ";
 
-
}
 
-
else{
 
-
document.getElementById("secondpane").className="menu_list";
 
-
}
 
-
}
 
-
window.onscroll=getScrollTop;
 
-
</script>
 
-
 
-
<style type="text/css">
 
-
#secondpane {color:#fff;
 
-
width: 180px;
 
-
}
 
-
.menu_list {
 
-
position:fixed;top:0;}
 
-
.menu_head {
 
-
padding: 5px 10px;
 
-
cursor: pointer;
 
-
position: relative;
 
-
border:1px solid #fff;
 
-
margin:1px;
 
-
    font-weight:bold;
 
-
    background: #ffbe10;
 
-
color:#fff
 
-
}
 
-
.menu_head:hover
 
-
{
 
-
cursor: pointer;
 
-
color: #fff;
 
-
background: #d39f10;
 
-
text-decoration: none;
 
-
background-position: 0 0;
 
-
}
 
-
.menu_body {
 
-
display:none;
 
-
}
 
-
.menu_children {
 
-
background: #aaa;
 
-
cursor: pointer;
 
-
padding: 5px 10px;
 
-
border-top: 1px solid #fff;
 
-
border-bottom: 1px solid #fff;
 
-
border-left: 1px solid #fff;
 
-
border-right: 1px solid #fff;
 
-
}
 
-
.menu_body a{
 
-
  display:block;
 
-
  color:#fff;
 
-
  padding-left:10px;
 
-
  font-weight:bold;
 
-
  text-decoration:none;
 
-
}
 
-
.menu_children:hover{
 
-
cursor: pointer;
 
-
  color: #fff;
 
-
  text-decoration:none;
 
-
  background:#777777;
 
-
  }
 
-
 
-
</style>
 
-
</head>
 
-
<body>
 
-
<div style="float:left;">
 
-
  <div id="secondpane"> <!--Code for menu starts here-->
 
-
<p class="menu_head">Header-1</p>
 
-
<div class="menu_body">
 
-
        <div class="menu_children">
 
-
<a href="#">Link-1</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-2</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-3</a>
 
-
        </div>
 
-
</div>
 
-
<p class="menu_head">Header-2</p>
 
-
<div class="menu_body">
 
-
        <div class="menu_children">
 
-
<a href="#">Link-1</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-2</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-3</a>
 
-
        </div>
 
-
</div>
 
-
<p class="menu_head">Header-3</p>
 
-
<div class="menu_body">
 
-
        <div class="menu_children">
 
-
<a href="#">Link-1</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-2</a>
 
-
        </div>
 
-
        <div class="menu_children">
 
-
<a href="#">Link-3</a>
 
-
        </div>
 
-
      </div>
 
-
  </div>      <!--Code for menu ends here-->
 
-
</div>
 
-
</body>
 
-
</html>
 
-
<div id="text-content">
 

Revision as of 17:08, 21 September 2012