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

Line 102: Line 102:
 
   width: 150px;
 
   width: 150px;
 
}
 
}
 +
 +
 +
 +
/************** NavBar ****************/
 +
 
/* The wrapper for the nav menu*/
 
/* The wrapper for the nav menu*/
 
.nav {
 
.nav {
Line 115: Line 120:
 
   position: relative;
 
   position: relative;
 
   z-index: 3;
 
   z-index: 3;
 +
}
 +
 +
/* 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;
 
}
 
}
  
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
−
.nav .dropdwn{
+
.dropdown{
 
   display: inline-block;
 
   display: inline-block;
 
   overflow: hidden;
 
   overflow: hidden;
Line 124: Line 139:
 
}
 
}
  
−
/* 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) */
−
 
+
.dropdown .dropbtn{
−
.nav .dropdwn button{
+
 
   font-family: "Montserrat";
 
   font-family: "Montserrat";
 
   font-weight: 400;
 
   font-weight: 400;
Line 149: Line 153:
 
   display: flex;
 
   display: flex;
 
}
 
}
 +
 +
/* The dropdwn-content class contains the hidden content (sub-menu) */
 +
.dropdown-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{
+
.dropdown-content a{
 
   float: none;
 
   float: none;
 
   padding: 5px; auto;
 
   padding: 5px; auto;
Line 163: Line 179:
 
   letter-spacing: 0.2em;
 
   letter-spacing: 0.2em;
 
}
 
}
 +
 
/* Add the hover colors and the reveal of the menu */
 
/* Add the hover colors and the reveal of the menu */
−
.dropdwn:hover {
+
.dropdown:hover {
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
−
.dropdwn:hover .dropdwn-content {
+
 
 +
.dropdown:hover .dropdown-content {
 
   display: block;
 
   display: block;
−
  }
+
}
−
.dropdwn-content a:hover{
+
 
 +
.dropdown-content a:hover{
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
 +
 
/* A sticky class cause this fking mediawiki doesn't have one */
 
/* A sticky class cause this fking mediawiki doesn't have one */
 
.sticky{
 
.sticky{
Line 179: Line 199:
 
   left: 0;
 
   left: 0;
 
}
 
}
 +
 +
 +
/* 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) {
 +
  .nav dropdown:not(:first-child), .dropdown .dropbtn {
 +
    display: none;
 +
  }
 +
  .nav a.icon {
 +
    float: right;
 +
    display: block;
 +
  }
 +
}
 +
 +
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
 +
@media screen and (max-width: 600px) {
 +
  .nav.responsive {position: relative;}
 +
  .nav.responsive a.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  .nav.responsive .dropdown {float: none;}
 +
  .nav.responsive .dropdown-content {position: relative;}
 +
  .nav.responsive .dropdown .dropbtn {
 +
    display: block;
 +
    width: 100%;
 +
    text-align: left;
 +
  }
 +
}
 +
 +
 
/* Positioning and sizing of the social media icons */
 
/* Positioning and sizing of the social media icons */
 
.instalogo{
 
.instalogo{
Line 219: Line 270:
 
}
 
}
  
−
/*Responsive Design*/
 
−
/*********************  Responsive Design  *********************/
 
  
−
/*  
+
/************************************************** Back to top button style **************************************************/
−
  ##Device = Tablets, Ipads (landscape)
+
−
  ##Screen = B/w 768px to 1024px
+
−
*/
+
  
−
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 
−
 
 
−
}
 
−
 
−
/*
 
−
  ##Device = Most of the Smartphones Mobiles (Portrait)
 
−
  ##Screen = B/w 320px to 479px
 
−
  ##Device = Tablets, Ipads (portrait)
 
−
  ##Screen = B/w 768px to 1024px
 
−
*/
 
−
 
−
@media (min-width: 0px) and (max-width: 1024px) {
 
−
/*
 
−
/*Basics*/
 
−
  p {
 
−
      font-size: 13px;
 
−
      }
 
−
  .dropdown .dropbtn {
 
−
      font-size: 18px;
 
−
      padding: 7px 4px;
 
−
      font-weight:1000;
 
−
    display: inline-block; 
 
−
  }
 
−
*/
 
−
  .dropdown-content {
 
−
    min-width: 10px;
 
−
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
 
−
    }
 
−
 
−
  .dropdown-content a{
 
−
    padding: 8px;
 
−
  }
 
−
 
−
/************************************************** Back to top button style **************************************************/
 
 
#BacktoTopBtn {
 
#BacktoTopBtn {
 
   display: none;
 
   display: none;
Line 331: Line 343:
 
</script>
 
</script>
 
</head>
 
</head>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 371: Line 362:
 
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
 
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
 
     </div>
 
     </div>
−
     <div class="nav">
+
   
−
       <div class="dropdwn">
+
     <div class="nav" id="myNav">
−
       <button>PROJECT</button>
+
   
−
         <div class="dropdwn-content">
+
       <div class="dropdown">
 +
        <button class="dropbtn"><a href="https://2018.igem.org/Team:NUS_Singapore-A/Description" style="text-decoration: none; color: black;">HOME</a></button></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/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/Design">Design</a>
Line 381: Line 377:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdwn">
+
       <div class="dropdown">
−
      <button>LAB</button>
+
        <button class="dropbtn">LAB</button>
−
      <div class="dropdwn-content">
+
        <div class="dropdown-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="dropdown">
−
      <button>PARTS</button>
+
        <button class="dropbtn">PARTS</button>
−
      <div class="dropdwn-content">
+
        <div class="dropdown-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="dropdown">
−
      <button>MODELLING</button>
+
        <button class="dropbtn">MODELLING</button>
−
         <div class="dropdwn-content">
+
         <div class="dropdown-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>
 
         <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
 
         <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdwn">
+
     
−
      <button>HARDWARE</button>
+
       <div class="dropdown">
−
         <div class="dropdwn-content">
+
        <button class="dropbtn">HARDWARE</button>
 +
         <div class="dropdown-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>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>         
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>         
Line 417: Line 414:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdwn">
+
     
−
      <button>HUMAN PRACTICES</button>
+
       <div class="dropdown">
−
         <div class="dropdwn-content">
+
        <button class="dropbtn">HUMAN PRACTICES</button>
 +
         <div class="dropdown-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>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
Line 425: Line 423:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdwn">
+
     
−
         <button>TEAM</button>
+
       <div class="dropdown">
−
         <div class="dropdwn-content">
+
         <button class="dropbtn">TEAM</button>
 +
         <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/Team">Members</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
Line 436: Line 435:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdwn">
+
     
−
      <button>AWARDS</button>
+
       <div class="dropdown">
−
      <div class="dropdwn-content">
+
        <button class="dropbtn">AWARDS</button>
 +
        <div class="dropdown-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals">Medals</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals">Medals</a>
 +
        </div>
 
       </div>
 
       </div>
−
    </div>
+
     
 +
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
 
   </div>  
 
   </div>  
 
</div>
 
</div>
Line 460: Line 462:
 
   }
 
   }
 
});
 
});
 +
 +
 +
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 +
function myFunction() {
 +
    var x = document.getElementById("myNav");
 +
    if (x.className === "nav") {
 +
        x.className += " responsive";
 +
    } else {
 +
        x.className = "nav";
 +
    }
 +
}
  
 
</script>
 
</script>

Revision as of 22:41, 15 October 2018

CONNECT WITH US