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

Line 117: Line 117:
 
   position: relative;
 
   position: relative;
 
   z-index: 3;
 
   z-index: 3;
 +
}
 +
 +
.nav a {
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  font-size: 1.1em;
 +
  letter-spacing: 0.2em;
 +
  margin: auto 10px;
 +
  padding: 10px 5px;
 +
  height: 100%;
 +
  border: none;
 +
  outline: none;
 +
  background-color: transparent;
 +
  display: flex;
 +
}
 +
 +
/* Add an active class to highlight the current page */
 +
.active {
 +
    background-color:rgba(255, 255, 255, 0.82);
 +
}
 +
 +
/* Hide the link that should open and close the topnav on small screens */
 +
.nav .icon {
 +
    display: none;
 
}
 
}
  
Line 126: Line 150:
 
}
 
}
  
−
/* The dropdwn-content class contains the hidden content (sub-menu) */
 
−
.nav .dropdwn .dropdwn-content{
 
−
  display: none;
 
−
  position: absolute;
 
−
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 
−
  background-color: rgba(255, 255, 255, 0.9);
 
−
  text-align: left;
 
−
  max-width: 250px;
 
−
  z-index: 3;
 
−
}
 
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
−
 
+
.nav .dropbtn{
−
.nav .dropdwn button{
+
 
   font-family: "Montserrat";
 
   font-family: "Montserrat";
 
   font-weight: 400;
 
   font-weight: 400;
Line 151: Line 164:
 
   display: flex;
 
   display: flex;
 
}
 
}
 +
 +
/* The dropdwn-content class contains the hidden content (sub-menu) */
 +
.nav .dropdwn .dropdwn-content{
 +
  display: none;
 +
  position: absolute;
 +
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 +
  background-color: rgba(255, 255, 255, 0.9);
 +
  text-align: left;
 +
  max-width: 250px;
 +
  z-index: 3;
 +
}
 +
 
/* This styles the links within the dropdwn-content */
 
/* This styles the links within the dropdwn-content */
 
.nav .dropdwn .dropdwn-content a{
 
.nav .dropdwn .dropdwn-content a{
Line 164: Line 189:
 
   font-weight: 400;
 
   font-weight: 400;
 
   letter-spacing: 0.2em;
 
   letter-spacing: 0.2em;
 +
}
 +
 +
/* Add a dark background on topnav links and the dropdown button on hover */
 +
.nav a:hover, .dropdwn:hover .dropbtn {
 +
    background-color: #dddddd;
 
}
 
}
  
Line 170: Line 200:
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
−
.dropdwn:hover .dropdwn-content {
+
 
 +
.dropdwn:hover .dropdwn-content {
 
   display: block;
 
   display: block;
−
  }
+
}
 +
 
 
.dropdwn-content a:hover{
 
.dropdwn-content a:hover{
 
   background-color: #dddddd;
 
   background-color: #dddddd;
Line 182: Line 214:
 
   top: 0;
 
   top: 0;
 
   left: 0;
 
   left: 0;
−
}
 
−
 
−
/* Hide the link that should open and close the topnav on small screens */
 
−
.topnav .icon {
 
−
    display: none;
 
 
}
 
}
  
Line 192: Line 219:
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 
@media screen and (max-width: 600px) {
 
@media screen and (max-width: 600px) {
−
   .nav a:not(:first-child), .dropdown .dropdwn button {
+
   .nav a:not(:first-child), .dropdown .dropbtn {
 
     display: none;
 
     display: none;
 
   }
 
   }
Line 209: Line 236:
 
     top: 0;
 
     top: 0;
 
   }
 
   }
−
   .dropdwn-content.responsive a {
+
   .nav.responsive a {
 
     float: none;
 
     float: none;
 
     display: block;
 
     display: block;
Line 216: Line 243:
 
   .nav.responsive .dropdwn {float: none;}
 
   .nav.responsive .dropdwn {float: none;}
 
   .nav.responsive .dropdwn-content {position: relative;}
 
   .nav.responsive .dropdwn-content {position: relative;}
−
   .nav.responsive .dropdwn .dropdwn button {
+
   .nav.responsive .dropdwn .dropbtn {
 
     display: block;
 
     display: block;
 
     width: 100%;
 
     width: 100%;
Line 222: Line 249:
 
   }
 
   }
 
}
 
}
−
 
−
 
  
  
Line 401: Line 426:
 
      
 
      
 
     <div class="nav" id="myNav">
 
     <div class="nav" id="myNav">
−
      <div class="dropdwn">
 
 
       <button><a href="https://2018.igem.org/Team:NUS_Singapore-A" clas="active">HOME</a></button>
 
       <button><a href="https://2018.igem.org/Team:NUS_Singapore-A" clas="active">HOME</a></button>
−
       <button>PROJECT</button>
+
 
 +
       <div class="dropdwn">
 +
        <button>PROJECT</button>
 
         <div class="dropdwn-content">
 
         <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
Line 412: Line 438:
 
       </div>
 
       </div>
 
       <div class="dropdwn">
 
       <div class="dropdwn">
−
      <button>LAB</button>
+
        <button>LAB</button>
−
      <div class="dropdwn-content">
+
        <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
−
      </div>
+
        </div>
 
       </div>
 
       </div>
  
 
       <div class="dropdwn">
 
       <div class="dropdwn">
−
      <button>PARTS</button>
+
        <button>PARTS</button>
−
      <div class="dropdwn-content">
+
        <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Basic_Part">Basic Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Basic_Part">Basic Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
−
      </div>
+
        </div>
 
       </div>
 
       </div>
  
 
       <div class="dropdwn">
 
       <div class="dropdwn">
−
      <button>MODELLING</button>
+
        <button>MODELLING</button>
 
         <div class="dropdwn-content">
 
         <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
Line 437: Line 463:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
     
 
       <div class="dropdwn">
 
       <div class="dropdwn">
−
      <button>HARDWARE</button>
+
        <button>HARDWARE</button>
 
         <div class="dropdwn-content">
 
         <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
Line 447: Line 474:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
     
 
       <div class="dropdwn">
 
       <div class="dropdwn">
−
      <button>HUMAN PRACTICES</button>
+
        <button>HUMAN PRACTICES</button>
 
         <div class="dropdwn-content">
 
         <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
Line 455: Line 483:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
     
 
       <div class="dropdwn">
 
       <div class="dropdwn">
 
         <button>TEAM</button>
 
         <button>TEAM</button>
Line 466: Line 495:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
     
 
       <div class="dropdwn">
 
       <div class="dropdwn">
 
         <button>AWARDS</button>
 
         <button>AWARDS</button>
Line 472: Line 502:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
     
 
       <button><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a></button>
 
       <button><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a></button>
 
   </div>  
 
   </div>  

Revision as of 20:48, 15 October 2018

CONNECT WITH US