Difference between revisions of "Template:Team:William and Mary/HEADER3"

Line 4: Line 4:
 
     <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
     <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
<style>
 
<style>
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
  z-index: 9999;
 +
}
  
−
.nav a{
+
.dropdown-content {
−
  text-decoration:none;
+
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    padding: 12px 16px;
 +
    z-index: 1;
 
}
 
}
−
.nav{
+
 
−
  height:70px;
+
.dropdown:hover .dropdown-content {
−
  background:#222;
+
     display: block;
−
  position:relative;
+
−
  margin: -20;
+
−
  width: 100%
+
−
  z-index: 9999;
+
−
}
+
−
.nav>ul{
+
−
  position:relative;
+
−
  list-style:none;
+
−
  padding:0;
+
−
  margin:0;
+
−
}
+
−
.nav>ul>li>ul{
+
−
  position:absolute;
+
−
  left:0;
+
−
  padding:0;
+
−
  margin:0;
+
−
  list-style:none;
+
−
}
+
−
.nav>ul>li:hover>ul li a{
+
−
  opacity:1;
+
−
  height:50px;
+
−
  transition:all .3s linear;
+
−
  -o-transition:all .3s linear;
+
−
  -moz-transition:all .3s linear;
+
−
  -webkit-transition:all .3s linear;
+
−
}
+
−
.nav>ul>li>ul a{
+
−
  display:block;
+
−
  color:#222;
+
−
  width:150px;
+
−
  line-height:50px !important;
+
−
  font:700 14px 'pt sans',sans-serif;
+
−
  background:#eee;
+
−
  border-bottom:1px solid #ddd;
+
−
  text-align:center;
+
−
  padding:0 5px;
+
−
  height:0;
+
−
  overflow:hidden;
+
−
  opacity:0;
+
−
     transition:all .3s linear .2s;
+
−
  -o-transition:all .3s linear .2s;
+
−
  -moz-transition:all .3s linear .2s;
+
−
  -webkit-transition:all .3s linear .2s;
+
−
}
+
−
.nav>ul>li{
+
−
  float:left;
+
−
  position:relative;
+
−
}
+
−
.nav>ul>li>a{
+
−
  padding:0 20px;
+
−
  color:#fff;
+
−
  display:block;
+
−
  line-height:70px !important;
+
−
  font:400 15px 'PT Sans', sans-serif;
+
−
  text-transform:uppercase;
+
−
  text-decoration:none;
+
 
}
 
}
 +
</style>
  
 +
<div class="dropdown">
 +
  <span>Overview</span>
 +
</div>
  
−
.selected.active>a,.active>a{
+
<div class="dropdown">
−
   transition:all .3s linear;
+
   <span>Description</span>
−
   -o-transition:all .3s linear;
+
   <div class="dropdown-content">
−
   -moz-transition:all .3s linear;
+
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">
−
   -webkit-transition:all .3s linear;
+
One
−
   color:#fff;
+
</a>
 +
   <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
Two
 +
</a>
 +
   <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
Three
 +
</a>
 +
   </div>
 +
</div>
  
  
−
</style>
+
<div class="dropdown">
 +
<a href="https://2017.igem.org/Team:William_and_Mary/Engagement">
 +
Human Practices
 +
</a>
 +
  <div class="dropdown-content">
 +
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
One
 +
</a>
 +
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
Two
 +
</a>
 +
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
Three
 +
</a>
 +
  </div>
 +
</div>
  
  
−
<div class='nav'>
 
−
  <ul>
 
−
    <li><a href='#'>Home</a></li>
 
−
    <li><a href='#'>Articles</a>
 
−
    <ul>
 
−
      <li><a href='#'>Tutorial</a></li>
 
−
      <li><a href='#'>Snippets</a></li>
 
−
      <li><a href='#'>Freebies</a></li>
 
−
      <li><a href='#'>Design</a></li>
 
−
      </ul>
 
−
    </li>
 
−
    <li><a href='#'>Subscription</a>
 
−
        <ul>
 
−
      <li><a href='#'>Free</a></li>
 
−
      <li><a href='#'>Bronze</a></li>
 
−
      <li><a href='#'>Sliver</a></li>
 
−
      <li><a href='#'>Gold</a></li>
 
−
      </ul>
 
−
    </li>
 
−
    <li><a href='#'>About Us</a></li>
 
−
    <li><a href='#'>Contact Us</a></li>
 
−
    <li class='lamp'><span></span></li>
 
−
  </ul>
 
−
</div>
 
  
 +
<div class="dropdown">
 +
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">
 +
Team
 +
</a>
 +
</div>
  
 
</html>
 
</html>

Revision as of 15:04, 2 August 2017


Overview
Description
One Two Three
Human Practices
One Two Three
Team