Difference between revisions of "Template:GlasgowNavbar"

(Created page with "<html> <head> <html> <head> <style> →‎===== Navigation Bar =====: nav { background-color:black; height:50px; padding: 0px...")
 
 
(130 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html>
 
−
 
−
<head>
 
−
 
 
<html>
 
<html>
 
<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 =====*/
  
−
    nav {
+
* {
−
                background-color:black;
+
  margin:0;
−
                height:50px;
+
  padding:0;
−
                padding: 0px;
+
}
−
                margin: 0px;
+
−
                position: fixed;
+
−
                width:100%;
+
−
                top:15px;
+
−
                left:0;
+
−
                z-index:99;
+
−
            }
+
−
           
+
−
            nav ul {
+
−
                height:50px;
+
−
                width: 1120px;
+
−
                margin: 0 auto;
+
−
                padding: 0px;
+
−
            }
+
−
           
+
  
−
            .dim {
 
−
                opacity:0.5;
 
−
            }
 
−
           
 
−
            .dim:hover {
 
−
                opacity:1;
 
−
            }
 
  
−
            li a img {
+
.mainNav {
−
                height:50px;
+
    background: url(https://static.igem.org/mediawiki/2015/2/29/Dna_banner.png);
−
                width: 80px;
+
    background-size: 100% 100%;
−
                padding: 0px;
+
    background-color:black;
−
                margin: 0px;
+
    height:8.38%;
−
            }
+
    padding: 0px;
 +
    margin: 0px;
 +
    position: fixed;
 +
    width:100%;
 +
    top:16px;
 +
    left:0;
 +
    z-index:99;
 +
}
 +
 
 +
nav ul li {
 +
    list-style: none;
 +
    width:13.00%;
 +
    max-height: 8.47vh;
 +
    float: left;
 +
    text-align: center;
 +
    padding: 0px;
 +
    margin: 0px;
 +
}
 +
 
 +
nav ul li a, nav ul li a:active, nav ul li a:visited {
 +
    text-decoration: none;
 +
    color: white;
 +
    display:block;
 +
    line-height:7.5vh;
 +
    padding: 0px;
 +
    margin: 0px;
 +
    font-family: sans-serif;
 +
    font-size:1.1vw;
 +
}
 +
 
 +
ul li ul {
 +
    display:none;
 +
}
 +
 
 +
ul li ul li {
 +
    list-style: none;
 +
    display:block;
 +
    width:13.00vw;
 +
    float:none;
 +
    background-color:black;
 +
    color:white;
 +
 
 +
}
 +
 
 +
ul li:hover ul {
 +
    display: block;
 +
    padding:0;
 +
    margin:0;
 +
}
 +
 
 +
.dim5 {
 +
    opacity:0.3;
 +
}
 
              
 
              
−
            nav ul li {
+
.dim5:hover {
−
                list-style: none;
+
    opacity:1;
−
                width:160px;
+
}
−
                max-height: 50px;
+
−
                float: left;
+
−
                text-align: center;
+
−
                padding: 0px;
+
−
                margin: 0px;
+
−
            }
+
−
       
+
−
            nav ul li a {
+
−
                text-decoration: none;
+
−
                color: white;
+
−
                line-height: 50px;
+
−
                display:block;
+
−
            }
+
−
           
+
−
          nav ul li a:visited {
+
−
              text-decoration:none;
+
−
              color:white;
+
−
              }
+
−
           
+
−
            nav ul li a:hover, nav ul li a:visited:hover {
+
−
                background-color:white;
+
−
                color:black;
+
−
                height:50px;
+
−
            }
+
  
−
            .navImg:hover {
+
.first {
−
              background-color:white;
+
  margin-left:3.45vw;
−
              height:50px;
+
}
−
              width:80px;
+
−
              display:block;
+
−
              margin: 0px auto;
+
−
            }
+
−
+
−
/*===== //Navigation Bar ====*/
+
  
 
</style>
 
</style>
 +
</head>
  
 
<body>
 
<body>
  
 
  <!-- Navigation bar -->
 
  <!-- Navigation bar -->
−
  <nav>
+
     
 +
        <nav class="mainNav">
 
             <ul>
 
             <ul>
−
                 <li><div></div><a class="project" href='#'>Project</a></li>
+
                 <li class="first"><a  href='https://2015.igem.org/Team:Glasgow'>Project</a>
−
                <li><div></div><a class="team" href='https://2015.igem.org/Team:Glasgow/Team'>Team</a></li>
+
                <ul>
−
                <li><div></div><a class="journal" href='https://2015.igem.org/Team:Glasgow/Notebook'>Notebook</a></li>
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview">Overview</a></li>
−
                <li><a class="navImg" href='#'><img class="main" src="https://static.igem.org/mediawiki/2015/4/4e/Uni.jpg"/></a></li>
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/UVA">UVA</a></li>
−
                 <li><div></div><a class="modelling" href='#'>Modelling</a></li>     
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Repressors">Repressors</a></li>
−
                 <li><div></div><a class="application" href='#'>Application</a></li>         
+
                        <li><a href="https://2015.igem.org/Team:Glasgow/Project/Overview/Bistable">Bistable Switch</a></li>
−
                 <li><div></div><a class="contact" href='#'>Contact</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><a href='https://2015.igem.org/Team:Glasgow/Team'>About Us</a>
 +
                    <ul>
 +
                        <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/Sponsors">Sponsors</a></li>               
 +
                    </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><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><a href='https://2015.igem.org/Team:Glasgow/Design'>Application</a>
 +
                    <ul>
 +
                        <li><a href='https://2015.igem.org/Team:Glasgow/Design'>Product Design</a></li>                 
 +
                    </ul>
 +
                </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>
 +
                    <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>
−
 
−
$(document).ready(function(){
 
−
   
 
−
    $(".fade").hide(0).delay(0).fadeIn(1500);
 
−
   
 
−
    $("li > div").mouseover(function(){
 
−
        this.style.pointerEvents = "none";
 
−
    $(this).animate({
 
−
        marginLeft: '+=50px',
 
−
            opacity: '0.8'}, 1200);
 
−
      $(this).animate({
 
−
           
 
−
        marginLeft: '+=50px',
 
−
            opacity: '0'}, 1200, function(){
 
−
            $(this).removeAttr('style');
 
−
        });
 
−
});
 
−
});
 
  
 
$(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");
 
             }
 
             }
 
         });
 
         });
Line 134: Line 163:
  
 
</body>
 
</body>
 +
</html>

Latest revision as of 03:14, 21 November 2015