Difference between revisions of "Team:IIT Delhi"

 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{:Team:IIT_Delhi/header}}
+
{{Template_All_Teams}}
<html lang="en">
+
  
<head>
+
<html>
  
    <meta charset="utf-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <meta name="description" content="">
 
    <meta name="author" content="">
 
  
    <title>iGEM -IITD</title>
+
<style>
  
    <!-- Bootstrap Core CSS -->
 
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
  
    <!-- Custom CSS -->
 
    <link href="css/grayscale.css" rel="stylesheet">
 
  
    <!-- Custom Fonts -->
 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
    <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
 
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
 
  
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
  
 
 
</head>
 
  
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
 
  
    <!-- Navigation -->
 
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
 
        <div class="container">
 
            <div class="navbar-header">
 
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
 
                    <i class="fa fa-bars"></i>
 
                </button>
 
             
 
            </div>
 
  
            <!-- Collect the nav links, forms, and other content for toggling -->
+
#tourimg{
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
+
  display:none;
                <ul class="nav navbar-nav">
+
  width:300px;
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
+
  height:80px;
                    <li class="hidden">
+
  margin-top:2%;
                        <a href="#page-top"></a>
+
  margin-left:82.5%;
                    </li>
+
  position:absolute;
<li>
+
  z-index:9999;
                        <a class="page-scroll" href="welcome.html">Welcome</a>
+
}
                    </li>
+
<li>
+
                        <a class="page-scroll" href="index.html">Home</a>
+
                    </li>
+
                    <li>
+
                        <a class="page-scroll" href="Project.html">Project</a>
+
                    </li>
+
                    <li>
+
                        <a class="page-scroll" href="modelling.html">Modelling</a>
+
                    </li>
+
                    <li>
+
                        <a class="page-scroll" href="team.html">Team</a>
+
                    </li>
+
<li>
+
                        <a class="page-scroll" href="notebook.html">Notebook</a>
+
                    </li>
+
<li>
+
                        <a class="page-scroll" href="attributions.html">Attributions</a>
+
                    </li>
+
<li>
+
                        <a class="page-scroll" href="safety.html">Safety</a>
+
                    </li>
+
<li>
+
                        <a class="page-scroll" href="parts.html">Parts</a>
+
                    </li>
+
<li>
+
                        <a class="page-scroll" href="achievements.html">Achievements</a>
+
                    </li>
+
+
                </ul>
+
            </div>
+
            <!-- /.navbar-collapse -->
+
        </div>
+
        <!-- /.container -->
+
    </nav>
+
  
+
#spanimg{
 +
  position:fixed;
 +
  margin-top:0%;
 +
  margin-left:-1%;
 +
  height:150px;
 +
  width:150px;
 +
  opacity:1;
 +
  z-index:999;
 +
}
 +
ul.ldd_menu a{
 +
  text-decoration:none;
 +
}
 +
ul.ldd_menu > li{
 +
 +
  position:fixed;
 +
  margin-left:-2%;
 +
  width:150px;
 +
  z-index: 9999;
 +
  height:150px;
 +
  border-radius:0 0 190px 0;
 +
  transition-delay: 300ms;
  
+
}
    <!-- Intro Header -->
+
    <header class="intro">
+
        <div class="intro-body">
+
            <div class="container">
+
                <div class="row">
+
                    <div class="col-md-8 col-md-offset-2">
+
                        <h1 class="brand-heading">iGEM IIT Delhi</h1>
+
                        <p class="intro-text">Tagline1<br>Tagline2</p>
+
                        <a href="#about" class="btn btn-circle page-scroll">
+
                            <i class="fa fa-angle-double-down animated"></i>
+
                        </a>
+
                    </div>
+
                </div>
+
            </div>
+
        </div>
+
    </header>
+
  
    <!-- About Section -->
+
ul.ldd_menu > li:hover{
    <section id="about" class="container content-section text-center">
+
  width:100%;
        <div class="row">
+
    transition-delay: 0ms;
            <div class="col-lg-8 col-lg-offset-2">
+
                <h2>Our Aim</h2>
+
                <p>We aim to genetically engineer  bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of  chimneys of various industries and car exhausts into harmless byproducts.</p>
+
                <p>We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would 
+
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.</p>
+
               
+
            </div>
+
        </div>
+
    </section>
+
  
    <!-- Story Section -->
+
}
    <section id="download" class="content-section text-center">
+
.ldd_submenu ul{
        <div class="download-section">
+
  margin-left:4%;
            <div class="container">
+
}
                <div class="col-lg-8 col-lg-offset-2">
