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>
−
 
+
@import
−
.nav {
+
.url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
−
 
+
h1{
−
   height:100px;
+
  font:400 40px 'pt sans',sans-serif;
 +
  text-align:center;
 +
}
 +
.nav a{
 +
  text-decoration:none;
 +
}
 +
.nav{
 +
   height:70px;
 
   background:#222;
 
   background:#222;
−
+
  position:relative;
 
}
 
}
−
 
+
.nav>ul{
−
 
+
  position:relative;
 +
  list-style:none;
 +
  padding:0;
 +
  margin:0;
 
}
 
}
−
 
+
.nav>ul>li>ul{
−
.dropdown {
+
  position:absolute;
−
    position: relative;
+
  left:0;
−
    display: inline-block;
+
  padding:0;
−
  z-index: 9999;
+
  margin:0;
 +
  list-style:none;
 
}
 
}
−
 
+
.nav>ul>li:hover>ul li a{
−
.dropdown-content {
+
  opacity:1;
−
    display: none;
+
  height:50px;
−
    position: absolute;
+
  transition:all .3s linear;
−
    background-color: #f9f9f9;
+
  -o-transition:all .3s linear;
−
    min-width: 160px;
+
  -moz-transition:all .3s linear;
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
  -webkit-transition:all .3s linear;
−
    padding: 12px 16px;
+
−
    z-index: 1;
+
 
}
 
}
−
 
+
.nav>ul>li>ul a{
−
.dropdown:hover .dropdown-content {
+
  display:block;
−
    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;
 +
}
 +
.lamp span{
 +
  display:block;
 +
  height:4px;
 +
  background:#ee6666;
 +
  position: relative;
 +
}
 +
.lamp span:after {
 +
bottom: 100%;
 +
left: 50%;
 +
border: solid transparent;
 +
content: " ";
 +
height: 0;
 +
width: 0;
 +
position: absolute;
 +
pointer-events: none;
 +
border-color: rgba(238, 102, 102, 0);
 +
border-bottom-color: #ee6666;
 +
border-width: 4px;
 +
margin-left: -4px;
 +
}
 +
.lamp{
 +
  position:absolute !important;
 +
  height:4px;
 +
  top:66px;
 +
  background:#333;
 +
  transition:all .3s linear;
 +
  -o-transition:all .3s linear;
 +
  -moz-transition:all .3s linear;
 +
  -webkit-transition:all .3s linear;
 +
}
 +
.selected.active>a,.active>a{
 +
  transition:all .3s linear;
 +
  -o-transition:all .3s linear;
 +
  -moz-transition:all .3s linear;
 +
  -webkit-transition:all .3s linear;
 +
  color:#fff;
 +
}
 +
.credit{
 +
  text-align:center;
 +
  margin:20px 0;
 +
}
 +
.blog-link{
 +
color:#fff;
 +
text-decoration:none;
 +
background:#eee;
 +
background-size:40px;
 +
line-height:50px;
 +
display:inline-block;
 +
padding:0 10px;
 +
border-radius:4px;
 +
border-bottom:3px solid #ddd;
 +
color:#333;
 +
font-family:'open sans',sans-serif;
 +
margin:10px;
 +
}
 +
.dgithub{
 +
color:#fff;
 +
text-decoration:none;
 +
background:#eee url('https://lh6.googleusercontent.com/-MOW-T0KLZJI/UyR6EIggYkI/AAAAAAAAEbM/el92Uoxz-aI/s50-no/GitHub-Mark.png') no-repeat;
 +
background-size:40px;
 +
line-height:50px;
 +
display:inline-block;
 +
padding:0 10px 0 50px;
 +
background-position:5px;
 +
border-radius:4px;
 +
border-bottom:3px solid #ddd;
 +
color:#333;
 +
font-family:'open sans',sans-serif;
 +
margin:10px;
 
}
 
}
 
</style>
 
</style>
Line 38: Line 144:
  
  
−
<div class="nav">
+
<h1>Lava Lamp W/ CSS3 Drop Down</h1>
−
<div class="dropdown">
+
<div class='nav'>
−
   <span>Overview</span>
+
   <ul>
−
</div>
+
    <li><a href='#'>Home</a></li>
−
 
+
    <li><a href='#'>Articles</a>
−
<div class="dropdown">
+
    <ul>
−
  <span>Description</span>
+
      <li><a href='#'>Tutorial</a></li>
−
  <div class="dropdown-content">
+
      <li><a href='#'>Snippets</a></li>
−
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">  
+
      <li><a href='#'>Freebies</a></li>
−
One
+
      <li><a href='#'>Design</a></li>
−
</a>
+
      </ul>
−
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">  
+
    </li>
−
Two
+
    <li><a href='#'>Subscription</a>
−
</a>
+
        <ul>
−
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">  
+
      <li><a href='#'>Free</a></li>
−
Three
+
      <li><a href='#'>Bronze</a></li>
−
</a>
+
      <li><a href='#'>Sliver</a></li>
−
  </div>
+
      <li><a href='#'>Gold</a></li>
−
</div>
+
      </ul>
−
 
+
    </li>
−
 
+
    <li><a href='#'>About Us</a></li>
−
<div class="dropdown">
+
    <li><a href='#'>Contact Us</a></li>
−
<a href="https://2017.igem.org/Team:William_and_Mary/Engagement">  
+
    <li class='lamp'><span></span></li>
−
Human Practices
+
  </ul>
−
</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="dropdown">
+
−
  <a href="https://2017.igem.org/Team:William_and_Mary/Team">  
+
−
Team
+
−
</a>
+
 
</div>
 
</div>
 +
<div class='credit'>
 +
  <a class='blog-link' href='http://www.bloggerever.com/2014/03/lavalampnavigation.html' target='_blank'>Find This On My Blog</a>
 +
  <a href='https://github.com/bloggerever/Lava-Lamp' class='dgithub' target='_blank'>Fork On Github</a>
 
</div>
 
</div>
  
 
</html>
 
</html>

Revision as of 14:54, 2 August 2017


Lava Lamp W/ CSS3 Drop Down

Find This On My Blog Fork On Github