Difference between revisions of "Template:GlasgowNavbar"

 
(91 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<meta charset="utf-8">
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
  <head>
 
−
    <meta charset="utf-8">
 
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 
−
    <meta name="description" content="">
 
−
    <meta name="author" content="">
 
−
    <link href="https://2015.igem.org/Team:Glasgow/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet">
 
−
    <script src="https://2015.igem.org/Team:Glasgow/bootstrap.min.js?action=raw&ctype=text/css"></script>
 
−
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
−
    <!-- Custom styles for this template -->
 
−
    <link href="carousel.css" rel="stylesheet">
 
−
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
 
 
<head>
 
<head>
 +
<!-------DONT DELETE!!!!------->
 +
  <link rel="stylesheet" href="https://2015.igem.org/Team:Glasgow/bootstrap?action=raw&ctype=text/css" type="text/css">
 +
  <script src="https://2015.igem.org/Team:Stockholm/bootstrapjs?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
  <link rel="stylesheet" href="https://2015.igem.org/Team:Glasgow/bootstrapcss?action=raw&ctype=text/css" type="text/css">
 +
  <link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
<style>
 
<style>
−
 
 
/*===== Navigation Bar =====*/
 
/*===== Navigation Bar =====*/
 +
 +
* {
 +
  margin:0;
 +
  padding:0;
 +
}
 +
  
 
.mainNav {
 
.mainNav {
 
     background: url(https://static.igem.org/mediawiki/2015/2/29/Dna_banner.png);
 
     background: url(https://static.igem.org/mediawiki/2015/2/29/Dna_banner.png);
−
     background-size: cover;
+
     background-size: 100% 100%;
 
     background-color:black;
 
     background-color:black;
−
     height:50px;
+
     height:8.38%;
 
     padding: 0px;
 
     padding: 0px;
 
     margin: 0px;
 
     margin: 0px;
Line 34: Line 28:
 
     z-index:99;
 
     z-index:99;
 
}
 
}
−
           
+
 
−
nav ul {
+
−
    height:50px;
+
−
    width: 92%;
+
−
    margin: 0 auto;
+
−
    padding: 0px;
+
−
}
+
−
           
+
−
li a img {
+
−
    height:42px;
+
−
    width: 67px;
+
−
    padding: 0px;
+
−
    display:block;
+
−
    margin: auto;
+
−
    margin-top:4px;
+
−
    margin-right:66px;
+
−
}
+
−
           
+
 
nav ul li {
 
nav ul li {
 
     list-style: none;
 
     list-style: none;
−
     width:14%;
+
     width:13.00%;
−
     max-height: 50px;  
+
     max-height: 8.47vh;  
 
     float: left;
 
     float: left;
 
     text-align: center;
 
     text-align: center;
Line 61: Line 38:
 
     margin: 0px;
 
     margin: 0px;
 
}
 
}
−
       
+
 
 
nav ul li a, nav ul li a:active, nav ul li a:visited {
 
nav ul li a, nav ul li a:active, nav ul li a:visited {
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: white;
 
     color: white;
−
    line-height: 50px;
 
 
     display:block;
 
     display:block;
 +
    line-height:7.5vh;
 
     padding: 0px;
 
     padding: 0px;
 
     margin: 0px;
 
     margin: 0px;
 
     font-family: sans-serif;
 
     font-family: sans-serif;
 +
    font-size:1.1vw;
 
  }
 
  }
−
/*       
 
−
li a:hover {
 
−
    background-color:white;
 
−
    color:black;
 
−
    height:50px;
 
−
}*/
 
−
           
 
−
li .ball {
 
−
    height: 45px;
 
−
    width: 45px;
 
−
    background-color: yellow;
 
−
    position:absolute;
 
−
    border-radius:50%;
 
−
    margin-top:2px;
 
−
    opacity: 0;
 
−
}
 
−
 
−
.dropNav {
 
−
    background-color:black;
 
−
    width:1400px;
 
−
    height:20px;
 
−
    display:none;
 
−
    position:absolute;
 
−
    left:0;
 
−
    margin:0px auto;
 
−
}
 
−
 
−
/*
 
−
.dropNav ul li {
 
−
    float:left;
 
−
    text-align: center;
 
−
    margin: 0px auto;
 
−
    position:relative;
 
−
    padding:5px;
 
−
}
 
−
 
−
.dropNav ul {
 
−
    margin: 0px auto;
 
−
    border: 1px solid red;
 
−
    width:450px;
 
−
    height:25px;   
 
−
}*/
 
−
 
−
 
−
 
−
span.project {
 
−
    margin-right: -15px;
 
−
}
 
−
 
−
span.team {
 
−
    margin-right: -30px;
 
−
}
 
−
 
−
span.journal {
 
−
    margin-right: -35px;
 
−
}
 
−
 
−
span.modelling {
 
−
    margin-left: -20px;
 
−
}
 
−
 
−
span.application {
 
−
    margin-left: -25px;
 
−
}
 
−
 
−
span.contact {
 
−
    margin-left: -30px;
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
div.project {
 
−
    margin-left: 20px;
 
−
}
 
−
 
−
div.team {
 
−
    margin-left: 22px;
 
−
}
 
−
 
−
div.journal {
 
−
    margin-left: 25px;
 
−
}
 
−
 
−
div.modelling {
 
−
    margin-left: 7px;
 
−
}
 
−
 
−
div.application {
 
−
    margin-left: 33px;
 
−
}
 
−
 
−
div.contact {
 
−
    margin-left: 36px;
 
−
}
 
  
 
ul li ul {
 
ul li ul {
 
     display:none;
 
     display:none;
−
    position:relative;
 
−
   
 
 
}
 
}
  
Line 177: Line 57:
 
     list-style: none;
 
     list-style: none;
 
     display:block;
 
     display:block;
−
     width:140px;
+
     width:13.00vw;
 
     float:none;
 
     float:none;
 
     background-color:black;
 
     background-color:black;
 
     color:white;
 
     color:white;
−
    padding:10px;
+
 
 
}
 
}
−
/*
 
−
ul li:hover .dropNav {
 
−
  display: block;
 
−
}*/
 
  
 
ul li:hover ul {
 
ul li:hover ul {
−
     display:block;
+
     display: block;
 +
    padding:0;
 +
    margin:0;
 
}
 
}
  
−
.dim {
+
.dim5 {
 
     opacity:0.3;
 
     opacity:0.3;
 
}
 
}
 
              
 
              
−
.dim:hover {
+
.dim5:hover {
 
     opacity:1;
 
     opacity:1;
 
}
 
}
−
+
 
−
/*===== //Navigation Bar ====*/
+
.first {
 +
  margin-left:3.45vw;
 +
}
  
 
</style>
 
</style>
 +
</head>
  
 
<body>
 
<body>
Line 210: Line 91:
 
         <nav class="mainNav">
 
         <nav class="mainNav">
 
             <ul>
 
             <ul>
−
                 <li style="padding-left:20px"><!--<div class="ball project"></div>--><a href='#'><span class="project">Project</span></a>
+
                 <li class="first"><a  href='https://2015.igem.org/Team:Glasgow'>Project</a>
−
                <nav><ul>
+
                <ul>
−
                         <li><a href="#">Description</a></li>
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview">Overview</a></li>
−
                         <li><a href="#">Biology</a></li>
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/UVA">UVA</a></li>
−
                         <li><a href="#">More Biology</a></li>                  
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Repressors">Repressors</a></li>
−
                     </ul></nav>               
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Bistable">Bistable Switch</a></li>
 +
                         <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Bioluminesence">Bioluminescence</a></li>
 +
                         <li><a href="https://2015.igem.org/Team:Glasgow/Description">RBS Library</a></li>
 +
                         <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Terminator">Terminator</a></li>
 +
                               
 +
                     </ul>               
 
                  
 
                  
 
                 </li>
 
                 </li>
−
                 <li><!--<div class="ball team"></div>--><a href='pages/team/team.html'><span class="team">About Us</span></a>
+
                 <li><a href='https://2015.igem.org/Team:Glasgow/Team'>About Us</a>
−
                <nav>
+
                    <ul>
−
                <ul>
+
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Team">Team</a></li>
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Team">Team</a></li>
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Attributions">Attributions</a></li>
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Attributions">Attributions</a></li>
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Sponsors">Sponsors</a></li>                 
 
                         <li><a href="https://2015.igem.org/Team:Glasgow/Sponsors">Sponsors</a></li>                 
−
                     </ul></nav>
+
                     </ul>
 +
                </li>
 +
                <li><a href='https://2015.igem.org/Team:Glasgow/Notebook'>Notebook</a> 
 +
                      <ul>
 +
                          <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Protocols">Protocols</a></li>         
 +
                      </ul>           
 
                 </li>
 
                 </li>
−
                 <li><!--<div class="ball journal"></div>--><a href='https://2015.igem.org/Team:Glasgow/Notebook'><span class="journal">Notebook</span></a>              
+
                 <li><a href='https://2015.igem.org/Team:Glasgow/Basic_Part'>Parts</a>
 +
                    <ul>
 +
                        <li><a href="https://2015.igem.org/Team:Glasgow/Basic_Part">Basic Parts</a></li>
 +
                        <li><a href="https://2015.igem.org/Team:Glasgow/Composite_Part">Composite</a></li>
 +
                        <li><a href="https://2015.igem.org/Team:Glasgow/Part_Collection">Collection</a></li>               
 +
                    </ul>
 
                 </li>
 
                 </li>
−
                <li><a href='https://2015.igem.org/Team:Glasgow'><img class="main" src="https://static.igem.org/mediawiki/2015/0/0b/Uni-inverted.jpg"/></a></li>
 
 
                  
 
                  
−
                 <li><!--<div class="ball modelling"></div>--><a href='#'><span class="modelling">Modelling</span></a>
+
                 <li><a href='https://2015.igem.org/Team:Glasgow/Design'>Application</a>
−
                     <nav><ul>
+
                     <ul>
−
                         <li><a href='#'>Modelling</a></li>
+
                         <li><a href='https://2015.igem.org/Team:Glasgow/Design'>Product Design</a></li>                
−
                        <li><a href='#'>Top Modelling</a></li>
+
                     </ul>
−
                        <li><a href="#">Super Top Modelling</a></li>                  
+
−
                     </ul></nav>
+
 
                 </li>     
 
                 </li>     
 
                  
 
                  
−
                 <li><!--<div class="ball application"></div>--><a href='#'><span class="application">Application</span></a></li>         
+
                 <li><a href='https://2015.igem.org/Team:Glasgow/Practices'><p style= "padding:0; margin:0; margin-top:0.8vh;">Policy & </p><p style="padding:0; margin:0;"> Practice</p></a>
−
                 <li><!--<div class="ball contact"></div>--><a href='#'><span class="contact">Contact</span></a></li>         
+
                    <ul>
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/AzureA'>Azure A Staining</a></li> 
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/Safety'>Lab Safety</a></li>   
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/Practices/Bedtimestories'>Bedtime Stories</a></li>                         
 +
                    </ul>
 +
 
 +
                </li>         
 +
                 <li><a href='https://2015.igem.org/Team:Glasgow/Interlab'>Measurement</a>
 +
                    <ul>
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/Interlab'>Interlab Study</a></li>
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/Collaborations'>Collaborations</a></li>                 
 +
                    </ul>
 +
              </li>         
 
             </ul>     
 
             </ul>     
 
         </nav>
 
         </nav>
  
 
   <!-- //Navigation bar -->
 
   <!-- //Navigation bar -->
−
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
  
 
<script>
 
<script>
−
 
−
 
  
 
$(window).scroll(function() {
 
$(window).scroll(function() {
 
             if ($(this).scrollTop() > 50) {
 
             if ($(this).scrollTop() > 50) {
−
                 $('nav').addClass("dim");
+
                 $('nav').addClass("dim5");
 
             }
 
             }
 
             else {  
 
             else {  
−
                 $('nav').removeClass("dim");
+
                 $('nav').removeClass("dim5");
 
             }
 
             }
 
         });
 
         });

Latest revision as of 03:14, 21 November 2015