Difference between revisions of "Team:IIT Delhi/team2"

 
(12 intermediate revisions by the same user not shown)
Line 28: Line 28:
 
   background-size:100% 100%;
 
   background-size:100% 100%;
 
}
 
}
 +
  
 
.icons{
 
.icons{
 
   position:absolute;
 
   position:absolute;
−
  width:6%;
 
 
   margin-top:2%;
 
   margin-top:2%;
 +
  width:6%;
 
   -webkit-transition: all 1s ease;
 
   -webkit-transition: all 1s ease;
 
   -moz-transition: all 1s ease;
 
   -moz-transition: all 1s ease;
 
   -o-transition: all 1s ease;
 
   -o-transition: all 1s ease;
−
   transition all 1s ease:
+
   transition all 1s ease;
 
}
 
}
 
.iconActive{
 
.iconActive{
−
   width:10%;
+
   width:12%;
 +
  z-index:1;
 +
  opacity:4;
 
}
 
}
 +
 
#IITDigem_logo{
 
#IITDigem_logo{
 
   position:absolute;
 
   position:absolute;
−
   margin-top:2%;
+
   margin-top:1%;
−
   margin-left:1.5%;
+
   margin-left:2%;
−
   width:15%;
+
   width:17%;
 
    
 
    
 
}
 
}
 +
#tour{
 +
  position:absolute;
 +
  margin-top:2%;
 +
  margin-left:80%;
 +
}
 +
#leftNav{
 +
  border:solid 2px green;
 +
  width:17%;
 +
  height:700px;
 +
  float:left;
 +
  margin-top:12%
 +
}
 +
#wikicontent{
 +
  border:solid 2px red;
 +
  background:#fff;
 +
  opacity:0.2;
 +
  height:700px;
 +
  width:80%;
 +
  position:absolute;
 +
  margin-left:18%;
 +
  margin-top:12%;
 +
}
 +
.smenu{
 +
  color:white;
 +
  display:none;
 +
  position:absolute;
 +
  margin-left:4% !important;
 +
  margin-top:3% !important;
 +
  z-index:2;
 +
  list-style-type:none !important;
 +
}
 +
 
</style> <!-- End of CSS -->
 
</style> <!-- End of CSS -->
 
<body>
 
<body>
 
   <img id="IITDigem_logo"  src="https://static.igem.org/mediawiki/2015/f/ff/IITDigem_logo.png">
 
   <img id="IITDigem_logo"  src="https://static.igem.org/mediawiki/2015/f/ff/IITDigem_logo.png">
 
   <nav>
 
   <nav>
−
     <img class="icons" id="icon1" style="margin-left:17%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
     <div class="iconsDiv" style="margin-left:22%;">
−
    <img class="icons" id="icon2" style="margin-left:26%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <img class="icons" id="icon1" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
  
−
    <img class="icons" id="icon3" style="margin-left:35%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <ul class="smenu">
−
     <img class="icons" id="icon4" style="margin-left:44%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
     </div>
  
−
     <img class="icons" id="icon5" style="margin-left:53%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
     <div class="iconsDiv" style="margin-left:29%;">
−
    <img class="icons" id="icon6" style="margin-left:62%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <img class="icons" id="icon2" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
  
−
     <img class="icons" id="icon7" style="margin-left:71%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <ul class="smenu">
−
     <img class="icons" id="icon8" style="margin-left:80%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
+
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
     </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:36%;">
 +
      <img class="icons" id="icon3" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
    </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:43%;">
 +
      <img class="icons" id="icon4" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
     </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:50%;">
 +
      <img class="icons" id="icon5" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
    </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:57%;">
 +
      <img class="icons" id="icon6" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
    </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:64%;">
 +
      <img class="icons" id="icon7" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
    </div>
 +
 
 +
    <div class="iconsDiv" style="margin-left:71%;">
 +
      <img class="icons" id="icon8" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png">
 +
 
 +
      <ul class="smenu">
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      <li>Menu1</li>
 +
      </ul>
 +
    </div>
 
   </nav>
 
   </nav>
−
           
+
 
 +
  <div id="tour">
 +
    <img src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png">
 +
  </div>
 +
       
 +
 
 +
 
 +
  <div id="wiki">
 +
    <div id="leftNav">
 +
      <h1 style="color:white;">This is left Nav</h1>
 +
    </div>
 +
 
 +
    <div id="wikicontent">
 +
      <h1>This is content</h1>
 +
    </div>
 +
  </div>
 +
 
 
   <script>
 
   <script>
 
     $(document).ready(function(){
 
     $(document).ready(function(){
−
       $(".icons").hover(
+
       $(".iconsDiv").hover(
 
         function(){
 
         function(){
−
           $(this).addClass("iconActive");
+
           $(this).css("background-color","black");
 +
          $(this).css("z-index","3");
 +
          $(this).children(".icons").addClass("iconActive");
 +
          $(this).children("ul").css("display","block");
 
         },
 
         },
 
         function(){
 
         function(){
−
           $(this).removeClass("iconActive");
+
           $(this).css("background-color","transparent");
 +
          $(this).css("z-index","0");
 +
          $(this).children(".icons").removeClass("iconActive");
 +
          $(this).children("ul").css("display","none");         
 
         }
 
         }
 
       );
 
       );

Latest revision as of 20:51, 11 September 2015

This is left Nav

This is content