Team:Imperial College/Templates/Navigation

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<style type="text/css">
 +
ul.navigation-menu {
 +
  box-sizing: border-box;
 +
  list-style-type: none;
 +
  width: 975px;
 +
  height: 50px;
 +
  text-align: center;
 +
  display: inline-block;
 +
  margin: 0;
 +
  padding: 0;
 +
  position: relative;
 +
  border-radius: 5px;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  color: #ffffff;
 +
  cursor: pointer;
 +
  /* CSS3 Gradient */
 +
 +
  background: #36a9e1;
 +
}
 +
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 #000;
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
}
 +
ul.navigation-menu > li:first-child {
 +
  border-top-left-radius: 5px;
 +
  border-bottom-left-radius: 5px;
 +
}
 +
ul.navigation-menu > li:last-child {
 +
  border-right: none;
 +
  border-radius: 5px;
 +
}
 +
ul.navigation-menu > li ul {
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
  opacity: 0;
 +
  position: relative;
 +
  z-index: 9999;
 +
  background: #36a9e1;
 +
  list-style-type: none;
 +
  text-align: center;
 +
  padding: 0;
 +
  margin: 0;
 +
  height: 0;
 +
}
 +
ul.navigation-menu > li ul li {
 +
  display: block;
 +
  padding: 0;
 +
  margin: 0;
 +
  height: 50px;
 +
  line-height: 50px;
 +
  border-bottom: 1px solid black;
 +
  height: 0;
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
}
 +
ul.navigation-menu > li ul li:last-child {
 +
  border-bottom: none;
 +
}
 +
ul.navigation-menu > li ul li:hover {
 +
  background-color: #a3c4e9;
 +
}
 +
ul.navigation-menu > li ul li:active {
 +
  background-color: #93b4d9;
 +
}
 +
ul.navigation-menu > li:hover {
 +
  background-color: #a3c4e9;
 +
}
 +
ul.navigation-menu > li:hover ul {
 +
  -webkit-transition: all 400ms ease;
 +
  -moz-transition: all 400ms ease;
 +
  -ms-transition: all 400ms ease;
 +
  -o-transition: all 400ms ease;
 +
  transition: all 400ms ease;
 +
  opacity: 1;
 +
  height: auto;
 +
}
 +
ul.navigation-menu > li:hover ul li {
 +
  height: auto;
 +
}
 +
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>

Revision as of 21:38, 19 August 2013

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