Template:WashU/Layout

From 2014.igem.org

(Difference between revisions)
(CSS)
(Drop Menu)
Line 1: Line 1:
-
@charset 'UTF-8';
+
<!-- Thanks to 2013 Team Tokyo for drop down menu template https://2013.igem.org/Template:Team:TMU-Tokyo/drop-menu.css -->
-
#cssmenu {
+
 
-
   border: none;
+
<html>
-
   border: 0px;
+
<style>
-
   margin: 0px;
+
#dropmenu {
 +
   list-style: none;
 +
   align: left ;
 +
   width: 1360px;
 +
  height: 40px;
 +
  margin: 30px 
   padding: 0px;
   padding: 0px;
-
   font-family: verdana, geneva, arial, helvetica, sans-serif;
+
   background: #DC143C;
-
   font-size: 14px;
+
    
-
   font-weight: bold;
+
　
-
  color: #8e8e8e;
+
   border-radius: 3px 3px 0 0;
-
  width: auto;
+
}
}
-
#cssmenu > ul {
+
#dropmenu li {
-
   margin-top: 6px !important;
+
   position: relative;
-
}
+
   width: 137px;
-
#cssmenu ul {
+
   float: left;
-
  background: #CDCDCD;
+
   margin: 0px;
-
  background: -webkit-linear-gradient(#cdcdcd 0%, #e2e2e2 80%, #cdcdcd 100%);
+
-
  background: linear-gradient(#cdcdcd 0%, #e2e2e2 80%, #cdcdcd 100%);
+
-
  border-top: 1px solid #A8A8A8;
+
-
  -webkit-box-shadow: inset 0 1px 0 #e9e9e9, 0 1px 0 #03a66a, 0 2px 0 #1cb67d, 0 8px 0 #03a66a, 0 9px 0 #02794d, 0 -1px 1px rgba(0, 0, 0, 0.1);
+
-
  -moz-box-shadow: inset 0 1px 0 #e9e9e9, 0 1px 0 #03a66a, 0 2px 0 #1cb67d, 0 8px 0 #03a66a, 0 9px 0 #02794d, 0 -1px 1px rgba(0, 0, 0, 0.1);
+
-
  box-shadow: inset 0 1px 0 #e9e9e9, 0 1px 0 #03a66a, 0 2px 0 #1cb67d, 0 8px 0 #03a66a, 0 9px 0 #02794d, 0 -1px 1px rgba(0, 0, 0, 0.1);
+
-
   height: 27px;
+
-
   list-style: none;
+
-
   margin: 0;
+
   padding: 0;
   padding: 0;
 +
  text-align: center;
 +
  border-right: 1px solid  #fff;
 +
  　
}
}
-
#cssmenu ul ul {
+
 
-
   border-top: 6px solid #03a66a;
+
-
   -webkit-box-shadow: none;
+
 
-
   -moz-box-shadow: none;
+
#dropmenu #leftblock{
-
   box-shadow: none;
+
   width: 200px ;
 +
   height: 40px;
 +
   margin: 0px 
 +
  padding: 0px;
 +
   border-right: 1px solid  #fff;
}
}
-
#cssmenu ul ul a {
+
  #dropmenu #rightblock{
-
   line-height: 43px;
+
   width: 200px ;
-
}
+
   height: 40px;
-
#cssmenu ul ul ul {
+
   margin: 0px 
-
   left: 100%;
+
   padding: 0px;
-
   top: 0;
+
   border-right: none ;}
-
}
+
 
-
#cssmenu li {
+
 
-
   float: left;
+
#dropmenu li a {
-
   padding: 0px 8px 0px 8px;
+
-
}
+
-
#cssmenu li a {
+
-
  color: #666666;
+
   display: block;
   display: block;
-
   font-weight: bold;
+
  margin: 0;
-
   line-height: 30px;
+
  padding: 15px 0 11px;
-
   padding: 0px 25px;
+
  color: #000;
-
   text-align: center;
+
   font-family: "calibri",sans-serif ;
 +
   font-size: 18px;
 +
   font-weight: bold ;
 +
   line-height: 0.8;
   text-decoration: none;
   text-decoration: none;
}
}
-
#cssmenu li a:hover {
+
#dropmenu li:hover > a{
-
   color: #000000;
+
   background: #F08080;
-
   text-decoration: none;
+
   color:#00000;
}
}
-
#cssmenu li ul {
+
#dropmenu > li:hover > a{
-
  background: #e0e0e0;
+
   border-radius: 3px 3px 0 0;
-
   border-left: 2px solid #03a66a;
+
}
-
  border-right: 2px solid #03a66a;
+
#dropmenu li ul {
-
  border-bottom: 2px solid #03a66a;
+
-
  display: none;
+
-
  height: auto;
+
-
  filter: alpha(opacity=95);
