Biomod/2012/Tianjin/Template/indexmenu: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 120: Line 120:
         </a>
         </a>
         </li>
         </li>
         <li id="tianjin-index-protocol"><a href="#">Results
         <li id="tianjin-index-protocol"><a href="#">Experiments and Results
             <span class="tianjin-description">
             <span class="tianjin-description">
                 xxx
                 xxx

Revision as of 09:04, 25 October 2012

<html> <style> /* index leftmenu css */

  1. tianjin-index {
   float: left;
   width: 220px;
   margin-right: 20px;

}

  1. tianjin-index ul{
   margin: 0;
   padding: 0 1em;

}

  1. tianjin-index ul li{
   list-style: none;
   margin: 0 0 1em 0;

}

  1. tianjin-index ul li .tianjin-description{
   font-size: small;
   color: #8a8a8a;

}

  1. tianjin-index-menu{
   margin: 0 0 30px 0 !important;
   padding: 0 !important;
   border: 1px solid #ababab;
   -webkit-border-top-right-radius: 12px;
   -moz-border-radius-topright: 12px;
   border-top-right-radius: 12px;
   -webkit-border-bottom-right-radius: 12px;
   -moz-border-radius-bottomright: 12px;
   border-bottom-right-radius: 12px;

}

  1. tianjin-index-menu li{
   list-style: none;
   margin: 0 !important;
   padding: 0 !important;
   background: -moz-radial-gradient(center 80px 45deg, circle cover, hsl(0, 0%, 100%) 0%, hsl(240, 5%, 70%) 100%);
   overflow: hidden;
   text-shadow: 0 1px 1px hsl(240, 10%, 80%);

}

  1. tianjin-index-menu li:first-child{
   -webkit-border-top-right-radius: 12px;
   -moz-border-radius-topright: 12px;
   border-top-right-radius: 12px;

}

  1. tianjin-index-menu li:last-child{
   -webkit-border-bottom-right-radius: 12px;
   -moz-border-radius-bottomright: 12px;
   border-bottom-right-radius: 12px;

}

  1. tianjin-index-menu li a{
   display: block;
   padding: 10px 20px;
   border-bottom: none;
   color: #3b3b3b;
   transition: background 0.5s ease-in-out;
   -moz-transition-property: background;
   -moz-transition-duration: 700ms;
   background: #e4e4e4;
   border-bottom: 1px solid #dedede;
   border-top: 1px solid #f7f7f7;

}

  1. tianjin-index-menu li a{

}

  1. tianjin-index-menu li a:hover{
   background: transparent none;

}

  1. tianjin-index-menu li a .tianjin-description{
   display: block;
   margin-left: 40px;

}

  1. tianjin-index-menu li a:before{
   display: block;
   float: left;
   content: "";
   width: 30px; height: 30px;
   margin: 5px 10px 0 0;
   background: url(http://2011.igem.org/wiki/images/4/4b/Hokkaidou_menu.png) no-repeat;

}

  1. tianjin-index-menu li#tianjin-index-project a:before{ background-position: 0 -30px; }
  2. tianjin-index-menu li#tianjin-index-protocol a:before{ background-position: 0 -60px; }
  3. tianjin-index-menu li#tianjin-index-parts a:before{ background-position: 0 -90px; }
  4. tianjin-index-menu li#tianjin-index-notebook a:before{ background-position: 0 -120px; }
  5. tianjin-index-menu li#tianjin-index-safety a:before{ background-position: 0 -150px; }
  6. tianjin-index-menu li#tianjin-index-humanpractice a:before{ background-position: 0 -180px; }
  7. tianjin-index-menu li#tianjin-index-team a:before{ background-position: 0 -210px; }
  1. tianjin-index-menu li#tianjin-index-project a:hover:before{ background-position: -30px -30px; }
  2. tianjin-index-menu li#tianjin-index-protocol a:hover:before{ background-position: -30px -60px; }
  3. tianjin-index-menu li#tianjin-index-parts a:hover:before{ background-position: -30px -90px; }
  4. tianjin-index-menu li#tianjin-index-notebook a:hover:before{ background-position: -30px -120px; }
  5. tianjin-index-menu li#tianjin-index-safety a:hover:before{ background-position: -30px -150px; }
  6. tianjin-index-menu li#tianjin-index-humanpractice a:hover:before{ background-position: -30px -180px; }
  7. tianjin-index-menu li#tianjin-index-team a:hover:before{ background-position: -30px -210px; }

</style>


  • <a href="#">Home xxx </a>
  • <a href="#">Team xxx </a>
  • <a href="#">Designs xxx </a>
  • <a href="#">Experiments and Results xxx </a>
  • <a href="#">Protocol xxx </a>
  • <a href="#">Attribution xxx </a>

<script src="http://itra.jp/jquery_socialbutton_plugin/js/jquery.socialbutton-1.8.1.js" type="text/javascript"></script>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2012/Tianjin/Template/indexmenu&oldid=641682"