"
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
