Team:Tianjin/frame/modeling

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html><style>body{background:url("/wiki/images/9/9e/TJU2012-Pg-Mode-bg.png") !important;}</style>
<html><style>body{background:url("/wiki/images/9/9e/TJU2012-Pg-Mode-bg.png") !important;}</style>
 +
</html>
</html>
{{:Team:Tianjin/header
{{:Team:Tianjin/header
Line 17: Line 18:
}}
}}
<div id="text-content">
<div id="text-content">
 +
<html>
 +
<script type="text/javascript">
 +
<!--//---------------------------------+
 +
//  Developed by Roshan Bhattarai
 +
//  Visit http://roshanbh.com.np for this script and more.
 +
//  This notice MUST stay intact for legal use
 +
// --------------------------------->
 +
$(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">
 +
.menu_list {
 +
width: 190px;
 +
}
 +
.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; margin-left:5px;">
 +
  <p><strong>Works with mouse over </strong></p>
 +
  <div class="menu_list" 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>

Revision as of 12:19, 20 September 2012

Works with mouse over

Retrieved from "http://2012.igem.org/Team:Tianjin/frame/modeling"