Team:UT-Tokyo/Testing

From 2011.igem.org

(Difference between revisions)
m
Line 1: Line 1:
<html>
<html>
-
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:500,700' rel='stylesheet' type='text/css'>
<style type="text/css">
<style type="text/css">
Line 9: Line 9:
   background-color: #383838;
   background-color: #383838;
   width: 900px;
   width: 900px;
 +
  border-style: none;
   color: #cccccc;
   color: #cccccc;
   font: 14px/30px "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   font: 14px/30px "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
Line 23: Line 24:
#bodyContent h2 {
#bodyContent h2 {
   color: #96e036;
   color: #96e036;
-
   font: 700 24px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+
   font: 700 28px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
   margin-top: 26px;
   margin-top: 26px;
   margin-bottom: 10px;
   margin-bottom: 10px;
Line 29: Line 30:
#bodyContent p {
#bodyContent p {
   margin-bottom: 10px;
   margin-bottom: 10px;
 +
}
 +
#contentSub {
 +
  display: none;
}
}
#footer-box {
#footer-box {
-
   width: 900px;
+
   width: 888px;
}
}
#catlinks {
#catlinks {
Line 49: Line 53:
   width: 900px;
   width: 900px;
}
}
-
 
#navi #menu {
#navi #menu {
Line 62: Line 65:
}
}
 +
#navi #menu #hauptMenu {
 +
/* background: #333 url(gradation.png) no-repeat scroll left top;*/
 +
background-image: url(http://igem-ut.net/2011/gradation.png);
 +
background-repeat: repeat-y;
 +
width: 200px;
 +
height: 160px;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
#navi #menu #projectMenu {
 +
  width: 300px;
 +
  height: 120px;
 +
  position: absolute;
 +
  top: 20px;
 +
  left: 180px;
 +
  background-image: url(http://igem-ut.net/2011/projectMenuBg.png);
 +
  background-repeat: no-repeat;
 +
  display: none;
 +
}
 +
 +
#navi #menu #projectMenu #projectMenu1 {
 +
  position: absolute;
 +
  top: 6px;
 +
  left: 10px;
 +
}
 +
#navi #menu #projectMenu #projectMenu2 {
 +
  position: absolute;
 +
  top: 6px;
 +
  left: 140px;
 +
}
 +
 +
#navi #menu ul {
 +
  margin: 0;
 +
}
#navi #menu ul li {
#navi #menu ul li {
-
   font: 400 18px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+
   font: 500 18px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
   color: #fff;
   color: #fff;
   list-style: none;
   list-style: none;
   display: block;
   display: block;
-
   width: 200px;
+
   width: 160px;
   height: 20px;
   height: 20px;
-
   background-color: rgba(20,20,20,0.6);
+
   padding-left: 14px;
 +
  margin: 0;
 +
  padding-bottom: 3px;
 +
  cursor: pointer;
 +
}
 +
 
 +
#navi #menu #projectMenu ul li {
 +
  padding-bottom: 7px;
 +
  width: 120px;
}
}
   
   
Line 75: Line 121:
.nivoSlider {
.nivoSlider {
   position: relative;
   position: relative;
 +
  height: 160px;
 +
  width: 900px;
}
}
.nivoSlider img {
.nivoSlider img {
Line 106: Line 154:
z-index:5;
z-index:5;
}
}
 +
</style>
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
Line 118: Line 167:
     controlNav: false,
     controlNav: false,
     manualAdvance: true,
     manualAdvance: true,
-
     animSpeed: 300,
+
     animSpeed: 200,
   });
   });
-
   $('#navi #menu ul li').each(function(idx) {
+
  $('#slider').nivoToggle(0);
 +
 
 +
   $('#navi #menu #hauptMenu ul li').each(function(idx) {
     $(this).mouseenter(function() {
     $(this).mouseenter(function() {
 +
      if (idx == 2) {
 +
        $('#projectMenu').fadeIn(200);
 +
      } else {
 +
        $('#projectMenu').fadeOut(200);
 +
      }
 +
      $('#navi #menu ul li').css('background-image', 'none');
 +
      $(this).css('background-image', 'url(http://igem-ut.net/2011/trans.png)');
 +
      //$(this).css('background-color', 'black');
       $('#slider').nivoToggle(idx, function() {
       $('#slider').nivoToggle(idx, function() {
-
         $(this).css('background-color', 'rgba(0,0,0,1)');
+
      console.log(idx);
 +
         $(this).css('background-color', 'black');
       });
       });
     });
     });
Line 133: Line 193:
</script>
</script>
<div id="header">
<div id="header">
-
   <h1>Testing</h1>
+
   <h1 id="pageTitle">Project</h1>
 +
  <div id="headerLogo">
 +
  <img src="" alt="" />
 +
  <h1>iGEM UT-Tokyo</h1>
 +
  </div>
</div>
</div>
<div id="navi">
<div id="navi">
Line 147: Line 211:
     </div>
     </div>
     <div id="menu">
     <div id="menu">
 +
    <div id="hauptMenu">
     <ul>
     <ul>
       <li>Top</li>
       <li>Top</li>
Line 157: Line 222:
     </ul>
     </ul>
     </div>
     </div>
-
</div>  
+
    <div id="projectMenu">
 +
    <ul id="projectMenu1">
 +
    <li>Background</li>
 +
    <li>Introduction</li>
 +
    <li>Concepts</li>
 +
    <li>Method</li>
 +
    </ul>
 +
    <ul id="projectMenu2">
 +
    <li>Achievement</li>
 +
    <li>Results</li>
 +
    <li>Discussion</li>
 +
    <li>Modeling</li>
 +
    </ul>
 +
    </div>
 +
    </div>
 +
</div>
</div>
</div>
<div id="pageContent">
<div id="pageContent">

Revision as of 21:51, 15 August 2011

Duis Aliquet Egestas Purus

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut.

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper.

Donec Congue Lacinia

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas.