Difference between revisions of "Team:Glasgow/test"

Line 18: Line 18:
 
   </head>
 
   </head>
 
<style>
 
<style>
 +
html, body {
 +
  width: 100%;
 +
  margin: 0px;
 +
}
  
−
/*===== Navigation Bar =====*/
+
html {
 +
  background: #eeecec;
 +
  overflow-x: hidden;
 +
}
  
−
.mainNav {
+
#container {
−
    background: url(https://static.igem.org/mediawiki/2015/2/29/Dna_banner.png);
+
  z-index: 111;
−
    background-size: cover;
+
−
    background-color:black;
+
−
    height:50px;
+
−
    padding: 0px;
+
−
    margin: 0px;
+
−
    position: fixed;
+
−
    width:100%;
+
−
    top:16px;
+
−
    left:0;
+
−
    z-index:99;
+
 
}
 
}
−
           
+
 
−
nav ul {
+
.navT {
−
    height:50px;
+
  -webkit-transition: all 0.25s;
−
    width: 92%;
+
  z-index: 111;
−
    margin: 0 auto;
+
  cursor: pointer;
−
    padding: 0px;
+
  width: 100%;
 +
  background: #212121;
 +
  height: 65px;
 +
  left: 0;
 +
  top: 0;
 +
  position: fixed;
 
}
 
}
−
           
+
.navT .icon {
−
li a img {
+
  -webkit-transition: all 0.25s;
−
    height:42px;
+
  position: absolute;
−
    width: 67px;
+
  width: 30px;
−
    padding: 0px;
+
  height: 1px;
−
    display:block;
+
  left: 15px;
−
    margin: auto;
+
  top: 30px;
−
    margin-top:4px;
+
  background-color: white;
−
    margin-right:40px;
+
 
}
 
}
−
           
+
.navT .icon:before, .navT .icon:after {
−
nav ul li {
+
  -webkit-transition: all 0.25s;
−
    list-style: none;
+
  width: 30px;
−
    width:14%;
+
  height: 1px;
−
    max-height: 50px;  
+
  left: 0;
−
    float: left;
+
  background: white;
−
    text-align: center;
+
  position: absolute;
−
    padding: 0px;
+
  content: '';
−
    margin: 0px;
+
 
}
 
}
−
       
+
.navT .icon:before {
−
nav ul li a, nav ul li a:active, nav ul li a:visited {
+
  top: -10px;
−
    text-decoration: none;
+
−
    color: white;
+
−
    line-height: 50px;
+
−
    display:block;
+
−
    padding: 0px;
+
−
    margin: 0px;
+
−
    font-family: sans-serif;
+
−
}
+
−
/*       
+
−
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;
+
−
    height:20px;
+
−
    display:none;
+
−
    position:absolute;
+
−
    left:0;
+
−
    margin:0px auto;
+
 
}
 
}
−
 
+
.navT .icon:after {
−
/*
+
  top: 10px;
−
.dropNav ul li {
+
−
    text-align: center;
+
−
    margin: 10px auto;
+
−
    padding:5px;
+
 
}
 
}
−
 
+
.navT:hover {
−
.dropNav ul {
+
  background: black;
−
    margin: 0px auto;
+
−
    border: 1px solid red;
+
−
    width:px;
+
−
    height:25px;   
+
−
}*/
+
−
 
+
−
 
+
−
 
+
−
span.project {
+
−
    margin-right: -15px;
+
 
}
 
}
−
 
+
.navT:hover .icon:before {
−
span.team {
+
  top: -12px;
−
    margin-right: -30px;
+
 
}
 
}
−
 
+
.navT:hover .icon:after {
−
span.journal {
+
  top: 12px;
−
    margin-right: -35px;
+
 
}
 
}
−
 
+
.navT.active .icon {
−
span.modelling {
+
  -webkit-transform: rotate(180deg);
−
    margin-left: 25px;
+
  background-color: transparent;
 +
  left: 10px;
 
}
 
}
−
 
