Difference between revisions of "Team:UCSC"

 
(131 intermediate revisions by 3 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. -->
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  
−
  <!-- Necessary for nav bar header-->
+
.proj-button {
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
    position: relative;
−
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
+
    width: 10%;
 +
    text-decoration: none !important;
 +
}
  
−
  <!-- TypeKit Fonts (BW) --> 
+
.proj-button-image {
−
   <script src="https://use.typekit.net/hii0ztv.js"></script>
+
  opacity: 1;
−
   <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
  display: inline-block;
 +
   width: 14%;
 +
   height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
  margin: 20px;
 +
}
  
−
  <!-- Functionallity and behaviour JS -->
+
.proj-button-desc {
−
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
   transition: .5s ease;
−
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
  opacity: 0;
 +
   position: absolute;
 +
  top: 100%;
 +
  left: 50%;
 +
  background: transparent;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%)
 +
}
  
 +
.proj-button:hover .proj-button-image {
 +
  opacity: 0.2;
 +
}
  
 +
.proj-button:hover .proj-button-desc {
 +
  opacity: 0.8;
 +
}
  
−
<style type="text/css">
+
.overlap-button-text {
−
  * {
+
  background-color: transparent;
−
      margin:0;
+
  color: black;
−
      padding:0;
+
  font-size: 20px;
−
      text-decoration:none
+
  font-family: "Objektiv-mk1" !important;
−
  }
+
  font-weight: 400 !important;
 +
  padding: 16px 32px;
 +
}
  
−
  body {
+
.desktop-frontpage {
−
      background:#555;
+
display: block;
−
  }
+
user-drag: none;
 +
user-select: none;
 +
-moz-user-select: none;
 +
-webkit-user-drag: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
        background: honeydew;
 +
        width: 80%;
 +
        padding: 40px 0px;
 +
}
  
−
  header {
+
.mobile-frontpage {
−
      position:relative;
+
display: none;
−
      width:100%;
+
}
−
      background:#333;
+
−
  }
+
  
−
  .logo-header-custom {
+
@media (max-width: 768px) {
−
      position:relative;
+
−
      z-index:123;
+
−
      padding-left: 12px;
+
−
      padding-right: 10px;
+
−
      padding-top: 2px;
+
−
      padding-bottom: 2px;
+
−
      font:18px verdana;
+
−
      color:#6DDB07;
+
−
      float:left;
+
−
      width:15%
+
−
  }
+
  
−
  .logo-header-custom a {
+
  h1 {
−
       color:#6DDB07;
+
      font-family: 'objektiv-mk1'; /*!important*/
−
  }
+
       font-size: 250%; /*!important*/
 +
  }
  
−
  nav {
+
  h2 {
−
       position:relative;
+
       font-family: 'objektiv-mk1'; /*!important*/
−
       width:100%;
+
       font-size: 20px; /*!important*/
−
      margin:0 auto;
+
  }
−
  }
+
  
−
  #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
+
.overlap-button-text {
−
      border:0;
+
background-color: rgba(94, 94, 94, 0.5);
−
      list-style:none;
+
border-radius: 60px;
−
/*      line-height:1;*/
+
color: white;
−
      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 {
+
.proj-button-image {
−
      content:".";
+
opacity: 0.7;
−
      display:block;
+
      display: inline-block;
−
      clear:both;
+
      width: 30%;
−
      visibility:hidden;
+
      height: auto;
−
      line-height:0;
+
      transition: .5s ease;
−
      height:0
+
      backface-visibility: hidden;
−
  }
+
}
  
−
  #cssmenu #head-mobile {
+
.desktop-frontpage {
−
      display:none
+
width: 95%;
−
  }
+
}
  
−
  #cssmenu {
+
    .proj-button-desc {
−
      font-family:'Quicksand';
+
       transition: .5s ease;
−
      background: #fff;
+
       opacity: 1;
−
      top: 16px;
+
−
  }
+
−
 
+
−
  #cssmenu > ul > li {
+
−
      float:right
+
−
  }
+
−
 
+
−
  #cssmenu > ul > li > a {
+
−
      padding:17px;
+
−
      font-size:15px;
+
−
      letter-spacing:1px;
+
−
      text-decoration:none;
+
−
      color:#ddd;
+
−
      font-weight:700;
+
−
  }
+
−
 
