Smadapoosi (Talk | contribs) |
|||
(215 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
+ | |||
<style> | <style> | ||
− | + | @import "https://fonts.googleapis.com/css?family=Poiret+One"; | |
− | + | body { | |
− | + | font-family: 'Poiret One', cursive; | |
− | + | margin: 0px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | div.header { | |
− | + | font-family: 'Poiret One', cursive; | |
− | + | background: #00274C; | |
+ | color: #ffcb05; | ||
+ | box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5); | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
} | } | ||
− | . | + | div.header a { |
− | + | ||
− | + | ||
− | + | ||
text-decoration: none; | text-decoration: none; | ||
− | + | color: inherit; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | div.header .header-1 { |
− | + | height: 100px; | |
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
} | } | ||
− | .nav | + | |
− | + | div.header div.nav { | |
+ | display: inline-flex; | ||
+ | align-items: flex-end; | ||
+ | float: right; | ||
+ | height: 100%; | ||
+ | padding: 4px 50px 0px 6px; | ||
+ | font-size: 2em; | ||
} | } | ||
− | .nav | + | |
− | + | div.header div.nav a { | |
− | + | border-radius: 8px 8px 0 0; | |
− | + | padding: 5px; | |
− | + | margin-right: 0px; | |
− | + | height: 2em; | |
− | + | width: 75px; | |
− | right: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .nav | + | div.header div.nav a.open { |
− | + | background: #ffcb05; | |
− | + | color: #00274C; | |
− | + | font-weight: bold; | |
} | } | ||
− | .nav | + | div.header div.nav a, div.header div.subnav a { |
− | + | display: inline-flex; | |
− | margin-left: | + | padding: 4px 6px; |
− | + | margin-left: 12px; | |
+ | bottom: 0px; | ||
+ | background: inherit; | ||
+ | color: inherit; | ||
} | } | ||
− | + | div.header div.subnav { | |
− | . | + | background: #ffcb05; |
− | + | color: #00274C; | |
+ | font-size: 1.5em; | ||
+ | padding: 12.5px 65px 20px 15px; | ||
+ | height: 2.25em; | ||
+ | overflow: hidden; | ||
} | } | ||
− | . | + | div.header div.subnav div { |
− | + | float: right; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | div.header div.subnav div.closed { | |
− | + | display: none; | |
} | } | ||
− | . | + | div.header div.subnav a:hover { |
− | + | text-decoration: underline; | |
− | + | ||
− | + | ||
} | } | ||
+ | |||
</style> | </style> | ||
<body> | <body> | ||
− | < | + | <div class="header"> |
− | < | + | <div class="header-1"> |
− | < | + | <div class="nav"> |
− | + | <a href="https://2016.igem.org/Team:Michigan" data-section="0" style="padding: 15px 20px 5px 20px; width: 110px; font-weight:650;">Home</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan" data-section="1" style="padding: 15px 20px 5px 20px; width: 120px; font-weight:650;" >Project</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Modeling" data-section="2" style="padding: 15px 20px 5px 20px; width: 160px; font-weight:650;">Modeling</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Team" data-section="3" style="padding: 15px 20px 5px 20px; width: 100px; font-weight:650;">Team</a> | |
− | + | <a href="#" data-section="4" style="padding: 15px 20px 5px 20px; width: 125px; font-weight:650;">BioBrick</a> | |
− | + | <a href="#" data-section="5" style="padding: 15px 20px 5px 20px; width: 235px; font-weight:650;">Human Practices</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Safety" data-section="6" style="padding: 15px 20px 5px 20px; width: 110px; font-weight:650;">Safety</a> | |
− | + | <a href="#" data-section="7" style="padding: 15px 20px 5px 20px; width: 130px; font-weight:650;">Awards</a> | |
− | + | </div> | |
− | + | </div> | |
− | < | + | <div class="subnav"> |
− | + | <div class="closed" id="subnav-1"> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Description" style="font-weight:bold;">Description</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Design" style="font-weight:bold;">Design</a> | |
− | </ | + | <a href="https://2016.igem.org/Team:Michigan/Experiments" style="font-weight:bold;">Experiments</a> |
− | + | <a href="https://2016.igem.org/Team:Michigan/Proof" style="font-weight:bold;">Proof of Concept</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Demonstrate" style="font-weight:bold;">Demonstrate</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Results" style="font-weight:bold;">Results</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Notebook"style="font-weight:bold;">Notebook</a> | |
− | + | </div> | |
− | + | <div class="closed" id="subnav-3"> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Team" style="font-weight:bold;">Team</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Collaborations" style="font-weight:bold;">Collaborations</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Attributions" style="font-weight:bold;">Attributions</a> | |
− | + | </div> | |
− | + | <div class="closed" id="subnav-4"> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Parts" style="font-weight:bold;">Basic Parts</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Composite_Part" style="font-weight:bold;">Composite Parts</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Part_Collection" style="font-weight:bold;">Part Collection</a> | |
− | + | </div> | |
− | </ | + | <div class="closed" id="subnav-5"> |
− | < | + | <a href="https://2016.igem.org/Team:Michigan/Integrated_Practices" style="font-weight:bold;">Integrated Practices</a> |
− | + | <a href="https://2016.igem.org/Team:Michigan/Engagement" style="font-weight:bold;">Engagement</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/factsheet" style="font-weight:bold;">Bench-to-Bedside Guide</a> | |
− | + | </div> | |
− | + | <div class="closed" id="subnav-7"> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Entrepreneurship" style="font-weight:bold;">Entrepreneurship</a> | |
− | < | + | <a href="https://2016.igem.org/Team:Michigan/Model" style="font-weight:bold;">Model</a> |
− | + | <a href="https://2016.igem.org/Team:Michigan/HP/Silver" style="font-weight:bold;">Human Practices Silver</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/HP/Gold" style="font-weight:bold;">Human Practices Gold</a> | |
− | + | <a href="https://2016.igem.org/Team:Michigan/Medals" style="font-weight:bold;">Medals</a> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <script> | |
− | + | $('.nav a').mouseenter( function() { | |
− | + | var id = '#subnav-' + $(this).attr('data-section'); | |
− | + | $('.subnav .open').toggleClass('open').toggleClass('closed'); | |
− | </ | + | $(id).toggleClass('open').toggleClass('closed'); |
+ | $(this).siblings('.open').toggleClass('open'); | ||
+ | $(this).addClass('open'); | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 03:31, 19 October 2016