+
.navT.active .icon:before, .navT.active .icon:after {
−
span.application {
+
  top: 0;
−
    margin-left: 28px;
+
 
}
 
}
−
 
+
.navT.active .icon:before {
−
span.contact {
+
  -webkit-transform: rotate(45deg);
−
    margin-left: 13px;
+
 
}
 
}
−
 
+
.navT.active .icon:after {
−
 
+
  -webkit-transform: rotate(-45deg);
−
 
+
−
 
+
−
 
+
−
div.project {
+
−
    margin-left: 20px;
+
 
}
 
}
  
−
div.team {
+
#menu {
−
    margin-left: 22px;
+
  z-index: 111;
 +
  -webkit-transition: all 0.5s;
 +
  text-align: center;
 +
  position: fixed;
 +
  left: 0;
 +
  right: 0;
 +
  margin: 0 auto;
 +
  top: 65px;
 +
  font-size: 18px;
 +
  font-family: sans-serif;
 +
  font-weight: 100;
 +
  text-transform: uppercase;
 +
  width: 100%;
 +
  height: 0;
 +
  border-bottom: 1px solid transparent;
 +
  overflow: hidden;
 
}
 
}
−
 
+
#menu ul {
−
div.journal {
+
  list-style: none;
−
    margin-left: 25px;
+
  padding: 0;
 +
  letter-spacing: 0.4em;
 
}
 
}
−
 
+
#menu li:first-child {
−
div.modelling {
+
  margin-top: 0;
−
    margin-left: 7px;
+
 
}
 
}
−
 
+
#menu li {
−
div.application {
+
  -webkit-transition: all 0.2s;
−
    margin-left: 33px;
+
  margin-top: 20px;
 +
  padding: 5px 0;
 +
  color: white;
 +
}
 +
#menu a {
 +
  padding: 8px;
 +
  -webkit-transition: all 0.25s;
 +
  cursor: pointer;
 +
}
 +
#menu a:hover {
 +
  letter-spacing: 0.5em;
 +
  text-decoration: underline;
 +
}
 +
#menu.open {
 +
  height: 270px;
 +
  width: 100%;
 +
  background: #f3581b;
 +
  border-bottom: 1px solid black;
 
}
 
}
  
−
div.contact {
+
.space {
−
    margin-left: 36px;
+
  letter-spacing: 0;
 
}
 
}
  
−
ul li ul {
+
.content {
−
    display:none;
+
  width: 100%;
−
    position:relative;
+
  font-size: 20px;
−
    padding-left:20px;
+
  font-family: sans-serif;
−
   
+
  font-weight: 100;
 +
  -webkit-transition: top 0.5s;
 +
  position: absolute;
 +
  top: 65px;
 +
  margin: 0 auto;
 +
}
 +
.content h1 {
 +
  font-size: 3em;
 +
  text-transform: uppercase;
 +
  margin-top: 85px;
 +
  margin-left: 10px;
 +
}
 +
.content h2 {
 +
  font-size: 1em;
 +
  text-transform: uppercase;
 +
  margin-top: -25px;
 +
  margin-left: 10px;
 +
  font-weight: 400;
 +
  letter-spacing: 0.7em;
 +
}
 +
.content.shift {
 +
  top: 335px;
 
}
 
}
  
−
ul li ul li {
+
p {
−
    list-style: none;
+
  max-width: 600px;
−
    display:block;
+
  font-size: 0.75em;
−
    width:160px;
+
  line-height: 1.75em;
−
    float:none;
+
  text-align: left;
−
    background-color:black;
+
  margin-left: 10px;
−
    color:white;
+
−
    padding-left:15px;
+
 
}
 
}
−
/*
 
−
ul li:hover .dropNav {
 
−
  display: block;
 
−
}*/
 
  
−
ul li:hover ul {
+
#second {
−
    display:block;
+
  left: 0;
 +
  width: 100%;
 +
  background: #999;
 +
  height: 600px;
 +
  margin-top: 200px;
 +
  text-align: center;
 +
}
 +
