Difference between revisions of "Template:NUS Singapore-A"

Line 221: Line 221:
 
         color:#000000;
 
         color:#000000;
 
}
 
}
−
 
  
 
/******************  image description subline  ****************/
 
/******************  image description subline  ****************/
Line 260: Line 259:
 
/************************************************** Top menu and Dropdown list **************************************************/
 
/************************************************** Top menu and Dropdown list **************************************************/
  
−
.team-logo {
+
/*************** New Nav Menu CSS  ******************/
 +
.outer-border{
 +
  max-width: 100%;
 +
  height: 2000px;
 +
  margin: 15px;
 +
  padding: 20px;
 +
  text-align: right;
 +
}
 +
.outer-border span{
 +
  font-size: 1.2em;
 +
  padding: 30px;
 +
  margin-right: 20px;
 +
  font-family: "Century Gothic"
 +
}
 +
.nusgem_mail{
 +
  font-family: "Century Gothic";
 +
  font-size: .9em;
 +
  letter-spacing: .02em;
 +
  font-weight: 100;
 +
  width: auto;
 +
  height: auto;
 +
  -ms-transform: rotate(270deg);
 +
  -webkit-transform: rotate(270deg);
 +
  transform: rotate(270deg);
 +
  transform-origin: left 0;
 +
  position: fixed;
 +
  bottom: 0;
 +
  padding: 0;
 +
  margin: 0;
 +
 
 +
}
 +
.inner-border{
 +
  border: 4px solid black;
 +
  max-width: 100%;
 +
  height: 1900px;
 +
  margin: 10px 30px;
 +
}
 +
.logo{
 +
  max-width: 100%;
 +
  height: 150px;
 +
  width: 150px;
 +
  background-color: orange;
 +
  margin: auto;
 +
}
 +
.nav {
 +
  width: 100%;
 +
  height: 60px;
 +
  font-size: 1.4em;
 +
  font-family: "Century Gothic";
 +
  font-weight: 600;
 +
  letter-spacing: .1em;
 +
  text-align: center;
 +
  position: relative;
 +
  z-index: 3;
 +
}
 +
.nav .dropdwn{
 +
  display: inline-block;
 +
  overflow: hidden;
 +
}
 +
.nav .dropdwn .dropdwn-content{
 +
  display: none;
 +
  position: absolute;
 +
  text-align: left;
 +
  max-width: 250px;
 +
  z-index: 3;
 +
}
 +
.nav .dropdwn button{
 +
  font-family: "Century Gothic";
 +
  font-weight: 600;
 +
  font-size: 1em;
 +
  letter-spacing: 0.17em;
 +
  margin: auto 10px;
 +
  padding: 10px 5px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: transparent;
 +
  display: flex;
 +
}
 +
.nav .dropdwn .dropdwn-content a{
 +
  float: none;
 +
  padding: auto auto;
 +
  margin: auto auto;
 +
  text-decoration: none;
 +
  color: black;
 +
  display: block;
 +
  min-width: inherit;
 +
}
 +
.dropdwn:hover {
 +
  background-color: grey;
 +
}
 +
.dropdwn:hover .dropdwn-content {
 +
  display: block;
 +
  }
 +
.dropdwn-content a:hover{
 +
  background-color: grey;
 +
}
 +
.sticky{
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
.instalogo{
 +
  position: fixed;
 +
  top: 75px;
 +
  left: -18px;
 +
  width: 113px;
 +
  height: 90px;
 +
}
 +
.fblogo{
 +
  position: fixed;
 +
  top: 130px;
 +
  left: -25px;
 +
  width: 130px;
 +
  height: 96px;
 +
}
 +
/***********  End of New Nav Menu CSS ****************/
 +
 
 +
 
 +
/**********  Last working navigational format ********/
 +
/*.team-logo {
 
     width:%;
 
     width:%;
 
     height:140px;
 
     height:140px;
Line 363: Line 481:
 
   background: #dd4b39;
 
   background: #dd4b39;
 
   color: #FFFFFF;
 
   color: #FFFFFF;
−
}
+
}*/
 +
/************  End of last working navigational menu ************/
  
 
/************************  Quick Link Footer  **************************/
 
/************************  Quick Link Footer  **************************/
Line 477: Line 596:
  
  
−
/*Responsive Deisgn*/
+
/*Responsive Design*/
−
 
+
  
 +
/******************** DELETE THIS WHEN YOU'RE DONE *************/
 +
/*
 
/*********************  Responsive Design  *********************/
 
/*********************  Responsive Design  *********************/
  
Line 617: Line 737:
 
}
 
}
  
−
}
+
}*/
−
 
+
/********************************DELETE THIS WHEN YOU'RE DONE*************************************************/
 
</style>
 
</style>
  
Line 626: Line 746:
 
<body>
 
<body>
  
−
<!--  IGEM NUS LOGO  -->
 
−
<div><a href="https://2018.igem.org/Team:NUS_Singapore-A" ><img class="team-logo" src="https://static.igem.org/mediawiki/2018/2/21/T--NUS_Singapore-A--TeamLogo.jpg" height="140" width="140"></a></div>
 
  
−
<!-- Top Menu -->
+
<!-------------------------------------START OF NEW NAV BAR HTML------------------------------------------------------>
−
<div class="topmenu-container">
+
  
−
<div class="dropdown">
+
<div class="nusgem_mail">EMAIL US AT NUSGEM@GMAIL.COM</div>
−
    <button class="dropbtn">NOTEBOOK </button>
+
<div class="outer-border">
−
    <div class="dropdown-content">
