Team:Paris Bettencourt/Menu

From 2013.igem.org

(Difference between revisions)
 
(217 intermediate revisions not shown)
Line 3: Line 3:
<html>
<html>
-
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
<style type="text/css">
-
 
/* drop up  
/* drop up  
   http://www.pmob.co.uk/temp/dropup3.htm  
   http://www.pmob.co.uk/temp/dropup3.htm  
   http://www.youtube.com/watch?v=EENF7HNS1co
   http://www.youtube.com/watch?v=EENF7HNS1co
   */
   */
-
 
/* Navigation Menu */
/* Navigation Menu */
 +
.navmenubkg {
 +
  position:fixed;
 +
  display:block;
 +
  z-index:50;
 +
  top:0;
 +
  height:40px;
 +
  left:0;
 +
  right:0;
 +
  background:white;
 +
}
 +
.navmenubkg2 {
 +
  position:fixed;
 +
  display:none;
 +
  z-index:50;
 +
  top:43px;
 +
  height:40px;
 +
  left:0;
 +
  right:0;
 +
  background:white;
 +
}
#navmenubox {
#navmenubox {
-
    position:fixed;
 
     padding:0;
     padding:0;
-
     margin:0;
+
     margin-left:auto;
-
     top:0px;
+
     margin-right:auto;
-
     width:1000px;
+
     width:1100px;
-
     height:30px;
+
     height:40px;
     z-index:100;
     z-index:100;
     display:block;
     display:block;
-
     background:rgb(30,39,43);
+
     background:transparent;
-
     color:rgb(250,247,186);  
+
     color: rgb(46,43,52);  
     text-align:center;
     text-align:center;
-
     line-height:30px;
+
     /*line-height:40px;*/
 +
    border-bottom:4px solid rgba(228,45,51,0.9);
}
}
.sidelogos {
.sidelogos {
-
     position:absolute;
+
     float:left;
-
     padding:0;
+
     display:block;
-
     margin:0;
+
     margin-left:auto;
     height:100%;
     height:100%;
-
     width:40px;
+
     width:auto;   
 +
}
 +
.sidelogos a {
 +
  display:block;
 +
  top:0;
 +
  bottom:0;
}
}
#pblogo{
#pblogo{
-
    float:left;
+
  width:48px;
-
    left:0;
+
}
}
#pgmap{
#pgmap{
-
    float:left;
+
  width:30px;
-
    left:40px;
+
}
}
#fbnoticon{
#fbnoticon{
-
    float:right;
+
  width:38px;
-
    left:920px;
+
}
}
#twnoticon{
#twnoticon{
-
    float:right;
+
  width:38px;
-
    left:960px;
+
  margin-right:auto;
}
}
-
#pblogo img, #pgmap:hover img{
+
#igemlogo{ 
 +
  width:55px;
 +
}
 +
#onofflogo{
 +
  width:15px;
 +
  position:absolute;
 +
  top:0;
 +
  margin-left:1100px;
 +
}
 +
#pblogo img, #pgmap img, #twnoticon img, #fbnoticon img, #igemlogo img, #onofflogo img{
 +
  background-color:rgb(46,43,52);
 +
  margin-top:8px;
 +
  margin-bottom:2px;
}
}
#pblogo:hover img, #pgmap:hover img{
#pblogo:hover img, #pgmap:hover img{
 +
  background-color:rgb(228,45,51);
}
}
-
#twnoticon:hover img, #fbnoticon:hover img {
+
#twnoticon:hover img {
-
   border-radius:3px;
+
  background-color:rgb(93,215,255);
-
   background-color:rgb(250,247,186);  
+
}
 +
#fbnoticon:hover img {
 +
   background-color:rgb(62,82,158);  
 +
}
 +
#igemlogo:hover img {
 +
   background-color:rgb(0,153,102);
}
}
#twitapp, #fbapp {
#twitapp, #fbapp {
-
    display:none;