#second h1, #second h2 {
 +
  margin-right: 20px;
 +
}
 +
#second h1 {
 +
  padding-top: 40px;
 +
}
 +
#second p {
 +
  text-align: center;
 +
  margin: 0 auto;
 +
  margin-bottom: 20px;
 
}
 
}
  
−
.dim {
+
#third {
−
    opacity:0.3;
+
  background: black;
 +
  width: 100%;
 +
  height: 300px;
 +
  padding-top: 50px;
 
}
 
}
−
           
+
#third h2 {
−
.dim:hover {
+
  color: white;
−
    opacity:1;
+
  text-align: center;
 +
  margin-top: 50px;
 +
}
 +
#third h5 {
 +
  color: white;
 +
  font-family: sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: 200;
 +
  letter-spacing: 0.25em;
 +
  text-align: center;
 
}
 
}
−
 
−
/*===== //Navigation Bar ====*/
 
  
 +
#bar {
 +
  width: 40%;
 +
  height: 200px;
 +
  margin: 0 auto;
 +
  border: 1px dashed white;
 +
}
 
</style>
 
</style>
 +
<script>
 +
$(".navT").on("click", function(){
 +
  $(this).toggleClass("active");
 +
  $("#menu").toggleClass("open");
 +
  $(".content").toggleClass("shift");
 +
 
 +
 
 +
})
 +
</script>
  
−
<body>
 
  
−
<!-- Navigation bar -->
 
−
     
 
−
        <nav class="mainNav">
 
−
            <ul>
 
−
                <li style="padding-left:20px"><!--<div class="ball project"></div>--><a  href='#'><span class="project">Project</span></a>
 
−
                <nav><ul>
 
−
                        <li><a href="#">Description</a></li>
 
−
                        <li><a href="#">Biology</a></li>
 
−
                        <li><a href="#">More Biology</a></li>                   
 
−
                    </ul></nav>             
 
−
               
 
−
                </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>   
 
−
        </nav>
 
  
−
  <!-- //Navigation bar -->
 
  
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
  
−
<script>
 
  
 +
<div id="container">
 +
  <div class="navT">
 +
    <div class="icon"></div>
 +
  </div>
 +
 
 +
  <div id="menu">
 +
    <ul>
 +
      <li><a>Hom<span class="space">e</span></a></li>
 +
      <li><a>Abou<span class="space">t</span></a></li>
 +
      <li><a>Wor<span class="space">k</span></a></li>
 +
      <li><a>Blo<span class="space">g</span></a></li>
 +
      <li><a>Contac<span class="space">t</span></a></li>
 +
    </ul>
 +
  </div>
  
 +
</div>
 +
<div class='content'>
 +
  <div id="first">
 +
  <h1> Sample Content </h1>
 +
  <h2>A quick example of a nav menu</h2>
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
 +
  <div id="second">
 +
    <h1>The Top Menu</h1>
 +
    <h2>Pushes page content down</h2>
 +
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
    <div id="bar"></div>
 +
  </div>
 +
  <div id="third">
 +
    <h2>But also allows for scrollling</h2>
 +
    <h5>While the menu is down</h5>
 +
  </div>
 +
 
 +
</div>
  
−
$(window).scroll(function() {
 
−
            if ($(this).scrollTop() > 50) {
 
−
                $('nav').addClass("dim");
 
−
            }
 
−
            else {
 
−
                $('nav').removeClass("dim");
 
−
            }
 
−
        });
 
−
 
−
</script>
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:40, 23 August 2015

Sample Content

A quick example of a nav menu

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Top Menu

Pushes page content down

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

But also allows for scrollling

While the menu is down