+
.ldd_submenu ul li{
                    <video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;">
+
  padding-bottom:3%;
              <source  style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4">
+
}
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a>
+
ul.ldd_menu > li > span{
        </video>
+
  float:right;
            </div>
+
  z-index:-1000;
        </div>
+
  position:absolute;
    </section>
+
  margin-left:0%;
 +
  width:0%;
 +
  height:100%;
 +
  font-size:100%;
 +
  color:green;
 +
  opacity:0;
 +
  background-color:white;
 +
  height:100%;   
 +
  line-height:100%;
 +
  cursor:default;
 +
  padding:0px 20px;
 +
  border-radius:0 0 190px 0;
 +
  text-shadow:0px 0px 1px #CCC;
  
    <!-- Contact Section -->
+
}
    <section id="contact" class="container content-section text-center">
+
        <div class="row">
+
            <div class="col-lg-8 col-lg-offset-2">
+
                <h2>Contact Us</h2>
+
                <p>We won a Bronze Medal at the iGEM Giant Jamboree 2014</p>
+
                <p><a href="mailto:email_id@gmail.com">email_id@gmail.com</a>
+
                </p>
+
                <ul class="list-inline banner-social-buttons">
+
                    <li>
+
                        <a href="https://twitter.com/iGEM_IIT_Delhi" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
+
                    </li>
+
                    <li>
+
                        <a href="https://www.facebook.com/igemiitdelhi" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
+
                    </li>
+
                    <li>
+
                        <a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" class="btn btn-default btn-lg"><i class="fa fa-youtube fa-fw"></i> <span class="network-name">Youtube</span></a>
+
                    </li>
+
                </ul>
+
            </div>
+
        </div>
+
    </section>
+
  
    <!-- Sponsors Section -->
 
   
 
<div class="sponsorsbg">
 
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div>
 
<div class="sponsors_iitd">
 
  
<div class="sponsors_iitd2">
+
.sub_wrap{
<div class="pic1">
+
width: 2500px;
 +
margin: 0 auto 0 auto;
 +
background-color: #000;
 +
}
  
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek">
+
ul.ldd_menu ul{
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek">
+
list-style:none;
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek">
+
display: inline-block;
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek">
+
border-left:1px dotted #FFF;
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek">
+
padding-top: 10px;
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek">
+
padding-right: 5px;
</div>
+
padding-bottom: 10px;
 +
padding-left: 10px;
 +
}
  
 +
ul.ldd_menu .ldd_submenu{
 +
position:absolute;
 +
top:50px;
 +
width:100%;
 +
display:none;
 +
opacity:0.90;
 +
font-size:10px;
 +
background-color: #fff;
 +
}
 +
a.ldd_subfoot{
 +
background-color:#f0f0f0;
 +
color:#444;
 +
display:block;
 +
clear:both;
 +
padding:15px 20px;
 +
font-family: Arial, serif;
 +
font-size:10px;
 +
text-shadow:0px 0px 1px #fff;
 +
-moz-box-shadow:0px 0px 2px #777 inset;
 +
-webkit-box-shadow:0px 0px 2px #777 inset;
 +
-box-shadow:0px 0px 2px #777 inset;
 +
}
  
 +
ul.ldd_menu ul li a{
 +
font-family: Arial, serif;
 +
font-size:12px;
 +
line-height:20px;
 +
color:#000;
 +
padding:1px 3px;
 +
}
 +
ul.ldd_menu ul li a:hover{
 +
background:#FF3300;
 +
}
  
 +
li.ldd_heading a{
 +
  color:#fff !imporatant;
 +
}
 +
li.ldd_heading{
 +
  border:solid 1px black;
 +
  border-radius:5px 0 8px 0;
 +
  background-color:#0F93FC;
 +
  font-family: Georgia, serif;
 +
  color:white !important;
 +
  margin-bottom:5px;
 +
font-size: 13px;
 +
font-style: italic;
 +
color:#FF3300;
 +
text-shadow:0px 0px 1px #B03E23;
 +
padding:5px 0px 5px 0px;
 +
}
  
</div>
 
</div>
 
  
</div><!--sponsor ends-->
 
 
  
    <!-- Footer -->
 
    <footer>
 
        <div class="container text-center">
 
            <p>Copyright &copy; iGEM IIT Delhi 2015</p>
 
        </div>
 
    </footer>
 
  
    <!-- jQuery -->
 
    <script src="js/jquery.js"></script>
 
  
    <!-- Bootstrap Core JavaScript -->
 
    <script src="js/bootstrap.min.js"></script>
 
  
    <!-- Plugin JavaScript -->
 
    <script src="js/jquery.easing.min.js"></script>
 
  
    <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
 
  
    <!-- Custom Theme JavaScript -->
 
    <script src="js/grayscale.js"></script>
 
  