+
-
  opacity: 0.95;
+
   position: absolute;
   position: absolute;
-
   width: 225px;
+
   top: 100%;
-
   z-index: 200;
+
   left: 0;
-
   /*top:1em;
+
  list-style: none;
-
/*left:0;*/
+
   margin: 0;
 +
  border-radius: 0 0 3px 3px;
 +
}
 +
 +
#dropmenu li ul li{
 +
  overflow: hidden;
 +
  width: 150%;
 +
  height: 0px;
 +
  color: #000000;
 +
  -moz-transition: .2s;
 +
  -webkit-transition: .2s;
 +
  -o-transition: .2s;
 +
  -ms-transition: .2s;
 +
  transition: .2s;
}
}
-
#cssmenu li:hover > ul {
+
#dropmenu li ul li a{
-
   display: block;
+
   padding: 13px 15px;
 +
  background: #F08080;
 +
  text-align: center;
 +
　font-size: 10px;
 +
  font-weight: normal;
 +
　
}
}
-
#cssmenu li li {
+
 
-
   display: block;
+
 
-
   float: none;
+
 
-
   padding: 0px;
+
#dropmenu li:hover ul li{
-
   position: relative;
+
   overflow: visible;
-
  width: 225px;
+
   height: 40px;
 +
   border-top: 0px solid #F08080;
 +
   border-bottom: 0px solid #F08080;
}
}
-
#cssmenu li ul a {
+
 
-
   display: block;
+
#dropmenu li:hover ul li:hover a{
-
  font-size: 12px;
+
   background: #DC143C;;
-
   font-style: normal;
+
   color:#00000
-
  padding: 0px 10px 0px 15px;
+
-
  text-align: left;
+
}
}
-
#cssmenu li ul a:hover {
+
 
-
   background: #949494;
+
#dropmenu li:hover ul li:first-child{
-
  color: #000000;
+
   border-top: 0;
-
  opacity: 1.0;
+
-
  filter: alpha(opacity=100);
+
}
}
-
#cssmenu p {
+
#dropmenu li:hover ul li:last-child{
-
   clear: left;
+
   border-bottom: 0;
}
}
-
#cssmenu .active > a {
+
#dropmenu li:hover ul li:last-child a{
-
  background: #03a66a;
+
   border-radius: 0 0 3px 3px;
-
  -webkit-box-shadow: 0 -4px 0 #03a66a, 0 -5px 0 #1cb67d, 0 -6px 0 #03a66a;
+
-
   -moz-box-shadow: 0 -4px 0 #03a66a, 0 -5px 0 #1cb67d, 0 -6px 0 #03a66a;
+
-
  box-shadow: 0 -4px 0 #03a66a, 0 -5px 0 #1cb67d, 0 -6px 0 #03a66a;
+
-
  color: #ffffff;
+
-
}
+
-
#cssmenu .active > a:hover {
+
-
  color: white;
+
}
}
 +
 +
    </style>
 +
</html>
 +
 +
<html>
 +
<div id="content">
 +
<ul id="dropmenu">
 +
  <li id="leftblock">
 +
    <p><Br></p>
 +
  </li>
 +
  <li><a href=https://2014.igem.org/Team:WashU_StLouis">Home</a>
 +
    </li>
 +
 +
  <li><a href="https://2014.igem.org/Team:WashU_StLouis/Team">Team</a>
 +
    <ul>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Team/Members">Members</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Team/Advisors">Advisors</a></li>
 +
      <li><a href="https://igem.org/Team.cgi?year=2014&team_name=WashU_StLouis"">Team Page</a></li>
 +
    </ul>
 +
  </li>
 +
 +
  <li><a href="https://2014.igem.org/Team:WashU_StLouis/Project">Project</a>
 +
    <ul>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Project/nif">Nitrogenase</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Project/light">Light Regulation</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Parts">Parts</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Modeling">Modeling</a></li>
 +
    </ul>
 +
  </li>
 +
 +
  <li><a href="https://2014.igem.org/Team:WashU_StLouis/Notebook">Notebook</a>
 +
    <ul>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Protocol">Protocol</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Notebook_experiment">Experiment</a></li>
 +
    </ul>
 +
  </li>
 +
 +
  <li><a href="https://2014.igem.org/Team:WashU_StLouis/Outreach">Outreach</a>
 +
    <ul>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Safety">Lab safety</a></li>
 +
      <li><a href="https://2014.igem.org/Team:WashU_StLouis/Attributions">Attributions</a></li>
 +
    </ul>     
 +
  </li>
 +
<li id="rightblock">
 +
    <p><Br></p>
 +
  </li>
 +
 +
</div>
 +
 +
</html>

Revision as of 19:49, 26 June 2014


Retrieved from "http://2014.igem.org/Template:WashU/Layout"