Difference between revisions of "Template:GlasgowNavbar"

Line 3: Line 3:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta charset="utf-8">
 
<meta charset="utf-8">
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
  <link rel="stylesheet" href="https://2015.igem.org/Team:Glasgow/bootstrap.min.css?action=raw&ctype=text/css">
+
−
  <script src="https://2015.igem.org/Team:Glasgow/bootstrap.min.js?action=raw&ctype=text/css"></script>
+
−
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,900' rel='stylesheet' type='text/css'>
+
−
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+
 
<head>
 
<head>
 
<style>
 
<style>
Line 13: Line 9:
 
/*===== Navigation Bar =====*/
 
/*===== Navigation Bar =====*/
  
−
    nav {
+
.mainNav {
−
                background-color:black;
+
    background-image: url(https://static.igem.org/mediawiki/2015/2/29/Dna_banner.png);
−
                height:50px;
+
    background-size: cover;
−
                padding: 0px;
+
    background-color:black;
−
                margin: 0px;
+
    height:50px;
−
                position: fixed;
+
    padding: 0px;
−
                width:100%;
+
    margin: 0px;
−
                top:15px;
+
    position: fixed;
−
                left:0;
+
    width:100%;
−
                z-index:99;
+
    top:16px;
−
            }
+
    left:0;
 +
}
 
              
 
              
−
            nav ul {
+
nav ul {
−
                height:50px;
+
    height:50px;
−
                width: 1120px;
+
    width: 1120px;
−
                margin: 0 auto;
+
    margin: 0 auto;
−
                padding: 0px;
+
    padding: 0px;
−
            }
+
}
 
              
 
              
−
 
+
li a img {
−
            .dim {
+
    height:42px;
−
                opacity:0.3;
+
    width: 67px;
−
            }
+
    padding: 0px;
 +
    display:block;
 +
    margin: auto;
 +
    margin-top:4px;
 +
}
 
              
 
              
−
            .dim:hover {
+
nav ul li {
−
                opacity:1;
+
    list-style: none;
−
            }
+
    width:160px;
−
 
+
    max-height: 50px;  
−
            li a img {
+
    float: left;
−
                height:50px;
+
    text-align: center;
−
                width: 80px;
+
    padding: 0px;
−
                padding: 0px;
+
    margin: 0px;
−
                margin: 0px;
+
}
−
            }
+
−
           
+
−
            nav ul li {
+
−
                list-style: none;
+
−
                width:160px;
+
−
                max-height: 50px;  
+
−
                float: left;
+
−
                text-align: center;
+
−
                padding: 0px;
+
−
                margin: 0px;
+
−
            }
+
 
          
 
          
−
            nav ul li a {
+
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;
+
    line-height: 50px;
−
                display:block;
+
    display:block;
−
            }
+
    padding: 0px;
 +
    margin: 0px;
 +
    font-family: sans-serif;
 +
}
 +
/*       
 +
li a:hover {
 +
    background-color:white;
 +
    color:black;
 +
    height:50px;
 +
}*/
 
              
 
              
−
          nav ul li a:visited {
+
li .ball {
−
              text-decoration:none;
+
    height: 45px;
−
              color:white;
+
    width: 45px;
−
              }
+
    background-color: yellow;
−
           
+
    position:absolute;
−
            nav ul li a:hover, nav ul li a:visited:hover {
+
    border-radius:50%;
−
                background-color:white;
+
    margin-top:2px;
−
                color:black;
+
    opacity: 0;
−
                height:50px;
+
}  
−
            }
+
  