+
  display:none;
-
    position:absolute;
+
  width:250px;
-
    right:0;
+
  height:auto;
-
    width:250px;
+
  top:44px;
-
    height:400px;
+
  background: rgb(255,255,255);
-
    top:30px;
+
  z-index:100;
-
    border-radius:3px;
+
-
    border: 1px solid rgb(30,39,43);
+
-
    background: rgb(255,255,255);  
+
-
    z-index:100;
+
}
}
#fbapp{
#fbapp{
-
     right:-40px;
+
     margin-left:-149px;
}
}
-
ul#nav {
+
#twitapp{
-
     position:absolute;
+
  margin-left:-111px;
 +
  /*border-radius:3px;
 +
  border: 1px solid rgb(30,39,43);*/
 +
}
 +
ul#nav {
 +
    display:block;
 +
     float:left;
     padding:0;
     padding:0;
     margin:0;
     margin:0;
     list-style: none;
     list-style: none;
-
     height:100%;
+
     height:40px;
-
     width:84%px;
+
     width:890px;
-
    left:80px;
+
     background:none;
     background:none;
-
    line-height:30px;
 
     z-index:100;
     z-index:100;
-
     font-family: 'Yanone Kaffeesatz', sans-serif;
+
     /*font-family: 'PT Sans Narrow', sans-serif;*/
 +
    font-family: 'Archivo Narrow', sans-serif;
 +
}
 +
ul#nav a {
 +
  display:block;
 +
  top:0;
 +
  bottom:0;
}
}
ul#nav ul {
ul#nav ul {
Line 89: Line 133:
     padding:0;
     padding:0;
     list-style:none;
     list-style:none;
-
     background:none;
+
     background:transparent;
-
    line-height:30px;
+
     z-index:100;
     z-index:100;
}
}
Line 97: Line 140:
     padding:0;
     padding:0;
     margin:0;
     margin:0;
-
     width:118px;
+
     width:127px;
-
     height:30px;
+
    margin-top:13px;
-
     font-size:14px;
+
    line-height:27px;
 +
     height:27px;
 +
     font-size:15px;
     font-weight:600;
     font-weight:600;
-
    border-left:1px solid rgb(250,247,186);
+
     background:transparent;
-
    border-right:1px solid rgb(250,247,186);
+
-
     background:none;
+
     font-weight:normal;
     font-weight:normal;
     z-index:100;
     z-index:100;
}
}
ul#nav li:hover, ul#nav li.over, ul#nav li:hover a, ul#nav li.over a  {
ul#nav li:hover, ul#nav li.over, ul#nav li:hover a, ul#nav li.over a  {
-
     color: rgb(30,39,43);
+
     color: rgb(228,45,51);
-
     background-color:rgb(250,247,186);  
+
     /*font-weight:bold;*/
-
     font-weight:bold;
+
     border-bottom:4px solid rgb(255,255,255);
}
}
ul#nav a{
ul#nav a{
Line 119: Line 162:
     text-decoration:none;
     text-decoration:none;
     background:transparent;
     background:transparent;
-
     color:rgb(250,247,186);  
+
     color:rgb(46,43,52);  
}
}
ul#nav a:hover{
ul#nav a:hover{
-
     color: rgb(30,39,43);
+
     color: rgb(228,45,51);
}
}
#nav li ul {
#nav li ul {
-
     display:none;
+
     display:block;
 +
    margin:0;
 +
    margin-left:auto;
 +
    margin-right:auto;
     padding:0;
     padding:0;
     list-style: none;
     list-style: none;
-
     position:absolute;
+
     width:1100px;
-
    margin-left:-1px;
+
     height:40px;
-
    top: 30px;
+
     background:transparent;
-
     height:auto;
+
     color:rgb(46,43,52);
-
    width:118px;
+
-
    border:none;
+
-
     background: rgb(30,39,43);  
+
-
     color:rgb(250,247,186);
