Team:Tianjin/frame/modeling

From 2012.igem.org

(Difference between revisions)
Line 17: Line 17:
}}
}}
 +
<html>
 +
<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>
 +
 +
<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>
 +
<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>
 +
</html>
<div id="text-content">
<div id="text-content">

Revision as of 17:29, 21 September 2012