Team:Groningen/Safety/Safety
From 2014.igem.org
(Difference between revisions)
Andries1990 (Talk | contribs) |
|||
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<html> | <html> | ||
+ | <style type="text/css"> | ||
+ | /*style for menu*/ | ||
+ | #main{ | ||
+ | border-left: 10px solid #A40004; | ||
+ | min-height:600px; | ||
+ | } | ||
- | + | #header{ | |
- | + | width: 100%; | |
- | + | overflow: hidden; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #team-logo{ | |
- | + | } | |
- | + | #title-box{ | |
- | + | height: 100%; | |
+ | overflow: hidden; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | } | ||
- | + | #title-bar{ | |
- | + | margin-top: 30px; | |
+ | height: 60%; | ||
+ | float:right; | ||
+ | } | ||
- | + | #page-title{ | |
- | + | font-size:24px; | |
+ | font-style: italic; | ||
+ | bottom: 20px; | ||
+ | } | ||
- | + | #lefter{ | |
- | + | float: left; | |
+ | margin-right: 10px; | ||
+ | } | ||
- | + | #menu{ | |
- | + | position: relative; | |
+ | width: 140px; | ||
+ | margin: 5px 0px 0px 20px; | ||
+ | float:left; | ||
+ | } | ||
- | + | #left-three-box{ | |
- | + | width: 30px; | |
+ | height: 30px; | ||
+ | margin-left:10px; | ||
+ | } | ||
- | + | .menu-item{ | |
- | + | position:relative; | |
+ | border-bottom: 2px solid #ccc; | ||
+ | line-height: 25px; | ||
+ | font-size: 16px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .sub-menu{ | ||
+ | margin: 0px 0px 5px 20px; | ||
+ | color: #000; | ||
+ | font-style: italic; | ||
+ | } | ||
- | + | .sub-menu-item{ | |
- | + | font-size: 12px; | |
- | + | position:relative; | |
- | + | border-bottom: 2px solid #fff; | |
- | + | line-height: 25px; | |
- | + | cursor:pointer; | |
- | + | } | |
- | + | .menu-item a { | |
- | + | text-decoration: none; | |
- | + | color: black; | |
+ | } | ||
+ | .menu-selected{ | ||
+ | color:#A40004; | ||
+ | border-bottom: 2px solid #A40004; | ||
+ | } | ||
- | + | #top-box { | |
- | + | position: fixed; | |
- | + | right: 30px; | |
- | + | top: 200px; | |
- | + | width: 100px; | |
+ | height: 80px; | ||
+ | background-color: #c4fbf8; | ||
+ | text-align: center; | ||
+ | } | ||
- | + | #top-box div{ | |
- | + | width: 3em; | |
- | + | height: 1em; | |
+ | } | ||
+ | #mycontent{ | ||
+ | float: left; | ||
+ | width: 78%; | ||
+ | font-size: 14px; | ||
+ | margin: 10px 0px 10px 10px; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | </style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <script type="text/javascript"> | ||
- | + | function setupMenu(imenuItem, isubmenuItem){ | |
- | + | //Initialize data | |
- | + | //Collapse all submenus | |
- | + | $(".sub-menu").data("collapsed", true).hide(); | |
- | + | //Show the selected menu item | |
- | + | var menuItem = $($(".menu-item").get(imenuItem)); | |
- | + | //Select the menu item | |
- | + | menuItem.addClass("menu-selected"); | |
- | + | //Select submenu item | |
- | + | var submenu = menuItem.children(".sub-menu"); | |
- | + | var hasSubmenu = (submenu.length > 0); | |
+ | if(hasSubmenu){ | ||
+ | submenu.data("collapsed", false).show(); | ||
+ | var submenuItem = $(submenu.children(".sub-menu-item").get(isubmenuItem)); | ||
+ | submenuItem.addClass("menu-selected"); | ||
+ | } | ||
+ | //Set events | ||
+ | $(".menu-item span").click(function(){ | ||
+ | var submenu = $(this).next(); | ||
+ | var hasSubmenu = (submenu.length > 0); | ||
+ | var collapsed = true; | ||
+ | if(hasSubmenu){ | ||
+ | collapsed = submenu.data("collapsed"); | ||
+ | } | ||
+ | //Select and expand this menu item | ||
+ | var parentDiv = $(this).parent(); | ||
+ | //Deselect and collapse all other menu items | ||
+ | $("div.menu-item").not(parentDiv) | ||
+ | .removeClass("menu-selected") | ||
+ | .children(".sub-menu") | ||
+ | .data("collapsed", true) | ||
+ | .slideUp(); | ||
+ | parentDiv.addClass("menu-selected"); | ||
+ | if(hasSubmenu){ | ||
+ | if(collapsed){ | ||
+ | submenu.data("collapsed", false).slideDown(); | ||
+ | }else{ | ||
+ | submenu.data("collapsed", true).slideUp(); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | $("div.sub-menu-item").click(function(){ | ||
+ | //Deselect other submenu items | ||
+ | $("div.sub-menu-item").removeClass("menu-selected"); | ||
+ | //Select this submenu item | ||
+ | $(this).addClass("menu-selected"); | ||
+ | }); | ||
+ | } | ||
- | + | function setupSectionNavs(){ | |
- | </ | + | $(document).ready(function() { |
+ | $("div.section").hide(); | ||
+ | $("div.section1").show(); | ||
+ | $("#section-nav li").click(function() { | ||
+ | $("div.section").hide(); | ||
+ | var sectionName = $(this).attr("class"); | ||
+ | $("div." + sectionName).show(); | ||
+ | }); | ||
+ | }); | ||
+ | } | ||
+ | </script> | ||
- | < | + | <body> |
+ | <div id="main"> | ||
+ | <div id="lefter"> | ||
+ | <div id="menu"> | ||
+ | <div class="menu-item"> | ||
+ | <span><a href="https://2013.igem.org/Team:Tsinghua/Main-Page">Main Page</a></span> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span>Introduction</span> | ||
+ | <div class="sub-menu"> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Introduction-Background">Background</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Introduction-Challenge">Challenge</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Introduction-Our-Idea">Our Idea</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span>Project</span> | ||
+ | <div class="sub-menu"> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Overview">Overview</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Sensor">Part1: Sensor</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Reporter">Part2: Reporter</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Switching-System">Part3: Switching System</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Product">Product</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Project-Summary">Summary</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
- | < | + | <div class="menu-item"> |
+ | <span><a href="https://2013.igem.org/Team:Tsinghua/Modeling">Modeling</a></span> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span>Outreach</span> | ||
+ | <div class="sub-menu"> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Human-Practice">Human practice</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/OutReach-Satety">Safety</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/OutReach-Collaboration">Collaboration</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span>Achievement</span> | ||
+ | <div class="sub-menu"> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/BioBricks">BioBricks</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Achivement-Judging-Criteria">Judging Criteria</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span>Notebook</span> | ||
+ | <div class="sub-menu"> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Notebook-Protocol">Protocol</a> | ||
+ | </div> | ||
+ | <div class="sub-menu-item"> | ||
+ | <a href="https://2013.igem.org/Team:Tsinghua/Lablog">Lablog</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span><a href="https://2013.igem.org/Team:Tsinghua/Team">Team</a><a></a></span> | ||
+ | </div> | ||
+ | <div class="menu-item"> | ||
+ | <span><a href="https://2013.igem.org/Team:Tsinghua/Acknowledgement">Acknowledgements</a><a></a></span> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | initialize(); | ||
+ | setupMenu(2, 1); | ||
+ | </script> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
- | </ | + | <script type="text/javascript"> |
+ | setupSectionNavs(); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 09:04, 23 July 2014