+
     z-index:100;  
     z-index:100;  
}
}
Line 143: Line 185:
     float:left;
     float:left;
     background:none;
     background:none;
-
     height:30px;
+
     height:100%;
-
     width:100%;
+
    line-height:40px;
-
     border:1px solid rgb(250,247,186);
+
    height:40px;
-
    border-bottom:none;
+
     width:127px;
 +
     color:rgb(46,43,52);
     z-index:100;
     z-index:100;
}
}
-
#nav li:hover ul {
+
#nav li:hover .navmenubkg2 {
     display:block;
     display:block;
}
}
-
#nav li ul:hover {
+
#nav li .navmenubkg2:hover {
     display:block;
     display:block;
}
}
ul#nav li:hover li a, ul#nav li.over li a  {
ul#nav li:hover li a, ul#nav li.over li a  {
-
     background-color: rgb(30,39,43);
+
     color: rgb(46,43,52);
-
    color:rgb(250,247,186);
+
     font-weight:normal;
     font-weight:normal;
 +
    border:none;
}
}
ul#nav li li:hover, ul#nav li li.over, ul#nav li li:hover a, ul#nav li li.over a {
ul#nav li li:hover, ul#nav li li.over, ul#nav li li:hover a, ul#nav li li.over a {
-
     color: rgb(30,39,43);
+
     color:rgb(228,45,51);
-
     background-color:rgb(250,247,186);  
+
     /*font-weight:bold;*/
-
     font-weight:bold;
+
     border:none;
}
}
</style>
</style>
Line 170: Line 213:
<body>
<body>
<div style="clear: both;"></div>
<div style="clear: both;"></div>
-
      <div id="navmenubox">
+
<div class="navmenubkg">
-
<div id="pblogo" class="sidelogos">
+
  <div id="navmenubox">
-
  <a href="https://2013.igem.org/Team:Paris_Bettencourt" title="Home Page">
+
    <div id="pblogo" class="sidelogos">
-
    <img src="https://static.igem.org/mediawiki/2013/5/5d/PB_miniLogo.gif" height="30px" width="30px"/>                       
+
      <a href="https://2013.igem.org/Team:Paris_Bettencourt" title="Home Page">
-
  </a>
+
<img src="https://static.igem.org/mediawiki/2013/1/17/PB_LogoHome.gif" height="30px"/>                       
-
</div>
+
      </a>
-
<div id="pgmap" class="sidelogos">
+
    </div>
-
  <a href="https://2013.igem.org/Team:Paris_Bettencourt/Site_Map" title="Site Map">
+
    <div id="pgmap" class="sidelogos">
-
    <img src="https://static.igem.org/mediawiki/2013/5/5d/PB_miniLogo.gif" height="30px" width="30px"/>                       
+
      <a href="https://2013.igem.org/Team:Paris_Bettencourt/Site_Map" title="Site Map">
-
  </a>
+
<img src="https://static.igem.org/mediawiki/2013/f/f4/PB_LogoMap2.gif" style="margin-top:13px;" height="25px"/>                       
-
</div>
+
      </a>
-
<ul id="nav">
+
    </div>
-
  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Overview" title="Project Overview">PROJECT</a>
+
    <ul id="nav">
-
    <ul>
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Overview" title="Project Overview">PROJECT</a>
-
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Phage_Sensor" title="Phage Sensor">DETECT</a> </li>
+
        <div class="navmenubkg2">    
-
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Drug_Screening" title="Drug Screening">TARGET</a> </li>
+
          <ul>  
-
                      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/TB-ception" title="TB-ception">INFILTRATE</a> </li>
+
            <li  style="margin-left:14.5px"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Overview" title="Project Overview">OVERVIEW</a></li>
-
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Trojan_Horse" title="Trojan Horse">SABOTAGE</a> </li>
+
    <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Detect" title="Detect">DETECT</a> </li>
