Team:Tianjin/header

From 2012.igem.org

(Difference between revisions)
Line 16: Line 16:
   $(this).stop().animate({opacity: 0}, "slow");
   $(this).stop().animate({opacity: 0}, "slow");
});
});
 +
});
 +
</script>
 +
<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>
</script>
Line 53: Line 65:
<div id="wrap">
<div id="wrap">
<div id="secondwrap" style="border:8px solid {{{BorCor}}}">
<div id="secondwrap" style="border:8px solid {{{BorCor}}}">
 +
<div style="float:left; margin-left:20px;"> <!--This is the second division of right-->
 +
  <p><strong>Works with mouse over </strong></p>
 +
  <div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
 +
<p class="menu_head" style="background: {{{BorCor}}}">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" style="background: {{{BorCor}}}">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" style="background: {{{BorCor}}}">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>
<div id="text-content">
<div id="text-content">

Revision as of 11:49, 20 September 2012

Works with mouse over