Team:Imperial College/Templates/Navigation

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<!-- The following style was written in Less, and then compiled to CSS -->
 
-
<!-- Find the less code at https://gist.github.com/lawliet89/6300830 -->
 
-
<style type="text/css">
 
-
@charset "UTF-8";
 
-
ul.navigation-menu {
 
-
  list-style-type: none;
 
-
  list-style-image: none;
 
-
  width: 975px;
 
-
  height: 50px;
 
-
  text-align: center;
 
-
  display: inline-block;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
  position: relative;
 
-
  font-family: Helvetica, Arial, sans-serif;
 
-
  color: #ffffff;
 
-
  cursor: pointer;
 
-
  /* CSS3 Gradient */
 
-
 
-
  background: #36a9e1;
 
-
}
 
-
ul.navigation-menu ul {
 
-
  list-style-type: none;
 
-
  list-style-image: none;
 
-
  opacity: 0;
 
-
  position: relative;
 
-
  z-index: -999;
 
-
}
 
-
ul.navigation-menu a:link,
 
-
ul.navigation-menu a:visited {
 
-
  text-decoration: none;
 
-
  color: #ffffff;
 
-
  display: inline-block;
 
-
  width: 100%;
 
-
  height: 100%;
 
-
}
 
-
ul.navigation-menu > li {
 
-
  display: block;
 
-
  float: left;
 
-
  line-height: 50px;
 
-
  height: 50px;
 
-
  text-align: center;
 
-
  width: 194px;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
  border-right: 1px solid #2b87b4;
 
-
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset;
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
}
 
-
ul.navigation-menu > li > ul {
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
  list-style-type: none;
 
-
  list-style-image: none;
 
-
  text-align: center;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
  height: 0;
 
-
}
 
-
ul.navigation-menu > li > ul > li {
 
-
  display: block;
 
-
  opacity: 0;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
  height: 0;
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
}
 
-
ul.navigation-menu > li:hover {
 
-
  background-color: #a3c4e9;
 
-
}
 
-
ul.navigation-menu > li:hover > ul {
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
  position: relative;
 
-
  z-index: 9999;
 
-
  height: auto;
 
-
  opacity: 1;
 
-
  border-bottom-left-radius: 5px;
 
-
  border-bottom-right-radius: 5px;
 
-
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 
-
  background: #36a9e1;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li {
 
-
  opacity: 1;
 
-
  border-bottom: 1px solid #2b87b4;
 
-
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
 
-
  height: 50px;
 
-
  line-height: 50px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:first-child {
 
-
  box-shadow: none;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:last-child {
 
-
  border-bottom: none;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover {
 
-
  background-color: #a3c4e9;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:active {
 
-
  background-color: #93b4d9;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li.maple {
 
-
  background-image: url('https://static.igem.org/mediawiki/2013/8/82/MapleLogo.png');
 
-
  background-size: 65% auto;
 
-
  background-repeat: no-repeat;
 
-
  background-position: 40% 40%;
 
-
  background-color: #ffce32;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li.maple a {
 
-
  text-indent: -9999999px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li.maple:hover {
 
-
  background-color: #fff;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li.maple:active {
 
-
  background-color: #ffce32;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li > ul {
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
  list-style-type: none;
 
-
  list-style-image: none;
 
-
  text-align: center;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
  position: relative;
 
-
  left: 194px;
 
-
  top: -50px;
 
-
  opacity: 1;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li > ul:before {
 
-
  content: "»";
 
-
  display: block;
 
-
  position: absolute;
 
-
  left: -20px;
 
-
  text-align: right;
 
-
  line-height: 50px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li > ul > li {
 
-
  -webkit-transition: all 300ms ease;
 
-
  -moz-transition: all 300ms ease;
 
-
  -ms-transition: all 300ms ease;
 
-
  -o-transition: all 300ms ease;
 
-
  transition: all 300ms ease;
 
-
  width: 0;
 
-
  width: 0;
 
-
  opacity: 0;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li > ul.left {
 
-
  left: 0;
 
-
  right: 194px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover > ul {
 
-
  height: auto;
 
-
  width: 194px;
 
-
  opacity: 1;
 
-
  border-top-right-radius: 5px;
 
-
  border-bottom-left-radius: 5px;
 
-
  border-bottom-right-radius: 5px;
 
-
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 
-
  background: #36a9e1;
 
-
  z-index: 9999999;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover > ul > li {
 
-
  width: 194px;
 
-
  height: 50px;
 
-
  line-height: 50px;
 
-
  opacity: 1;
 
-
  border-bottom: 1px solid #2b87b4;
 
-
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover > ul > li:first-child {
 
-
  box-shadow: none;
 
-
  border-top-right-radius: 5px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover > ul > li:last-child {
 
-
  border-bottom: none;
 
-
  border-bottom-left-radius: 5px;
 
-
  border-bottom-right-radius: 5px;
 
-
}
 
-
ul.navigation-menu > li:hover > ul > li:hover > ul > li:hover {
 
-
  background-color: #a3c4e9;
 
-
}
 
-
ul.navigation-menu > li:active {
 
-
  background-color: #93b4d9;
 
-
}
 
-
 
-
</style>
 
  <ul class="navigation-menu">
  <ul class="navigation-menu">
         <li><a href="https://2013.igem.org/Team:Imperial_College">Plasticity +</a>
         <li><a href="https://2013.igem.org/Team:Imperial_College">Plasticity +</a>
Line 223: Line 16:
                 <li><a href="https://2013.igem.org/Team:Imperial_College/Waste_Cocktail">Waste Degradation</a></li>
                 <li><a href="https://2013.igem.org/Team:Imperial_College/Waste_Cocktail">Waste Degradation</a></li>
                 <li><a href="https://2013.igem.org/Team:Imperial_College/PHB_Recycling">Bioplastic Recycling</a></li>
                 <li><a href="https://2013.igem.org/Team:Imperial_College/PHB_Recycling">Bioplastic Recycling</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Waste_Degradation:_SRF">SRF</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/BioPlastic_Recycling:_PHB">PHB</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/BioPlastic_Recycling:_PLA">PLA</a></li>
               </ul>
               </ul>
             </li>
             </li>
Line 255: Line 51:
           <ul>
           <ul>
              
              
-
         <li><a href="https://2013.igem.org/Team:Imperial_College/Our_Beautiful_Faces">Meet Us</a></li>
+
         <li><a href="https://2013.igem.org/Team:Imperial_College/Meet_the_Team">Meet Us</a></li>
          
          
             <li><a href="https://2013.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>
             <li><a href="https://2013.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>

Revision as of 22:26, 16 September 2013

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Navigation"