-
    </ul>
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Target" title="Target">TARGET</a> </li>
-
  </li>
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Infiltrate" title="Infiltrate">INFILTRATE</a> </li>
-
  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Achievements" title="Achievements">ACHIEVEMENTS</a>
+
    <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Sabotage" title="Sabotage">SABOTAGE</a> </li>
-
  </li>
+
  </ul>
-
                  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Parts" title="Submitted Parts">PARTS</a> </li>
+
        </div>
-
  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Overview" title="Human Practice Overview">HUMAN PRACTICE</a>  
+
      </li>
-
  </li>
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Results" title="Achievements">ACHIEVEMENTS</a>
-
                  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Safety" title="Safety">SAFETY</a> </li>
+
        <div class="navmenubkg2">
-
  <li> <a href="" title="">NOTEBOOK</a>
+
          <ul>
-
    <ul>
+
            <li style="margin-left:141px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Parts" title="Submitted Parts">PARTS</a>
-
                      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Notebook" title="Day Notes">DAY NOTES</a> </li>
+
            <li > <a href="https://2013.igem.org/Team:Paris_Bettencourt/Results" title="Results">RESULTS</a></li>
-
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Protocols" title="Protocols">PROTOCOLS</a> </li>
+
            <li style="width:167px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Medal_Fulfillment" title="Medal Fulfillment">MEDAL FULFILLMENT</a></li>
-
    </ul>  
+
  </ul>
-
  </li>
+
        </div>
-
  <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Team" title="Team">TEAM</a>  
+
      </li>
-
    <ul>
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Overview" title="Human Practice Overview">HUMAN PRACTICE</a>  
-
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Contact" title="Contact">CONTACT</a> </li>
+
        <div class="navmenubkg2">
-
                      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Attributions" title="Attributions">ATTRIBUTIONS</a> </li>
+
          <ul>
-
                      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Acknowledgements" title="Acknowledgements">ACKNOWLEDGEMENTS</a></li>
+
            <li style="margin-left:141px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Overview" title="Human Practice Overview">OVERVIEW</a> </li>
-
    </ul>
+
 
-
  </li>
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Gender_Study" title="Gender Study">GENDER STUDY</a></li>
-
</ul>
+
            <li style="width:168px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Technology_Transfer" title="Technology_Transfer">TECHNOLOGY TRANSFER</a></li>
-
<div id="fbnoticon" class="sidelogos">
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_Facts" title="TB Tacts">TB FACTS</a></li>
-
  <a href="http://www.facebook.com/ParisiGEM2013" target="_blank">
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_France" title="TB in France">TB IN FRANCE</a></li>
-
    <img src="https://static.igem.org/mediawiki/2013/6/60/PB_Logofacebook.gif" height="30px" width="30px"/>                       
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_Gallery" title="TB Gallery">TB GALLERY</a></li>
-
    <div id="fbapp">
+
 
-
                      <div class="fb-like-box" data-href="https://www.facebook.com/ParisiGEM2013" data-width="250" data-height="400" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false"></div>
+
 
-
    </div>
+
  </ul>
-
                  </a>
+
        </div>
-
</div>
+
      </li>     
-
<div id="twnoticon" class="sidelogos">
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Safety" title="Safety">SAFETY</a>  
-
                  <a href="http://twitter.com/iGEM_Paris" target="_blank">
+
        <div class="navmenubkg2">
-
    <img src="https://static.igem.org/mediawiki/2013/f/f4/PB_Tweeter-logo2.gif" height="30px" width="30px"/>
+
         
-
    <div id="twitapp">
+
        </div>
-
      <a class="twitter-timeline"  
+
      </li>
-
                        width="250" height="400"
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Collaboration" title="Collaboration">COLLABORATION</a>
-
                        data-dnt="true"  
+
        <div class="navmenubkg2">
-
                        href="https://twitter.com/iGEM_Paris"  
+
          <ul>