</body>
 
  
</html>
 
  
{{:Team:IIT_Delhi/footer}}
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*--------------General end-----------------*/
 +
 
 +
/*--------------Global/content start----------------*/
 +
#content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
margin: 0px;
 +
padding: 0px;
 +
 
 +
}
 +
 
 +
 
 +
/*--------------Global end------------------*/
 +
 
 +
 
 +
body{
 +
  margin:0;
 +
  padding:0;
 +
  background-image:url("https://static.igem.org/mediawiki/2015/6/67/IITDwikipages_background.jpg");
 +
  background-size:100% 100%;
 +
 
 +
}
 +
 
 +
.iconshome{
 +
  position:absolute;
 +
  width:7%;
 +
  -webkit-transition: all 1s ease;
 +
  -moz-transition: all 1s ease;
 +
  -o-transition: all 1s ease;
 +
  transition all 1s ease:
 +
}
 +
.iconActive{
 +
  width:10%;
 +
}
 +
 
 +
 
 +
</style> <!-- End of CSS -->
 +
<body>
 +
  <div id="homeWrapper">
 +
    <div id="homeContent">
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--------------------------------code for site map-------------------------------->
 +
<!---------------TOUR CANCELLED------------------------->
 +
 
 +
<div id="tour">
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/tour"><img id="tourimg" src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png"></a>
 +
  </div>
 +
 
 +
 
 +
<!---------------TOUR CANCELLED------------------------->
 +
 
 +
<div id="tour">
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/tour"><img id="tourimg" src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png"></a>
 +
  </div>
 +
 
 +
<!---------------TOUR CANCELLED------------------------->
 +
<!-------------Span sitemap image--------->
 +
<img id="spanimg" src="https://static.igem.org/mediawiki/2015/d/de/IITDSitemap1.png">           
 +
<!------------Span sitemap image---------->
 +
  <div class="box">
 +
    <ul id="ldd_menu" class="ldd_menu" style="position:absolute;">
 +
      <li>
 +
        <span id="site">SiteMap</span>
 +
        <!---
 +
        <img id="spanimg" src="https://static.igem.org/mediawiki/2015/6/6b/IITDSitemap.png">         
 +
          -->
 +
          <div class="ldd_submenu">
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/abstract">ABSTRACT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#ourproject">OUR PROJECT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#categories">CATEGORIES</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#sponsors">SPONSORS</a></li>
 +
              <li><a href="#"></a></li>
 +
              <li><a href="#"></a></li>
 +
          </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/project">PROJECT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#research">RESEARCH</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#prototype">PROTOTYPE</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#conclusion">CONCLUSION</a></li>
 +
            <li><a href="#"></a></li>
 +
                <li><a href="#"></a></li>
 +
            </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/notebook">NOTEBOOK</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#summary/">SUMMARY</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#timeline">TIMELINE</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#album">ALBUM</a></li>
 +
              <li><a href="#"></a></li>
 +
              <li><a href="#"></a></li>
 +
            </ul>
 +
            <ul>
 +
<li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/results">RESULTS</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/results#parts">PARTS SUBMITTED</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/results#judging">JUDGING CRITERION</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/results#attributions">ATTRIBUTIONS</a></li>
 +
                <li><a href="#"></a></li>
 +
                <li><a href="#"></a></li>
 +
    </ul>
 +
    <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/modelling">MODELLING</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#introduction">INTRODUCTION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#mathematical">MATHEMATICAL MODEL</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#simulation">SIMULATION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#interpretation">INTERPRETATION</a></li>
 +
              <li><a href="#"></a></li>
 +
    </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/team">TEAM<a/></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#ourstory">OUR STORY</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#mentors">MENTORS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#members">MEMBERS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#carpediem">CARPE DIEM</a></li>
 +
            <li><a href="#"></a></li>
 +
    </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/human_practices">ETHICS</a></li>
 +
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/human_practices#collaborations">COLLABORATIONS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/human_practices#outreach">OUTREACH</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/human_practices#documentation">POLLUTION</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/human_practices#casestudy">CASE STUDY</a></li>
 +
              <li><a href="#"></a></li>
 +
    </ul>
 +
            <ul>
 +
<li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/ethics">HUMAN PRACTICES</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics#orientation">ORIENTATION</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics#openhouse">OPEN HOUSE</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics#tryst">TRYST</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics#surveys">SURVEYS</a></li>
 +
                <li><a href="#"></a></li>
 +
    </ul>
 +
    </div>
 +
  </li>
 +
