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
[[file:{{{image}}}|link=]]
Works with mouse over