+
  <span>What's on?</span>
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/LabBook">LAB BOOK</a>
+
  <a href="#"><img class="instalogo" src="https://static.igem.org/mediawiki/2018/4/42/T--NUS_Singapore-A--InstaLogo_Colored.png"></a>
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medal">MEDAL CRITERIA</a>
+
  <a href="#"><img class="fblogo" src="https://static.igem.org/mediawiki/2018/9/9f/T--NUS_Singapore-A--FBLogo_Colored.png"></a>
 +
  <div class="inner-border">
 +
    <div class='logo'><img class='logo' src='https://static.igem.org/mediawiki/2018/2/21/T--NUS_Singapore-A--TeamLogo.jpg' alt='nus logo'></div>
 +
    <div class="nav">
 +
      <div class="dropdwn">
 +
      <button>Project</button>
 +
        <div class="dropdwn-content">
 +
          <a href="#">Description</a>
 +
          <a href="#">Design</a>
 +
          <a href="#">Experiment</a>
 +
          <a href="#">Parts</a>
 +
          <a href="#">Result</a>
 +
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">Interlab Study</a>
 +
        </div>
 +
      </div>
 +
      <div class="dropdwn">
 +
      <button>Modelling</button>
 +
        <div class="dropdwn-content">
 +
          <a href="#">Overview</a>
 +
          <a href="#">Methodology</a>
 +
          <a href="#">Model 1</a>
 +
          <a href="#">Model 2</a>
 +
        </div>
 +
      </div>
 +
      <div class="dropdwn">
 +
      <button>Hardware</button>
 +
        <div class="dropdwn-content">
 +
          <a href="#">Overview</a>
 +
        </div>
 +
      </div>
 +
      <div class="dropdwn">
 +
      <button>Human Practices</button>
 +
        <div class="dropdwn-content">
 +
          <a href="#">Overview</a>
 +
          <a href="#">Intergrated Human Practice</a>
 +
          <a href="#">Interviews</a>
 +
          <a href="#">Public Engagement</a>
 +
        </div>
 +
      </div>
 +
      <div class="dropdwn">
 +
        <button>Team</button>
 +
        <div class="dropdwn-content">
 +
          <a href="#">Members</a>
 +
          <a href="#">Attribution</a>
 +
          <a href="#">Sponsors</a>
 +
          <a href="#">Collaborations</a>
 +
        </div>
 +
      </div>
 +
      <div class="dropdwn">
 +
      <button>Notebook</button>
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
  <img src="https://static.igem.org/mediawiki/2018/6/67/T--NUS_Singapore-A--Instalogo.svg">
 +
</div>
  
−
  <div class="dropdown">
+
<!-------------------------------SCRIPT FOR STICKY NAV BAR----------------------------------------------------------->
−
      <button class="dropbtn">TEAM </button>
+
<script>
−
      <div class="dropdown-content">
+
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">MEMBERS</a>
+
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">ATTRIBUTIONS</a>
+
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">SPONSORS</a>
+
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">COLLABORATION</a>
+
−
      </div>
+
−
  </div>
+
  
 +
var yourNavigation = $(".nav");
 +
    stickyDiv = "sticky";
 +
    yourHeader = $('.logo').height()+50;
  
−
  <div class="dropdown">
+
$(window).scroll(function() {
−
      <button class="dropbtn">HUMAN PRACTICE </button>
+
  if( $(this).scrollTop() > yourHeader ) {
−
      <div class="dropdown-content">
+
    yourNavigation.addClass(stickyDiv);
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Overview">OVERVIEW</a>
+
  } else {
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/IntegratedHP">INTEGRATED HUMAN PRACTICE</a>
+
     yourNavigation.removeClass(stickyDiv);
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Interviews">INTERVIEWS</a>
+
   }
−
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/PublicEngagement">PUBLIC ENGAGEMENT</a>
+
});
−
     </div>
+
−
   </div>
+
  
 +
</script>
 +
<!------------------------------------END OF SCRIPT FOR STICKY NAV BAR----------------------------------------------->
  
−
<div class="dropdown">
+
<!---------------------------------------END OF NEW NAV BAR HTML------------------------------------------------------>
−
    <button class="dropbtn">HARDWARE </button>
+
−
    <div class="dropdown-content">
+
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">OVERVIEW</a>
+
−
    </div>
+
−
  </div>
+
  
−
  <div class="dropdown">
 
−
    <button class="dropbtn">MODELLING</button>
 
−
    <div class="dropdown-content">
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling">OVERVIEW</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Methodology">METHODOLOGY</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model1">Model 1</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model2">Model 2</a>
 
−
    </div>
 
−
  </div>
 
  
−
  <div class="dropdown">
 
−
    <button class="dropbtn">PROJECT </button>
 
−
    <div class="dropdown-content">
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">DESCRIPTION</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">DESIGN</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Experiments">EXPERIMENT</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Parts">PARTS</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstration">RESULT</a>
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">INTERLAB STUDY</a>
 
−
   
 
−
    </div>
 
−
  </div>
 
  
−
  <div class="dropdown">
 
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A">HOME </a>
 
−
  </div>
 
−
</div>
 
  
 
<!--***********************************************  Back to top button ***********************************************-->
 
<!--***********************************************  Back to top button ***********************************************-->

Revision as of 08:13, 30 June 2018

EMAIL US AT NUSGEM@GMAIL.COM
What's on?
Description Design Experiment Parts Result Interlab Study
Overview Methodology Model 1 Model 2
Overview
Overview Intergrated Human Practice Interviews Public Engagement
Members Attribution Sponsors Collaborations