|
|
(31 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{UCSC-Styles}} | + | {{UCSC-Header}} |
| | | |
| <html> | | <html> |
| | | |
− | <!-- External scripts -->
| + | <style> |
| | | |
− | <!-- Fonts Used On Page --> | + | h1 { |
− | <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> | + | font-family: 'objektiv-mk1'!important; |
− | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'> | + | font-size: 300%; /*!important*/ |
| + | font-weight: 300 !important; |
| + | width: 80%; |
| + | } |
| | | |
| + | h2 { |
| + | font-family: 'objektiv-mk1' !important; |
| + | font-size: 200%; |
| + | font-weight: 300; |
| + | } |
| | | |
− | <!-- For mobile friendly version of website. -->
| |
− | <head>
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
| |
− | </head>
| |
| | | |
− | <!-- Functionallity and behaviour JS -->
| + | .proj-button { |
− | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
| + | position: relative; |
− | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
| + | width: 10%; |
| + | text-decoration: none !important; |
| + | } |
| | | |
− | <!-- Necessary for nav bar header-->
| + | .proj-button-image { |
− | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | + | opacity: 1; |
− | <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> --> | + | display: inline-block; |
| + | width: 14%; |
| + | height: auto; |
| + | transition: .5s ease; |
| + | backface-visibility: hidden; |
| + | margin: 20px; |
| + | } |
| | | |
− | <!-- TypeKit Fonts (BW) -->
| + | .proj-button-desc { |
− | <script src="https://use.typekit.net/hii0ztv.js"></script> | + | transition: .5s ease; |
− | <script>try{Typekit.load({ async: true });}catch(e){}</script> | + | opacity: 0; |
| + | position: absolute; |
| + | top: 100%; |
| + | left: 50%; |
| + | background: transparent; |
| + | transform: translate(-50%, -50%); |
| + | -ms-transform: translate(-50%, -50%) |
| + | } |
| | | |
− | <style type="text/css">
| + | .proj-button:hover .proj-button-image { |
− | * {
| + | opacity: 0.2; |
− | margin:0;
| + | } |
− | padding:0;
| + | |
− | text-decoration:none
| + | |
− | }
| + | |
| | | |
− | body {
| + | .proj-button:hover .proj-button-desc { |
− | background:#555;
| + | opacity: 0.8; |
− | }
| + | } |
| | | |
− | header {
| + | .overlap-button-text { |
− | z-index: 9999;
| + | background-color: transparent; |
− | position:relative;
| + | color: black; |
− | width:100%;
| + | font-size: 20px; |
− | background:#333;
| + | font-family: "Objektiv-mk1" !important; |
− | }
| + | font-weight: 400 !important; |
| + | padding: 16px 32px; |
| + | } |
| | | |
− | .logo-header-custom {
| + | .desktop-frontpage { |
− | position:relative;
| + | display: block; |
− | z-index:123;
| + | user-drag: none; |
− | padding-left: 12px;
| + | user-select: none; |
− | padding-right: 10px;
| + | -moz-user-select: none; |
− | padding-top: 2px;
| + | -webkit-user-drag: none; |
− | padding-bottom: 2px;
| + | -webkit-user-select: none; |
− | font:18px verdana;
| + | -ms-user-select: none; |
− | color:#6DDB07;
| + | background: honeydew; |
− | float:left;
| + | width: 80%; |
− | width:15%
| + | padding: 40px 0px; |
− | }
| + | } |
| | | |
− | .logo-header-custom a {
| + | .mobile-frontpage { |
− | color:#6DDB07;
| + | display: none; |
− | }
| + | } |
| | | |
− | nav {
| + | @media (max-width: 768px) { |
− | position:relative;
| + | |
− | width:100%;
| + | |
− | margin:0 auto;
| + | |
− | }
| + | |
| | | |
− | #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
| + | h1 { |
− | border:0; | + | font-family: 'objektiv-mk1'; /*!important*/ |
− | list-style:none;
| + | font-size: 250%; /*!important*/ |
− | margin-bottom: -1px;
| + | } |
− | display:block; | + | |
− | position:relative;
| + | |
− | -webkit-box-sizing:border-box;
| + | |
− | -moz-box-sizing:border-box;
| + | |
− | box-sizing:border-box
| + | |
− | }
| + | |
| | | |
− | #cssmenu:after,#cssmenu > ul:after {
| + | h2 { |
− | content:"."; | + | font-family: 'objektiv-mk1'; /*!important*/ |
− | display:block; | + | font-size: 20px; /*!important*/ |
− | clear:both;
| + | } |
− | visibility:hidden;
| + | |
− | line-height:0;
| + | |
− | height:0
| + | |
− | }
| + | |
| | | |
− | #cssmenu #head-mobile {
| + | .overlap-button-text { |
− | display:none
| + | background-color: rgba(94, 94, 94, 0.5); |
− | }
| + | border-radius: 60px; |
| + | color: white; |
| + | } |
| | | |
− | #cssmenu {
| + | .proj-button-image { |
− | font-family:"Objektiv-mk1";
| + | opacity: 0.7; |
− | background: #fff;
| + | display: inline-block; |
− | top: 16px;
| + | width: 30%; |
− | }
| + | height: auto; |
| + | transition: .5s ease; |
| + | backface-visibility: hidden; |
| + | } |
| | | |
− | #cssmenu > ul > li {
| + | .desktop-frontpage { |
− | float:right;
| + | width: 95%; |
− | }
| + | } |
| | | |
− | #cssmenu > ul > li > a {
| + | .proj-button-desc { |
− | padding:17px;
| + | transition: .5s ease; |
− | font-size:14px;
| + | opacity: 1; |
− | letter-spacing:1px;
| + | |
− | text-decoration:none;
| + | |
− | color:#333;
| + | |
− | font-weight:300;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
| + | |
− | color:#fff !important;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul li:hover {
| + | |
− | color: white !important;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
| + | |
− | background-color:#50A500!important;
| + | |
− | -webkit-transition:background .3s ease;
| + | |
− | -ms-transition:background .3s ease;
| + | |
− | transition:background .3s ease;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li.has-sub > a {
| + | |
− | padding-right:30px | + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li.has-sub > a:after {
| + | |
− | position:absolute;
| + | |
− | top:28px;
| + | |
− | right:11px;
| + | |
− | width:8px;
| + | |
− | height:2px;
| + | |
− | display:block;
| + | |
− | background:#363636;
| + | |
− | content:''
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li.has-sub > a:before {
| + | |
− | position:absolute;
| + | |
− | top:25px;
| + | |
− | right:14px;
| + | |
− | display:block;
| + | |
− | width:2px;
| + | |
− | height:8px;
| + | |
− | background:#363636;
| + | |
− | content:'';
| + | |
− | -webkit-transition:all .25s ease;
| + | |
− | -ms-transition:all .25s ease; | + | |
− | transition:all .25s ease
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li.has-sub:hover > a:before {
| + | |
− | top:29px;
| + | |
− | height:0
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul {
| + | |
− | position:fixed;
| + | |
− | left:-9999px;
| + | |
− | top: 75px;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li {
| + | |
− | height:0;
| + | |
− | line-height: 1;
| + | |
− | -webkit-transition:all .25s ease;
| + | |
− | -ms-transition:all .25s ease;
| + | |
− | background: #fff;
| + | |
− | transition: all .25s ease;
| + | |
− | border-bottom: 1px solid #999;
| + | |
− | border-left: 1px solid #999;
| + | |
− | border-right: 1px solid #999;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li:hover {
| + | |
− | background-color: #DCDCDC;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li.has-sub:hover {
| + | |
− | background-color: #DCDCDC !important;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu li:hover > ul {
| + | |
− | left:auto
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu li:hover > ul > li {
| + | |
− | height:35px
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li a {
| + | |
− | border-bottom:1px solid rgba(150,150,150,0.15);
| + | |
− | padding:11px 15px;
| + | |
− | width:200px;
| + | |
− | font-size:11px;
| + | |
− | text-decoration:none;
| + | |
− | color:#333;
| + | |
− | font-weight:300;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
| + | |
− | border-bottom:0
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
| + | |
− | color:#fff
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li.has-sub > a:after {
| + | |
− | position:absolute;
| + | |
− | top:16px;
| + | |
− | right:11px;
| + | |
− | display:block;
| + | |
− | width:8px;
| + | |
− | height:2px;
| + | |
− | background:#363636;
| + | |
− | content:''
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li.has-sub > a:before {
| + | |
− | position:absolute;
| + | |
− | top:13px;
| + | |
− | right:14px;
| + | |
− | display:block;
| + | |
− | width:2px;
| + | |
− | height:8px;
| + | |
− | background:#363636;
| + | |
− | content:'';
| + | |
− | -webkit-transition:all .25s ease;
| + | |
− | -ms-transition:all .25s ease;
| + | |
− | transition:all .25s ease
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul > li.has-sub:hover > a:before {
| + | |
− | top:17px;
| + | |
− | height:0
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
| + | |
− | background:#363636;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul ul li.active a {
| + | |
− | border-left:1px solid #333
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {
| + | |
− | border-top:1px solid #333
| + | |
− | }
| + | |
− | | + | |
− | @media screen and (min-width: 1208px) {
| + | |
− | | + | |
− | /*#bodyContent h4 {
| + | |
− | margin-bottom: 0px;
| + | |
− | position: fixed;
| + | |
− | top: 12px;
| + | |
− | right: 5px;
| + | |
− | font-size: 80%;
| + | |
− | }*/
| + | |
− | | + | |
− | #cssmenu ul ul li {
| + | |
− | left: -28px;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul li a:hover {
| + | |
− | color: white !important;
| + | |
− | background-color: #1B4900 !important;
| + | |
− | }
| + | |
− | | + | |
− | #cssmenu ul ul ul li {
| + | |
− | position: relative;
| + | |
− | left: 171px !important;
| + | |
− | top: 34px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | #cssmenu ul ul ul a:before{
| + | |
− | display: none;
| + | |
| position: absolute; | | position: absolute; |
− | left: -9999px;
| + | top: 100%; |
− | top: 20px; | + | left: 50%; |
− | }
| + | transform: translate(-50%, -50%); |
− | | + | -ms-transform: translate(-50%, -50%) |
− | #cssmenu ul ul ul a:after {
| + | } |
− | display: block; | + | |
− | position: absolute; | + | |
− | left: -9999px; | + | |
− | top: 20px;
| + | |
− | }
| + | |
− | | + | |
− | h4 {
| + | |
− | display: none;
| + | |
− | }
| + | |
| } | | } |
| | | |
− | @media screen and (min-width: 200px) and (max-width:1208px){ | + | @media (max-width: 576px) { |
| | | |
− | .logo-header-custom2 {
| + | .proj-button-image { |
− | display:none | + | opacity: 0.7; |
− | }
| + | display: inline-block; |
| + | width: 38%; |
| + | height: auto; |
| + | transition: .5s ease; |
| + | backface-visibility: hidden; |
| + | } |
| | | |
− | header {
| + | .proj-button-desc { |
− | display: block; | + | transition: .5s ease; |
− | z-index: 999999; | + | opacity: 1; |
− | }
| + | position: absolute; |
− |
| + | top: 100%; |
− | nav {
| + | left: 50%; |
− | width:100%; | + | transform: translate(-50%, -50%); |
− | z-index: 999999; | + | -ms-transform: translate(-50%, -50%) |
− | }
| + | } |
| | | |
− | h4 {
| + | .desktop-frontpage { |
− | display: block;
| + | display: none; |
− | }
| + | } |
| | | |
− | #cssmenu {
| + | .mobile-frontpage { |
− | display: block;
| + | display: block; |
− | width:100%;
| + | user-drag: none; |
− | z-index: 999999;
| + | user-select: none; |
− | }
| + | -moz-user-select: none; |
| + | -webkit-user-drag: none; |
| + | -webkit-user-select: none; |
| + | -ms-user-select: none; |
| + | background: honeydew; |
| + | width: 96%; |
| + | padding-top: 5px; |
| + | } |
| | | |
− | #cssmenu ul {
| + | .overlap-button-text { |
− | z-index: 9999;
| + | background-color: rgba(94, 94, 94, 0.5); |
− | width:100%;
| + | border-radius: 60px; |
− | display:none;
| + | color: white; |
− | margin-left: 0px;
| + | font-size: 13px; |
− | margin-top: 20px;
| + | } |
− | }
| + | } |
| | | |
− | #cssmenu ul li { | + | </style> |
− | width:100%; | + | <head> |
− | border-top:1px solid #444;
| + | <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros"> |
− | border-bottom: 1px solid #444;
| + | <title>Santa Cruz IGEM</title> |
− | } | + | </head> |
| | | |
− | #cssmenu ul li,#cssmenu ul li a {
| + | <div class="page"> |
− | line-height: 0.6;
| + | <center> |
− | }
| + | <div class="desktop-frontpage"> |
| + | <img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;"> |
| + | </div> |
| + | <center> |
| | | |
− | #cssmenu ul li:hover {
| + | <div class="mobile-frontpage"> |
− | color: #fff !important;
| + | <img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;"> |
− | background:#1B4900;
| + | </div> |
− | }
| + | |
| | | |
− | #cssmenu ul ul li,#cssmenu li:hover > ul > li {
| + | <br> |
− | height:auto
| + | <h2>Click on an icon below to learn more about our project!</h2> |
− | }
| + | <br> |
| | | |
− | #cssmenu ul li a,#cssmenu ul ul li a {
| + | <div class="row"> |
− | width:100%; | + | <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button"> |
− | border-bottom:0 | + | <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image"> |
− | }
| + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">TEAM</div> |
| + | </div> |
| + | </a> |
| + | --> |
| + | <a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button"> |
| + | <img src="https://static.igem.org/mediawiki/2017/6/64/UCSCproject.png" class="proj-button-image" alt="image sources from http://simpleicon.com/dev/light-bulb-10.html"> |
| + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">OUR PROJECT</div> |
| + | </div> |
| + | </a> |
| | | |
− | #cssmenu > ul > li {
| + | <a href="https://2017.igem.org/Team:UCSC/Human_Practices" class="proj-button"> |
− | float:none; | + | <img src="https://static.igem.org/mediawiki/2017/7/72/Hp-icon.png" class="proj-button-image" alt="http://www.clker.com/clipart-398063.html"> |
− | }
| + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">HUMAN PRACTICES</div> |
| + | </div> |
| + | </a> |
| | | |
− | #cssmenu ul ul li a {
| + | <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button"> |
− | padding-left:25px | + | <img src="https://static.igem.org/mediawiki/2017/7/77/Attributionsicon.png" class="proj-button-image" alt="http://clipartix.com/hands-clip-art-image-38330/"> |
− | } | + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">ATTRIBUTIONS</div> |
| + | </div> |
| + | </a> |
| | | |
− | #cssmenu ul ul li {
| + | <a href="https://2017.igem.org/Team:UCSC/Notebook" class="proj-button"> |
− | background:#DCDCDC!important; | + | <img src="https://static.igem.org/mediawiki/2017/c/cc/Labnotebook.png" class="proj-button-image"> |
− | }
| + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">NOTEBOOK</div> |
| + | </div> |
| + | </a> |
| | | |
− | #cssmenu li a:hover {
| + | <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button"> |
− | color: #fff !important; | + | <img src="https://static.igem.org/mediawiki/2017/1/1e/Medals_Transparent.png" class="proj-button-image"> |
− | }
| + | <div class="proj-button-desc"> |
| + | <div class="overlap-button-text">JUDGING</div> |
| + | </div> |
| + | </a> |
| | | |
− | #cssmenu ul ul li:hover {
| + | </div> |
− | color: #fff !important;
| + | |
− | background:#1B4900!important;
| + | |
− | }
| + | |
| | | |
− | #cssmenu ul ul ul li a {
| |
− | padding-left:35px
| |
− | }
| |
− |
| |
− | #cssmenu ul ul li a {
| |
− | color:#ddd;
| |
− | background:none
| |
− | }
| |
− |
| |
− | #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
| |
− | color:#ddd
| |
− | }
| |
− |
| |
− | #cssmenu ul ul,#cssmenu ul ul ul {
| |
− | position:initial;
| |
− | left:0;
| |
− | width:100%;
| |
− | margin:0;
| |
− | text-align:left
| |
− | }
| |
− |
| |
− | #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before {
| |
− | display:none
| |
− | }
| |
− |
| |
− | #cssmenu #head-mobile {
| |
− | display:block;
| |
− | padding:23px;
| |
− | color:#ddd;
| |
− | font-size:12px;
| |
− | font-weight:700
| |
− | }
| |
− |
| |
− | .button-custom {
| |
− | width:55px;
| |
− | height:46px;
| |
− | position:absolute;
| |
− | right:0;
| |
− | top:16px;
| |
− | cursor:pointer;
| |
− | z-index: 12399994;
| |
− | }
| |
− |
| |
− | .button-custom:after {
| |
− | position:absolute;
| |
− | top:22px;
| |
− | right:20px;
| |
− | display:block;
| |
− | height:8px;
| |
− | width:20px;
| |
− | border-top:2px solid #363636;
| |
− | border-bottom:2px solid #363636;
| |
− | content:''
| |
− | }
| |
− |
| |
− | .button-custom:before {
| |
− | -webkit-transition:all .3s ease;
| |
− | -ms-transition:all .3s ease;
| |
− | transition:all .3s ease;
| |
− | position:absolute;
| |
− | top:16px;
| |
− | right:20px;
| |
− | display:block;
| |
− | height:2px;
| |
− | width:20px;
| |
− | background:#363636;
| |
− | content:''
| |
− | }
| |
− |
| |
− | .button-custom.menu-opened:after {
| |
− | -webkit-transition:all .3s ease;
| |
− | -ms-transition:all .3s ease;
| |
− | transition:all .3s ease;
| |
− | top:23px;
| |
− | border:0;height:2px;
| |
− | width:19px;
| |
− | background:#363636;
| |
− | -webkit-transform:rotate(45deg);
| |
− | -moz-transform:rotate(45deg);
| |
− | -ms-transform:rotate(45deg);
| |
− | -o-transform:rotate(45deg);
| |
− | transform:rotate(45deg)
| |
− | }
| |
− |
| |
− | .button-custom.menu-opened:before {
| |
− | top:23px;
| |
− | background:#363636;
| |
− | width:19px;
| |
− | -webkit-transform:rotate(-45deg);
| |
− | -moz-transform:rotate(-45deg);
| |
− | -ms-transform:rotate(-45deg);
| |
− | -o-transform:rotate(-45deg);
| |
− | transform:rotate(-45deg)
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom {
| |
− | position:absolute;
| |
− | z-index:99;
| |
− | right:0;
| |
− | top:0;
| |
− | display:block;
| |
− | border-left:1px solid #444;
| |
− | height:42px;
| |
− | width:46px;
| |
− | cursor:pointer
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom.submenu-opened {
| |
− |
| |
− | }
| |
− |
| |
− | #cssmenu ul ul .submenu-button-custom {
| |
− | height:28px;
| |
− | width:34px
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom:after {
| |
− | position:absolute;
| |
− | top:22px;
| |
− | right:19px;
| |
− | width:8px;
| |
− | height:2px;
| |
− | display:block;
| |
− | background:#363636;
| |
− | content:''
| |
− | }
| |
− |
| |
− | #cssmenu ul ul .submenu-button-custom:after {
| |
− | top:15px;
| |
− | right:13px
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom.submenu-opened:after {
| |
− | background:#fff
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom:before {
| |
− | position:absolute;
| |
− | top:19px;
| |
− | right:22px;
| |
− | display:block;
| |
− | width:2px;
| |
− | height:8px;
| |
− | background:#363636;
| |
− | content:''
| |
− | }
| |
− |
| |
− | #cssmenu ul ul .submenu-button-custom:before {
| |
− | top:12px;
| |
− | right:16px
| |
− | }
| |
− |
| |
− | #cssmenu .submenu-button-custom.submenu-opened:before {
| |
− | display:none
| |
− | }
| |
− |
| |
− | #cssmenu ul ul ul li.active a {
| |
− | border-left:none
| |
− | }
| |
− |
| |
− | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
| |
− | border-top:none
| |
− | }
| |
− |
| |
− | }
| |
− | </style>
| |
− |
| |
− | <script type="text/javascript">
| |
− | (function($) {
| |
− | $.fn.menumaker = function(options) {
| |
− | var cssmenu = $(this), settings = $.extend({
| |
− | format: "dropdown",
| |
− | sticky: false
| |
− | }, options);
| |
− | return this.each(function() {
| |
− | $(this).find(".button-custom").on('click', function(){
| |
− | $(this).toggleClass('menu-opened');
| |
− | var mainmenu = $(this).next('ul');
| |
− | if (mainmenu.hasClass('open')) {
| |
− | mainmenu.slideToggle().removeClass('open');
| |
− | }
| |
− | else {
| |
− | mainmenu.slideToggle().addClass('open');
| |
− | if (settings.format === "dropdown") {
| |
− | mainmenu.find('ul').show();
| |
− | }
| |
− | }
| |
− | });
| |
− | cssmenu.find('li ul').parent().addClass('has-sub');
| |
− | multiTg = function() {
| |
− | cssmenu.find(".has-sub").prepend('<span class="submenu-button-custom"></span>');
| |
− | cssmenu.find('.submenu-button-custom').on('click', function() {
| |
− | $(this).toggleClass('submenu-opened');
| |
− | if ($(this).siblings('ul').hasClass('open')) {
| |
− | $(this).siblings('ul').removeClass('open').slideToggle();
| |
− | }
| |
− | else {
| |
− | $(this).siblings('ul').addClass('open').slideToggle();
| |
− | }
| |
− | });
| |
− | };
| |
− | if (settings.format === 'multitoggle') multiTg();
| |
− | else cssmenu.addClass('dropdown');
| |
− | if (settings.sticky === true) cssmenu.css('position', 'fixed');
| |
− | resizeFix = function() {
| |
− | var mediasize = 1208;
| |
− | if ($( window ).width() > mediasize) {
| |
− | cssmenu.find('ul').show();
| |
− | }
| |
− | // if ($(window).width() <= mediasize) {
| |
− | // cssmenu.find('ul').hide().removeClass('open');
| |
− | // }
| |
− | };
| |
− | resizeFix();
| |
− | return $(window).on('resize', resizeFix);
| |
− | });
| |
− | };
| |
− | })(jQuery);
| |
− |
| |
− | (function($){
| |
− | $(document).ready(function(){
| |
− | $("#cssmenu").menumaker({
| |
− | format: "multitoggle"
| |
− | });
| |
− | });
| |
− | })(jQuery);
| |
− |
| |
− | </script>
| |
− |
| |
− |
| |
− | <header>
| |
− | <nav id='cssmenu' style="position: fixed;">
| |
− | <div class="logo-header-custom">
| |
− | <a href="https://2017.igem.org/Team:UCSC">
| |
− | <img class="logo" src="https://static.igem.org/mediawiki/2017/2/23/UCSC-logo.png" height="60" width="auto">
| |
− | <!--<img class="logo" src="https://static.igem.org/mediawiki/2017/4/42/Logo_click6.png" height ="60" width="auto">-->
| |
− | </a>
| |
− | </div>
| |
− | <div id="head-mobile"></div>
| |
− | <div class="button-custom">
| |
− | <h4 style="margin-bottom: 0px; position: fixed; top: 12px; right: 8px; font-size: 75%;">MENU</h4>
| |
− | </div>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Judging">JUDGING</a></li>
| |
− | <li><a href='https://2017.igem.org/Team:UCSC/Notebook'>NOTEBOOK</a></li>
| |
− | <li><a href='https://2017.igem.org/Team:UCSC/Moving-Forward'>MOVING FORWARD</a>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Implementation">IMPLEMENTATION</a></li>
| |
− | <li><a href='https://2017.igem.org/Team:UCSC/Model-Organism'>TARGET ORGANISM</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">HUMAN PRACTICES</a>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">PROJECT INTEGRATION</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Safety">SAFETY</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Engagement">EDUCATION</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Collaborations">COLLABORATIONS</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/HP/Silver">SILVER</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/HP/Gold_Integrated">GOLD INTEGRATED</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Project">PROJECT</a>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Project">THE PROJECT</a></li>
| |
− | <li><a href="#">METABOLIC ENGINEERING</a>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Acetaminophen">ACETAMINOPHEN</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/B-12">VITAMIN B12</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Model">MODELING</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Results">RESULTS</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Parts">PARTS</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/InterLab">INTERLAB STUDY</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Team1">TEAM</a>
| |
− | <ul>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Team1">MEET THE TEAM</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:UCSC/Attributions">ATTRIBUTIONS</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href='https://2017.igem.org/Team:UCSC'>HOME</a></li>
| |
− | </ul>
| |
− | </nav>
| |
− | </header>
| |
| </html> | | </html> |
| | | |
− | {{Scroll}} | + | {{UCSC-Footer}} |