+
−
  #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
+
−
      color:#fff
+
−
  }
+
−
 
+
−
  #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
+
−
      background-color:#448D00!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;
+
−
/*      top: -6px;
+
−
      left: -29px;*/
+
−
      -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 > li > ul > li > ul:before {
+
 
       position: absolute;
 
       position: absolute;
−
       top: 170px;
+
       top: 100%;
−
       right: -413px;
+
       left: 50%;
−
       display: none;
+
       transform: translate(-50%, -50%);
−
  }*/
+
      -ms-transform: translate(-50%, -50%)
 +
  }
 +
}
  
−
/*  #cssmenu ul > li > ul > li > ul {
+
@media (max-width: 576px) {
−
      border-top: 1px solid #999;
+
−
      position: absolute;
+
−
      top: 170px;
+
−
      right: -413px;
+
−
      display: block;
+
−
  }*/
+
  
−
/*  #cssmenu ul ul ul:before {
+
.proj-button-image {
−
       display: none;
+
      opacity: 0.7;
−
  }*/
+
       display: inline-block;
 +
      width: 38%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
    }
  
−
/*  #cssmenu ul ul ul:after {
+
    .proj-button-desc {
−
       display: block;
+
       transition: .5s ease;
 +
      opacity: 1;
 
       position: absolute;
 
       position: absolute;
−
       right: 300px;
+
       top: 100%;
−
       top: 70px;
+
       left: 50%;
−
  }*/
+
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
  
−
/*  #cssmenu ul ul {
+
.desktop-frontpage {
−
      display: block;
+
display: none;
−
      position: fixed;
+
}
−
      right: 377px;
+
−
      top: 110px;
+
−
  }*/
+
  
−
/*  #cssmenu ul ul ul li {
+
.mobile-frontpage {
−
      display: block;
+
display: block;
−
  }*/
+
user-drag: none;
 +
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 ul li a {
+
.overlap-button-text {
−
      border-bottom:1px solid rgba(150,150,150,0.15);
+
background-color: rgba(94, 94, 94, 0.5);
−
      padding:11px 15px;
+
border-radius: 60px;
−
      width:170px;
+
color: white;
−
      font-size:12px;
+
font-size: 13px;
−
      text-decoration:none;
+
}
−
      color:#ddd;
+
−
      font-weight:400;
+
−
  }
+
−
 
+
−
  #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: 1168px) {
+
−
  /*#cssmenu > ul > li > ul > li > ul {
+
−
      position: absolute;
+
−
  }*/
+
−
 
+
−
  /*#cssmenu ul > li > ul > li.has-sub > ul {
+
−
      position: fixed;
+
−
      top: 150px;
+
−
  }*/
+
−
 
+
−
  /*#cssmenu ul > li > ul > li.has-sub:hover > ul {
+
−
      position: fixed;
+
−
      display: block;
+
−
      top: 80px;
+
−
 
+
−
  }*/
+
−
 
+
−
  #cssmenu ul ul ul a:before{
+
−
      display: none;
+
−
      position: absolute;
+
−
      left: -9999px;
+
−
      top: 20px;
+
−
  }
+
−
 
+
−
  #cssmenu ul ul ul a:after {
+
−
      display: block;
+
−
      position: absolute;
+
−
      left: -9999px;
+
−
      top: 20px;
+
−
  }
+
 
}
 
}
  
−
@media screen and (max-width:1168px){
+
</style>
 +
  <head>
 +
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 +
        <title>Santa Cruz IGEM</title>
 +
  </head>
  
−
/*  .logo-header-custom {
+
<div class="page">
−
      position:absolute;
+
<center>
−
      top:0;
+
<div class="desktop-frontpage">
−
      left: 0;
+
<img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;">
−
      width:100%;
+
</div>
−
      height:46px;
+
<center>
−
      text-align:center;
+
−
      padding:10px 0 0 0 ;
+
−
      float:none
+
−
  }*/
+
  
−
  .logo-header-custom2 {
+
<div class="mobile-frontpage">
−
      display:none
+
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
−
  }
+
</div>
−
 
+
−
  nav {
+
−
      width:100%;
+
−
  }
+
  
−
  #cssmenu {
+
<br>
−
      width:100%;
+
<h2>Click on an icon below to learn more about our project!</h2>
−
  }
+
<br>
  