-
                        data-widget-id="368144501119795201">
+
            <li style="margin-left:500px"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Collaboration" title="Collaboration">COLLABORATION</a></li>
-
                        @iGEM_Paris</a>
+
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/SensiGEM" title="SensiGEM">SENSIGEM</a></li>
-
    </div>
+
  </ul>
-
                  </a>
+
        </div>
-
</div>
+
      </li>
-
      </div>
+
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Notes" title="Notebook">NOTEBOOK</a>
 +
        <div class="navmenubkg2">
 +
  <ul>
 +
            <li style="margin-left:649.5px"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Notebook" title="Day Notes">DAY NOTES</a> </li>
 +
    <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Protocols" title="Protocols">PROTOCOLS</a> </li>
 +
    <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Bibliography" title="Bibliography">BIBLIOGRAPHY</a> </li>
 +
  </ul>  
 +
        </div>
 +
      </li>
 +
      <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Team" title="Team">TEAM</a>  
 +
        <div class="navmenubkg2">
 +
  <ul>
 +
            <li style="margin-left:522.5px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Team" title="Team">OUR TEAM</a></li>
 +
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Gallery" title="Team Gallery">GALLERY</a></li>
 +
            <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Attributions" title="Attributions">ATTRIBUTIONS</a> </li>
 +
            <li style="width:167px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Acknowledgements" title="Acknowledgements">ACKNOWLEDGEMENTS</a></li>    
 +
  </ul>
 +
        </div>
 +
      </li>
 +
    </ul>
 +
    <div id="twnoticon" class="sidelogos">
 +
      <a href="http://twitter.com/iGEM_Paris" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2013/3/3f/PB_LogoTweeter.gif" height="30px"/>
 +
<div id="twitapp">
 +
  <a class="twitter-timeline"
 +
            width="250" height="400"
 +
            data-dnt="true"
 +
            href="https://twitter.com/iGEM_Paris"
 +
            data-widget-id="368144501119795201">
 +
            @iGEM_Paris</a>
 +
</div>
 +
      </a>
 +
    </div>
 +
    <div id="fbnoticon" class="sidelogos">
 +
      <a href="http://www.facebook.com/ParisiGEM2013" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2013/4/4e/PB_LogoFacebook.gif" height="30px"/>                       
 +
<div id="fbapp">
 +
          <div class="fb-like-box" data-href="https://www.facebook.com/ParisiGEM2013" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
 +
</div>
 +
      </a>
 +
    </div>
 +
    <div id="igemlogo" class="sidelogos">
 +
    <a href="https://2013.igem.org/Main_Page" title="iGEM 2013" target="_blank">
 +
      <img src="https://static.igem.org/mediawiki/2013/d/d0/PB_LogoiGEM.gif" height="30px">
 +
    </a>
 +
    </div>
 +
  <div id="onofflogo">
 +
    <a onclick="changemenu()" title="iGEM wiki buttons">
 +
      <img id="ooswitch" src="https://static.igem.org/mediawiki/2013/7/72/PB_LogoOff.gif" style="margin-top:0px;" height="15px">
 +
    </a>
 +
  </div>
 +
  </div>
 +
</div>
<div style="clear: both;"></div>
<div style="clear: both;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js"></script>
+
 
 +
<script type="text/javascript">
 +
  function changemenu(){
 +
    if($('.left-menu').is(":visible")) {
 +
      $('.left-menu').hide();
 +
      $('.right-menu').hide();
 +
      document.getElementById('ooswitch').style.backgroundColor = "rgb(46,43,52)";
 +
    }else{
 +
      $('.left-menu').show();
 +
      $('.right-menu').show();
 +
      document.getElementById('ooswitch').style.backgroundColor = "rgb(228,45,51)";
 +
    }
 +
  }
 +
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Latest revision as of 01:31, 5 October 2013

Retrieved from "http://2013.igem.org/Team:Paris_Bettencourt/Menu"