</ul>
 +
      </div>
 +
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
  <img style="position:absolute;width:100%;z-index:-5;" src="https://static.igem.org/mediawiki/2015/6/68/IITDwikihome_background1.jpg">
 +
  <nav style="border:solid 1px black;">
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/abstract"><img class="iconshome iconsl" id="icon1" style="margin-top:4%; margin-left:10%;" src="https://static.igem.org/mediawiki/2015/6/6a/IITDabstract.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/modelling"><img class="iconshome" id="icon2" style="margin-top:4%; margin-left:83%;" src="https://static.igem.org/mediawiki/2015/b/b9/IITDmodelling1.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/project"><img class="iconshome iconsl" id="icon3" style="margin-top:14%; margin-left:6%;" src="https://static.igem.org/mediawiki/2015/2/2f/IITDproject1.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/team"><img class="iconshome" id="icon4" style="margin-top:14%; margin-left:87%;" src="https://static.igem.org/mediawiki/2015/0/01/Team1iitd.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/notebook"><img class="iconshome iconsl" id="icon5" style="margin-top:25%; margin-left:6%;" src="https://static.igem.org/mediawiki/2015/e/ee/Notebook_iitd.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/human_practices"><img class="iconshome" id="icon6" style="margin-top:25%; margin-left:86.5%;" src="https://static.igem.org/mediawiki/2015/2/27/IITDhp.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/results"><img class="iconshome iconsl" id="icon7" style="margin-top:36%; margin-left:9%;" src="https://static.igem.org/mediawiki/2015/0/0b/Results1_iitd.png"></a>
 +
 
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/ethics"><img class="iconshome" id="icon8" style="margin-top:36%; margin-left:84%;" src="https://static.igem.org/mediawiki/2015/5/51/Ethics1_iitd.png"></a>
 +
  </nav>
 +
    </div>
 +
</div>
 +
     
 +
  <script>
 +
    $(document).ready(function(){ 
 +
$("#icon1").hover(
 +
        function(){
 +
          $(this).css("margin-top","2.5%");
 +
          $(this).css("margin-left","8.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
 
 +
          $(this).css("margin-top","4%");
 +
          $(this).css("margin-left","10%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
     
 +
$("#icon2").hover(
 +
        function(){
 +
          $(this).css("margin-top","2.5%");
 +
          $(this).css("margin-left","81.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","4%");
 +
          $(this).css("margin-left","83%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon3").hover(
 +
        function(){
 +
          $(this).css("margin-top","12.5%");
 +
          $(this).css("margin-left","4.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","14%");
 +
          $(this).css("margin-left","6%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon4").hover(
 +
        function(){
 +
          $(this).css("margin-top","12.5%");
 +
          $(this).css("margin-left","85.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","14%");
 +
          $(this).css("margin-left","87%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
 
 +
$("#icon5").hover(
 +
        function(){
 +
          $(this).css("margin-top","23.5%");
 +
          $(this).css("margin-left","4.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","25%");
 +
          $(this).css("margin-left","6%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon6").hover(
 +
        function(){
 +
          $(this).css("margin-top","23.5%");
 +
          $(this).css("margin-left","85%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","25%");
 +
          $(this).css("margin-left","86.5%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
 
 +
$("#icon7").hover(
 +
        function(){
 +
          $(this).css("margin-top","34.5%");
 +
          $(this).css("margin-left","7.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","36%");
 +
          $(this).css("margin-left","9%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon8").hover(
 +
        function(){
 +
          $(this).css("margin-top","34.5%");
 +
          $(this).css("margin-left","82.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","36%");
 +
          $(this).css("margin-left","84%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
    });
 +
  </script>         
 +
     
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<script>
 +
$(document).ready(function(){
 +
alert("Any page in one click:Use Sitemap");
 +
/**
 +
* the menu
 +
*/
 +
var $menu = $('#ldd_menu');
 +
 +
/**
 +
* for each list element,
 +
* we show the submenu when hovering and
 +
* expand the span element (title) to 510px
 +
*/
 +
$menu.children('li').each(function(){
 +
var $this = $(this);
 +
var $span = $this.children('span');
 +
$span.data('width',$span.width());
 +
 +
$this.bind('mouseenter',function(){
 +
$menu.find('.ldd_submenu').stop(true,true).hide();
 +
$span.stop().animate({'width':'10%'},200,function(){
 +
$this.find('.ldd_submenu').slideDown(400);
 +
});
 +
}).bind('mouseleave',function(){
 +
/**$this.find('.ldd_submenu').stop(true,true).hide(); */
 +
$span.stop().animate({'width':$span.data('width')+'px'},300);
 +
$this.find('.ldd_submenu').slideUp(400);
 +
});
 +
});
 +
            });
 +
 +
//ipad and iphone fix
 +
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
 +
    $(" #ldd_menu li a").click(function(){
 +
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
 +
        //strange
 +
    });
 +
}
 +
</script>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Latest revision as of 23:27, 18 September 2015