−
            .navImg:hover {
+
.dropNav {
−
              background-color:white;
+
    background-color:black;
−
              height:50px;
+
    width:1400px;
−
              width:80px;
+
    height:20px;
−
              display:block;
+
    display:none;
−
              margin: 0px auto;
+
    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: 10px;
 +
}
 +
 
 +
span.team {
 +
    margin-right: 10px;
 +
}
 +
 
 +
span.journal {
 +
    margin-right: 5px;
 +
}
 +
 
 +
span.modelling {
 +
    margin-left: 7px;
 +
}
 +
 
 +
span.application {
 +
    margin-left: 10px;
 +
}
 +
 
 +
span.contact {
 +
    margin-left: 15px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
div.project {
 +
    margin-left: 20px;
 +
}
 +
 
 +
div.team {
 +
    margin-left: 22px;
 +
}
 +
 
 +
div.journal {
 +
    margin-left: 25px;
 +
}
 +
 
 +
div.modelling {
 +
    margin-left: 30px;
 +
}
 +
 
 +
div.application {
 +
    margin-left: 33px;
 +
}
 +
 
 +
div.contact {
 +
    margin-left: 36px;
 +
}
 +
 
 +
ul li ul {
 +
    display:none;
 +
    position:relative;
 +
   
 +
}
 +
 
 +
ul li ul li {
 +
    list-style: none;
 +
    display:block;
 +
    width:140px;
 +
    float:none;
 +
    background-color:black;
 +
    color:white;
 +
    padding:10px;
 +
}
 +
/*
 +
ul li:hover .dropNav {
 +
  display: block;
 +
}*/
 +
 
 +
ul li:hover ul {
 +
    display:block;
 +
}
 +
 
 +
.dim {
 +
    opacity:0.3;
 +
}
 +
              
 +
.dim:hover {
 +
    opacity:1;
 +
}
 
   
 
   
 
/*===== //Navigation Bar ====*/
 
/*===== //Navigation Bar ====*/
Line 91: Line 193:
  
 
  <!-- Navigation bar -->
 
  <!-- Navigation bar -->
−
  <nav>
+
     
 +
        <nav class="mainNav">
 
             <ul>
 
             <ul>
−
                 <li><div></div><a class="project" href='#'>Project</a></li>
+
                 <li><!--<div class="ball project"></div>--><a href='#'><span class="project">Project</span></a>
−
                 <li><div></div><a class="team" href='https://2015.igem.org/Team:Glasgow/Team'>Team</a></li>
+
                <nav><ul>
−
                <li><div></div><a class="journal" href='https://2015.igem.org/Team:Glasgow/Notebook'>Notebook</a></li>
+
                        <li><a href="#">Description</a></li>
−
                 <li><a class="navImg" href='https://2015.igem.org/Team:Glasgow'><img class="main" src="https://static.igem.org/mediawiki/2015/4/4e/Uni.jpg"/></a></li>
+
                        <li><a href="#">Biology</a></li>
−
                 <li><div></div><a class="modelling" href='#'>Modelling</a></li>  
+
                        <li><a href="#">More Biology</a></li>                   
−
                <li><div></div><a class="application" href='#'>Application</a></li>         
+
                    </ul></nav>             
−
                 <li><div></div><a class="contact" href='https://2015.igem.org/Team:Glasgow/Attributions'>Attributions</a></li>         
+
               
 +
                 </li>
 +
                <li><!--<div class="ball team"></div>--><a href='pages/team/team.html'><span class="team">About Us</span></a>
 +
                <nav><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></nav>
 +
                </li>
 +
                <li><!--<div class="ball journal"></div>--><a href='https://2015.igem.org/Team:Glasgow/Notebook'><span class="journal">Notebook</span></a>              
 +
                </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>
 +
                    <nav><ul>
 +
                        <li><a href='#'>Modelling</a></li>
 +
                        <li><a href='#'>Top Modelling</a></li>
 +
                        <li><a href="#">Super Top Modelling</a></li>                   
 +
                    </ul></nav>
 +
                </li>   
 +
               
 +
                <li><!--<div class="ball application"></div>--><a href='#'><span class="application">Application</span></a></li>         
 +
                 <li><!--<div class="ball contact"></div>--><a href='#'><span class="contact">Contact</span></a></li>         
 
             </ul>     
 
             </ul>     
 
         </nav>
 
         </nav>
 +
 
   <!-- //Navigation bar -->
 
   <!-- //Navigation bar -->
  
Line 122: Line 249:
  
 
</body>
 
</body>
 +
</html>

Revision as of 11:20, 19 August 2015