|
|
(153 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
- | <link href='http://fonts.googleapis.com/css?family=Audiowide|Share+Tech+Mono' rel='stylesheet' type='text/css'>
| |
- | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
| |
- | </head>
| |
| | | |
- | <style> | + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| | | |
- | /* Hide Defaults */ | + | <script type="text/javascript"> |
- | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| + | |
- | display:none;}
| + | |
- | #top-section {
| + | |
- | border: none;
| + | |
- | height: 0px;}
| + | |
- | #content {
| + | |
- | border: none;}
| + | |
| | | |
- | /* Background */
| + | $(document).ready(function(){ |
- | body {
| + | |
- | background-image:url("http://oi62.tinypic.com/2uek64o.jpg");
| + | |
- | }
| + | |
- | div#bodyContent {
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
- | div#menubar {
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
- | div#content{
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
| | | |
- | /* Text Styles */ | + | // PLEASE READ BELOW COMMENT |
- | h1{
| + | // |
- | font: 400 45px/0.5 'Audiowide', Helvetica, sans-serif;
| + | // don't worry, we're open source --> https://github.com/raptor-igem/2014hs-website |
- | text-align:center;
| + | // |
- | border-bottom: medium none !important;
| + | // PLEASE READ ABOVE COMMENT |
- | }
| + | |
- | p{
| + | $("body.page-Team_Ravenwood_Raptors").append("<iframe class='real' src='http://raptor-igem.github.io/2014hs-website/'></iframe>"); |
- | font: 400 14px/1.5 'Share Tech Mono', Times, serif;
| + | }); |
- | } | + | |
| | | |
- | /* Navigation */ | + | </script> |
- | #cssmenu {
| + | |
- | position: relative;
| + | <style type="text/css"> |
- | height: 44px;
| + | body { |
- | background: #e6e6e6;
| + | overflow-x: hidden; |
- | width: auto;
| + | height: 100%; |
- | }
| + | } |
- | #cssmenu ul {
| + | .real { |
- | list-style: none;
| + | |
- | padding: 0;
| + | |
- | margin: 0;
| + | |
- | line-height: 1;
| + | |
- | }
| + | |
- | #cssmenu > ul {
| + | |
- | position: relative;
| + | |
- | display: block;
| + | |
- | background: #e6e6e6;
| + | |
- | height: 32px;
| + | |
- | width: 100%;
| + | |
- | z-index: 500;
| + | |
- | }
| + | |
- | #cssmenu > ul > li {
| + | |
- | display: block;
| + | |
- | position: relative;
| + | |
- | float: left;
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | #cssmenu > ul > #menu-button {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | #cssmenu ul li a {
| + | |
- | display: block;
| + | |
- | font-family: Helvetica, sans-serif;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | #cssmenu > ul > li > a {
| + | |
- | font-size: 14px;
| + | |
- | font-weight: bold;
| + | |
- | padding: 15px 20px;
| + | |
- | color: #7a8189;
| + | |
- | text-transform: uppercase;
| + | |
- | -webkit-transition: color 0.25s ease-out;
| + | |
- | -moz-transition: color 0.25s ease-out;
| + | |
- | -ms-transition: color 0.25s ease-out;
| + | |
- | -o-transition: color 0.25s ease-out;
| + | |
- | transition: color 0.25s ease-out;
| + | |
- | }
| + | |
- | #cssmenu > ul > li.has-sub > a {
| + | |
- | padding-right: 32px; | + | |
- | }
| + | |
- | #cssmenu > ul > li:hover > a {
| + | |
- | color: #9c9c9c;
| + | |
- | }
| + | |
- | #cssmenu li.has-sub::after {
| + | |
- | display: block;
| + | |
- | content: '';
| + | |
- | position: absolute;
| + | |
- | width: 0;
| + | |
- | height: 0; | + | |
- | } | + | |
- | #cssmenu > ul > li.has-sub::after {
| + | |
- | right: 10px;
| + | |
- | top: 20px;
| + | |
- | border: 5px solid transparent;
| + | |
- | border-top-color: #7a8189;
| + | |
- | }
| + | |
- | #cssmenu > ul > li:hover::after {
| + | |
- | border-top-color: #9c9c9c;
| + | |
- | }
| + | |
- | #indicatorContainer {
| + | |
| position: absolute; | | position: absolute; |
- | height: 12px;
| |
| width: 100%; | | width: 100%; |
- | bottom: 0px; | + | height: 99%; |
| + | background-color: white; |
| + | top: 0%; |
| + | left: 0%; |
| overflow: hidden; | | overflow: hidden; |
- | z-index: -1; | + | z-index: 999; |
| } | | } |
- | #pIndicator {
| |
- | position: absolute;
| |
- | height: 0;
| |
- | width: 100%;
| |
- | border: 12px solid transparent;
| |
- | border-top-color: #2b2f3a;
| |
- | z-index: -2;
| |
- | -webkit-transition: left .25s ease;
| |
- | -moz-transition: left .25s ease;
| |
- | -ms-transition: left .25s ease;
| |
- | -o-transition: left .25s ease;
| |
- | transition: left .25s ease;
| |
- | }
| |
- | #cIndicator {
| |
- | position: absolute;
| |
- | height: 0;
| |
- | width: 100%;
| |
- | border: 12px solid transparent;
| |
- | border-top-color: #2b2f3a;
| |
- | top: -12px;
| |
- | right: 100%;
| |
- | z-index: -2;
| |
- | }
| |
- | #cssmenu ul ul {
| |
- | position: absolute;
| |
- | left: -9999px;
| |
- | top: 70px;
| |
- | opacity: 0;
| |
- | -webkit-transition: opacity .3s ease, top .25s ease;
| |
- | -moz-transition: opacity .3s ease, top .25s ease;
| |
- | -ms-transition: opacity .3s ease, top .25s ease;
| |
- | -o-transition: opacity .3s ease, top .25s ease;
| |
- | transition: opacity .3s ease, top .25s ease;
| |
- | z-index: 1000;
| |
- | }
| |
- | #cssmenu ul ul ul {
| |
- | top: 37px;
| |
- | padding-left: 5px;
| |
- | }
| |
- | #cssmenu ul ul li {
| |
- | position: relative;
| |
- | }
| |
- | #cssmenu > ul > li:hover > ul {
| |
- | left: auto;
| |
- | top: 44px;
| |
- | opacity: 1;
| |
- | }
| |
- | #cssmenu ul ul li:hover > ul {
| |
- | left: 170px;
| |
- | top: 0;
| |
- | opacity: 1;
| |
- | }
| |
- | #cssmenu ul ul li a {
| |
- | width: 130px;
| |
- | border-bottom: 1px solid #eee;
| |
- | padding: 10px 20px;
| |
- | font-size: 12px;
| |
- | color: #9ea2a5;
| |
- | background: #fff;
| |
- | -webkit-transition: all .35s ease;
| |
- | -moz-transition: all .35s ease;
| |
- | -ms-transition: all .35s ease;
| |
- | -o-transition: all .35s ease;
| |
- | transition: all .35s ease;
| |
- | }
| |
- | #cssmenu ul ul li:hover > a {
| |
- | background: #f6f6f6;
| |
- | color: #8c9195;
| |
- | }
| |
- | #cssmenu ul ul li:last-child > a,
| |
- | #cssmenu ul ul li.last > a {
| |
- | border-bottom: 0;
| |
- | }
| |
- | .submenuArrow {
| |
- | border: 6px solid transparent;
| |
- | width: 0;
| |
- | height: 0;
| |
- | border-bottom-color: #fff;
| |
- | position: absolute;
| |
- | top: -12px;
| |
- | }
| |
- | #cssmenu ul ul li.has-sub::after {
| |
- | border: 4px solid transparent;
| |
- | border-left-color: #9ea2a5;
| |
- | right: 10px;
| |
- | top: 12px;
| |
- | -moz-transition: all .2s ease;
| |
- | -ms-transition: all .2s ease;
| |
- | -o-transition: all .2s ease;
| |
- | transition: all .2s ease;
| |
- | -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
| |
- | }
| |
- | #cssmenu ul ul li.has-sub:hover::after {
| |
- | border-left-color: #fff;
| |
- | right: -5px;
| |
- | -webkit-transform: rotateY(180deg);
| |
- | -ms-transform: rotateY(180deg);
| |
- | -moz-transform: rotateY(180deg);
| |
- | -o-transform: rotateY(180deg);
| |
- | transform: rotateY(180deg);
| |
- | }
| |
- | @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
| |
- | #cssmenu {
| |
- | width: auto;
| |
- | }
| |
- | #cssmenu ul {
| |
- | width: auto;
| |
- | }
| |
- | #cssmenu .submenuArrow,
| |
- | #cssmenu #indicatorContainer {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu > ul {
| |
- | height: auto;
| |
- | display: block;
| |
- | }
| |
- | #cssmenu > ul > li {
| |
- | float: none;
| |
- | }
| |
- | #cssmenu li,
| |
- | #cssmenu > ul > li {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu ul ul,
| |
- | #cssmenu ul ul ul,
| |
- | #cssmenu ul > li:hover > ul,
| |
- | #cssmenu ul ul > li:hover > ul {
| |
- | position: relative;
| |
- | left: auto;
| |
- | top: auto;
| |
- | topacity: 1;
| |
- | padding-left: 0;
| |
- | }
| |
- | #cssmenu ul .has-sub::after {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu ul li a {
| |
- | padding: 12px 20px;
| |
- | }
| |
- | #cssmenu ul ul li a {
| |
- | border: 0;
| |
- | background: none;
| |
- | width: auto;
| |
- | padding: 8px 35px;
| |
- | }
| |
- | #cssmenu ul ul li:hover > a {
| |
- | background: none;
| |
- | color: #8c9195;
| |
- | }
| |
- | #cssmenu ul ul ul a {
| |
- | padding: 8px 50px;
| |
- | }
| |
- | #cssmenu ul ul ul ul a {
| |
- | padding: 8px 65px;
| |
- | }
| |
- | #cssmenu ul ul ul ul ul a {
| |
- | padding: 8px 80px;
| |
- | }
| |
- | #cssmenu ul ul ul ul ul ul a {
| |
- | padding: 8px 95px;
| |
- | }
| |
- | #cssmenu > ul > #menu-button {
| |
- | display: block;
| |
- | cursor: pointer;
| |
- | }
| |
- | #cssmenu #menu-button > a {
| |
- | padding: 14px 20px;
| |
- | }
| |
- | #cssmenu ul.open li,
| |
- | #cssmenu > ul.open > li {
| |
- | display: block;
| |
- | }
| |
- | #cssmenu > ul.open > li#menu-button > a {
| |
- | color: #fff;
| |
- | border-bottom: 1px solid rgba(150, 150, 150, 0.1);
| |
- | }
| |
- | #cssmenu #menu-button::after {
| |
- | display: block;
| |
- | content: '';
| |
- | position: absolute;
| |
- | height: 3px;
| |
- | width: 22px;
| |
- | border-top: 2px solid #7a8189;
| |
- | border-bottom: 2px solid #7a8189;
| |
- | right: 20px;
| |
- | top: 15px;
| |
- | }
| |
- | #cssmenu #menu-button::before {
| |
- | display: block;
| |
- | content: '';
| |
- | position: absolute;
| |
- | height: 3px;
| |
- | width: 22px;
| |
- | border-top: 2px solid #7a8189;
| |
- | right: 20px;
| |
- | top: 25px;
| |
- | }
| |
- | #cssmenu ul.open #menu-button::after,
| |
- | #cssmenu ul.open #menu-button::before {
| |
- | border-color: #fff;
| |
- | }
| |
- | }
| |
- | #cssmenu {
| |
- | padding-left: 200px !important;
| |
- | }
| |
- |
| |
| </style> | | </style> |
| | | |
| + | </head> |
| <body> | | <body> |
| | | |
- | <!-- jQuery -->
| + | <div id="page-contain"> |
- | <script>
| + | <div class="page-real-main"> |
- | $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
| + | </div> |
- | var activeElement = $('#cssmenu>ul>li:first');
| + | |
- | $('#cssmenu>ul>li').each(function() {
| + | |
- | if ($(this).hasClass('active')) {
| + | |
- | activeElement = $(this);
| + | |
- | }
| + | |
- | });
| + | |
- | var posLeft = activeElement.position().left;
| + | |
- | var elementWidth = activeElement.width();
| + | |
- | posLeft = posLeft + elementWidth/2 -6;
| + | |
- | if (activeElement.hasClass('has-sub')) {
| + | |
- | posLeft -= 6;
| + | |
- | }
| + | |
- | $('#cssmenu #pIndicator').css('left', posLeft);
| + | |
- | var element, leftPos, indicator = $('#cssmenu pIndicator');
| + | |
- | $("#cssmenu>ul>li").hover(function() {
| + | |
- | element = $(this);
| + | |
- | var w = element.width();
| + | |
- | if ($(this).hasClass('has-sub'))
| + | |
- | {
| + | |
- | leftPos = element.position().left + w/2 - 12;
| + | |
- | }
| + | |
- | else {
| + | |
- | leftPos = element.position().left + w/2 - 6;
| + | |
- | }
| + | |
- | $('#cssmenu #pIndicator').css('left', leftPos);
| + | |
- | }
| + | |
- | , function() {
| + | |
- | $('#cssmenu #pIndicator').css('left', posLeft);
| + | |
- | });
| + | |
- | $('#cssmenu>ul>.has-sub>ul').append('<div class="submenuArrow"></div>');
| + | |
- | $('#cssmenu>ul').children('.has-sub').each(function() {
| + | |
- | var posLeftArrow = $(this).width();
| + | |
- | posLeftArrow /= 2;
| + | |
- | posLeftArrow -= 12;
| + | |
- | $(this).find('.submenuArrow').css('left', posLeftArrow);
| + | |
- | });
| + | |
- | $('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
| + | |
- | $( "#menu-button" ).click(function(){
| + | |
- | if ($(this).parent().hasClass('open')) {
| + | |
- | $(this).parent().removeClass('open');
| + | |
- | }
| + | |
- | else {
| + | |
- | $(this).parent().addClass('open');
| + | |
- | }
| + | |
- | });
| + | |
- | </script> | + | |
- | | + | |
- | <!-- Logo -->
| + | |
- | <h1>Ravenwood Raptors</h1>
| + | |
- | | + | |
- | <!-- Navigation -->
| + | |
- | <div id='cssmenu'>
| + | |
- | <ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors'><span>Home</span></a></li>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Team'><span>Team</span></a>
| + | |
- | <li class='has-sub'><a href='#'><span>Project</span></a>
| + | |
- | <ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Idea'><span>Overview</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Process'><span>Process</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Results'><span>Results</span></a>
| + | |
- | </ul>
| + | |
- | <li class='has-sub'><a href='#'><span>Technicalities</span></a>
| + | |
- | <ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Technicalities/Safety'><span>Safety</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/Technicalities/Credits'><span>Credits</span></a>
| + | |
- | </ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Sponsors'><span>Sponsors</span></a>
| + | |
- | </ul>
| + | |
| </div> | | </div> |
| | | |
| </body> | | </body> |
- |
| |
| </html> | | </html> |