−
  #cssmenu ul {
+
<div class="row">
−
      width:100%;
+
  <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button">
−
       display:none;
+
       <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image">
−
       margin-left: 0px;
+
       <div class="proj-button-desc">
−
       margin-top: 20px;
+
        <div class="overlap-button-text">TEAM</div>
−
       /*overflow-y: scroll;*/
+
       </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">
−
      width:100%;
+
       <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">
−
      border-top:1px solid #444;
+
       <div class="proj-button-desc">
−
      border-bottom: 1px solid #444;
+
        <div class="overlap-button-text">HUMAN PRACTICES</div>
−
  }
+
       </div>
−
 
+
  </a>
−
  #cssmenu ul li,#cssmenu ul li a {
+
−
      line-height: 1;
+
−
  }
+
−
 
+
−
  #cssmenu ul li:hover {
+
−
      background:#6D6D6D;
+
−
  }
+
−
 
+
−
  #cssmenu ul ul li,#cssmenu li:hover > ul > li {
+
−
      height:auto
+
−
  }
+
−
 
+
−
  #cssmenu ul li a,#cssmenu ul ul li a {
+
−
      width:100%;
+
−
      border-bottom:0
+
−
  }
+
−
 
+
−
  #cssmenu > ul > li {
+
−
      float:none
+
−
  }
+
−
 
+
−
  #cssmenu ul ul li a {
+
−
      padding-left:25px
+
−
  }
+
−
 
+
−
  #cssmenu ul ul li {
+
−
      background:#DCDCDC!important;
+
−
  }
+
−
 
+
−
  #cssmenu ul ul li:hover {
+
−
      background:#6D6D6D!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:8px;
+
−
      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:46px;
+
−
      width:46px;
+
−
      cursor:pointer
+
−
  }
+
−
 
+
−
  #cssmenu .submenu-button-custom.submenu-opened {
+
−
/*      background:#262626*/
+
−
  }
+
−
 
+
−
  #cssmenu ul ul .submenu-button-custom {
+
−
      height:34px;
+
−
      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">
+
  <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button">
−
  (function($) {
+
      <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/">
−
$.fn.menumaker = function(options) { 
+
      <div class="proj-button-desc">
−
var cssmenu = $(this), settings = $.extend({
+
        <div class="overlap-button-text">ATTRIBUTIONS</div>
−
  format: "dropdown",
+
      </div>
−
  sticky: false
+
   </a>
−
}, 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 = 1000;
+
−
    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($){
+
  <a href="https://2017.igem.org/Team:UCSC/Notebook" class="proj-button">
−
$(document).ready(function(){
+
      <img src="https://static.igem.org/mediawiki/2017/c/cc/Labnotebook.png" class="proj-button-image">
−
$("#cssmenu").menumaker({
+
      <div class="proj-button-desc">
−
  format: "multitoggle"
+
        <div class="overlap-button-text">NOTEBOOK</div>
−
});
+
      </div>
−
});
+
  </a>
−
})(jQuery);
+
  
−
</script>
+
  <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button">
 +
      <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>
  
 +
</div>
  
−
<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/f/fa/Logo_click2.png" height="60" width="auto">
 
−
                </a></div>
 
−
<div id="head-mobile"></div>
 
−
<div class="button-custom"></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/Model-Organism'>MODEL ORGANISM</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:UCSC/Impact">IMPACT</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">INTEGRATED HUMAN PRACTICES</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:UCSC/Safety">SAFETY</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:UCSC/Collaborations">COLLABORATIONS</a></li>
 
−
        <!-- <li><a href="https://2017.igem.org/Team:UCSC/Outreach">OUTREACH</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/Implementation">IMPLEMENTATION</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:UCSC/Results">RESULTS</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}}

Latest revision as of 04:26, 1 November 2017

Santa Cruz IGEM


Click on an icon below to learn more about our project!


image sources from http://simpleicon.com/dev/light-bulb-10.html
OUR PROJECT
 http://www.clker.com/clipart-398063.html
HUMAN PRACTICES
 http://clipartix.com/hands-clip-art-image-38330/
ATTRIBUTIONS
NOTEBOOK
JUDGING

S P O N S O R S
S O C I A L
C O N T A C T
Jack Baskin School of Engineering
University of California, Santa Cruz
1156 High Street
Santa Cruz, California, 95064