Team:Imperial College/Templates/Navigation

From 2013.igem.org

(Difference between revisions)
 
(98 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<!-- The following style was written in Less, and then compiled to CSS -->
+
<!-- navigation START -->
-
<!-- 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 class="navigation-menu" style="">
-
}
+
         <li><a href="https://2013.igem.org/Team:Imperial_College">Project: Plasticity</a>
-
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">
+
-
         <li><a href="https://2013.igem.org/Team:Imperial_College">Plasticity</a>
+
           <ul>
           <ul>
 +
            <li><a href="https://2013.igem.org/wiki/index.php?title=Team:Imperial_College/tour">At a glance</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Imperial_College/Background">Waste Issue</a>
 +
            <!-- <ul>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Background/The_Waste_Issue">The Waste Issue</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Background/Environmentally_Friendly_Bioplastics">Friendly bioplastics</a></li>
 +
              </ul> -->
 +
            </li>
              
              
-
             <li><a href="#">Background</a>
+
             <li>M.A.P.L.E. Modules</a>
               <ul>
               <ul>
-
                <li><a href="https://2013.igem.org/Team:Imperial_College/The_Waste_Issue">The Waste Issue</a></li>
+
<li><a href="https://2013.igem.org/Team:Imperial_College/Waste_Degradation:_SRF">M1: Resource-full Waste</a></li>
-
                <li><a href="https://2013.igem.org/Team:Imperial_College/Bioplastics">Bioplastics</a></li>
+
<li><a href="https://2013.igem.org/Team:Imperial_College/BioPlastic_Recycling:_PHB">M2: Plastic Fantastic</a></li>
 +
 
               </ul>
               </ul>
-
            </li>
+
<li><a href="https://2013.igem.org/Team:Imperial_College/Applications">Bioplastic applications</a></li>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Overview">Overview</a></li>
+
-
            <li><a href="#">Modules</a>
+
-
              <ul>
+
-
                <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>
+
-
              </ul>
+
-
            </li>
+
           </ul>
           </ul>
         </li>
         </li>
-
        <li><a href="https://2013.igem.org/Team:Imperial_College/Human_practices">Human Practices</a>
+
<li>Human Practices</a>
           <ul>
           <ul>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Project_Evolution">Project Evolution</a></li>
 
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Managing Waste">Managing Waste</a></li>
 
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Communication_work">Communication Work</a></li>
 
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Industrial_Implementation">Industrial Implementation</a></li>
 
             <li class="maple"><a href="https://2013.igem.org/Team:Imperial_College/MAPLE">M.A.P.L.E</a></li>
             <li class="maple"><a href="https://2013.igem.org/Team:Imperial_College/MAPLE">M.A.P.L.E</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Industrial_Implementation">Industrial Implementation</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Imperial_College/Managing Waste">Social Challenge</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Imperial_College/Communication_work">Communicating our Project</a></li>
 +
           
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Project_Evolution">Project Evolution</a></li>
           </ul>
           </ul>
         </li>
         </li>
-
        <li><a href="https://2013.igem.org/Team:Imperial_College/In_the_Lab">In the Lab</a>
+
<li>Achievements</a>
           <ul>
           <ul>
-
             <li><a href="https://2013.igem.org/Team:Imperial_College/Protocols">Protocols</a></li>
+
             <li><a href="https://2013.igem.org/Team:Imperial_College/Judging_Criteria">Judging Criteria</a></li>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/MSDS">Safety</a></li>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/mainresults">Main Results</a></li>
-
          </ul>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/Collaboration">Collaborations</a></li>
-
        </li>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/Biobricks">Biobricks</a></li>
-
        <li><a href="https://2013.igem.org/Team:Imperial_College/Achievement">Achievements</a>
+
          </ul>       
 +
 
 +
<li>In the Lab</a>
           <ul>
           <ul>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Judging_Criteria">Judging Criteria</a></li>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/MSDS">Safety</a></li>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/CBioBricker">BioBricks</a></li>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/labbook">Lab book</a></li>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/data">Data</a></li>
+
          <li><a href="#">Modelling Notes</a>
-
            <li><a href="https://2013.igem.org/Team:Imperial_College/Collaboration">Collaborations</a></li>
+
          <ul>
-
           </ul>
+
          <li><a href="https://2013.igem.org/Team:Imperial_College/Modelling_Intro">Introduction</a></li>
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/Modelling_beta-amyloid">Beta amyloid degradation</a></li>
 +
          </ul>
 +
           <li><a href="#">Data</a>
 +
          <ul>
 +
         
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/Growth_Assays">Growth Assays</a></li>
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/Western Blots">Western Blot</a></li>
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/Enzyme Kinetics">Enzyme Kinetics</a></li>
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/PHB production">PHB production</a></li>
 +
<li><a href="https://2013.igem.org/Team:Imperial_College/3HB_assay">3HB assay</a></li>
 +
<li><a href="https://2013.igem.org/wiki/index.php?title=Team:Imperial_College/Clearing_Zone_Assay">Clearing Assays</a></li>
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/Electron microscopy">Electron microscopy</a></li>
 +
          </ul>         
 +
          <li><a href="https://2013.igem.org/Team:Imperial_College/Protocols">Protocols</a></li>
 +
      </ul>
 +
       
         </li>
         </li>
-
         <li><a href="https://2013.igem.org/Team:Imperial_College/Our_Beautiful_Faces">Team</a>
+
         <li>Team</a>
           <ul>
           <ul>
-
             <li><a href="https://2013.igem.org/Team:Imperial_College/Diary">Diary</a></li>
+
           
 +
             <li><a href="https://2013.igem.org/Team:Imperial_College/Meet_the_Team">Students</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Imperial_College/Advisors">Advisors</a></li>
 +
            <li><a href="https://2013.igem.org/Team:Imperial_College/Sponsors">Sponsors</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>
           </ul>
           </ul>
         </li>
         </li>
       </ul>
       </ul>
 +
 +
 +
<!-- navigation END -->
</html>
</html>

Latest revision as of 11:07, 27 October 2013

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