Team:Paris Bettencourt/Menu
From 2013.igem.org
(Difference between revisions)
Marguerite (Talk | contribs) |
|||
(218 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
- | |||
+ | <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' 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 { | ||
- | |||
padding:0; | padding:0; | ||
- | margin: | + | margin-left:auto; |
- | + | margin-right:auto; | |
- | width: | + | width:1100px; |
height:40px; | height:40px; | ||
- | z-index: | + | z-index:100; |
display:block; | display:block; | ||
- | background: | + | background:transparent; |
- | color: | + | color: rgb(46,43,52); |
text-align:center; | text-align:center; | ||
- | line-height:40px; | + | /*line-height:40px;*/ |
+ | border-bottom:4px solid rgba(228,45,51,0.9); | ||
} | } | ||
.sidelogos { | .sidelogos { | ||
- | + | float:left; | |
- | + | display:block; | |
- | margin: | + | margin-left:auto; |
height:100%; | height:100%; | ||
- | width: | + | width:auto; |
+ | } | ||
+ | .sidelogos a { | ||
+ | display:block; | ||
+ | top:0; | ||
+ | bottom:0; | ||
} | } | ||
#pblogo{ | #pblogo{ | ||
- | + | width:48px; | |
- | + | ||
} | } | ||
#pgmap{ | #pgmap{ | ||
- | + | width:30px; | |
- | + | ||
} | } | ||
#fbnoticon{ | #fbnoticon{ | ||
- | + | width:38px; | |
- | + | ||
} | } | ||
#twnoticon{ | #twnoticon{ | ||
- | + | width:38px; | |
- | + | margin-right:auto; | |
} | } | ||
- | #pblogo img, #pgmap | + | #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 { | ||
+ | background-color:rgb(93,215,255); | ||
+ | } | ||
+ | #fbnoticon:hover img { | ||
+ | background-color:rgb(62,82,158); | ||
} | } | ||
- | # | + | #igemlogo:hover img { |
- | + | background-color:rgb(0,153,102); | |
- | background-color: | + | |
} | } | ||
#twitapp, #fbapp { | #twitapp, #fbapp { | ||
- | + | display:none; | |
- | + | width:250px; | |
- | + | height:auto; | |
- | + | top:44px; | |
- | + | background: rgb(255,255,255); | |
- | + | z-index:100; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#fbapp{ | #fbapp{ | ||
- | + | margin-left:-149px; | |
} | } | ||
- | ul#nav { | + | #twitapp{ |
- | + | 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: | + | height:40px; |
- | width: | + | width:890px; |
- | + | ||
background:none; | background:none; | ||
- | + | z-index:100; | |
+ | /*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 84: | Line 133: | ||
padding:0; | padding:0; | ||
list-style:none; | list-style:none; | ||
- | background: | + | background:transparent; |
- | + | z-index:100; | |
} | } | ||
ul#nav li { | ul#nav li { | ||
Line 91: | Line 140: | ||
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
- | width: | + | width:127px; |
- | height: | + | margin-top:13px; |
- | font-size: | + | line-height:27px; |
+ | height:27px; | ||
+ | font-size:15px; | ||
font-weight:600; | font-weight:600; | ||
- | + | background:transparent; | |
- | + | font-weight:normal; | |
- | + | 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: | + | color: rgb(228,45,51); |
- | + | /*font-weight:bold;*/ | |
+ | border-bottom:4px solid rgb(255,255,255); | ||
} | } | ||
ul#nav a{ | ul#nav a{ | ||
Line 110: | Line 162: | ||
text-decoration:none; | text-decoration:none; | ||
background:transparent; | background:transparent; | ||
- | color: | + | color:rgb(46,43,52); |
} | } | ||
ul#nav a:hover{ | ul#nav a:hover{ | ||
- | color: | + | color: rgb(228,45,51); |
} | } | ||
#nav li ul { | #nav li ul { | ||
- | display: | + | display:block; |
+ | margin:0; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
padding:0; | padding:0; | ||
list-style: none; | list-style: none; | ||
- | + | width:1100px; | |
- | + | height:40px; | |
- | + | background:transparent; | |
- | + | color:rgb(46,43,52); | |
- | + | z-index:100; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#nav li ul li { | #nav li ul li { | ||
Line 133: | Line 185: | ||
float:left; | float:left; | ||
background:none; | background:none; | ||
+ | height:100%; | ||
+ | line-height:40px; | ||
height:40px; | height:40px; | ||
- | width: | + | width:127px; |
- | + | color:rgb(46,43,52); | |
- | + | z-index:100; | |
} | } | ||
- | #nav li:hover | + | #nav li:hover .navmenubkg2 { |
display:block; | display:block; | ||
} | } | ||
- | #nav li | + | #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 { | ||
- | + | color: rgb(46,43,52); | |
- | + | 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: | + | color:rgb(228,45,51); |
- | + | /*font-weight:bold;*/ | |
+ | border:none; | ||
} | } | ||
</style> | </style> | ||
Line 157: | Line 213: | ||
<body> | <body> | ||
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
- | + | <div class="navmenubkg"> | |
- | + | <div id="navmenubox"> | |
- | + | <div id="pblogo" class="sidelogos"> | |
- | + | <a href="https://2013.igem.org/Team:Paris_Bettencourt" title="Home Page"> | |
- | + | <img src="https://static.igem.org/mediawiki/2013/1/17/PB_LogoHome.gif" height="30px"/> | |
- | + | </a> | |
- | + | </div> | |
- | + | <div id="pgmap" class="sidelogos"> | |
- | + | <a href="https://2013.igem.org/Team:Paris_Bettencourt/Site_Map" title="Site Map"> | |
- | + | <img src="https://static.igem.org/mediawiki/2013/f/f4/PB_LogoMap2.gif" style="margin-top:13px;" height="25px"/> | |
- | + | </a> | |
- | + | </div> | |
- | + | <ul id="nav"> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Overview" title="Project Overview">PROJECT</a> | |
- | + | <div class="navmenubkg2"> | |
- | + | <ul> | |
- | + | <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/Detect" title="Detect">DETECT</a> </li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Project/Target" title="Target">TARGET</a> </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/Project/Sabotage" title="Sabotage">SABOTAGE</a> </li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Results" title="Achievements">ACHIEVEMENTS</a> | |
- | + | <div class="navmenubkg2"> | |
- | + | <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/Results" title="Results">RESULTS</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> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Overview" title="Human Practice Overview">HUMAN PRACTICE</a> | |
- | + | <div class="navmenubkg2"> | |
- | + | <ul> | |
- | + | <li style="margin-left:141px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Overview" title="Human Practice Overview">OVERVIEW</a> </li> | |
- | + | ||
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Gender_Study" title="Gender Study">GENDER STUDY</a></li> | |
- | + | <li style="width:168px;"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Technology_Transfer" title="Technology_Transfer">TECHNOLOGY TRANSFER</a></li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_Facts" title="TB Tacts">TB FACTS</a></li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_France" title="TB in France">TB IN FRANCE</a></li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/TB_Gallery" title="TB Gallery">TB GALLERY</a></li> | |
- | + | ||
- | + | ||
- | + | </ul> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Human_Practice/Safety" title="Safety">SAFETY</a> | |
- | + | <div class="navmenubkg2"> | |
- | + | ||
- | + | </div> | |
- | + | </li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Collaboration" title="Collaboration">COLLABORATION</a> | |
- | + | <div class="navmenubkg2"> | |
- | + | <ul> | |
- | + | <li style="margin-left:500px"> <a href="https://2013.igem.org/Team:Paris_Bettencourt/Collaboration" title="Collaboration">COLLABORATION</a></li> | |
- | + | <li> <a href="https://2013.igem.org/Team:Paris_Bettencourt/SensiGEM" title="SensiGEM">SENSIGEM</a></li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | </li> | |
- | + | <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 | + | |
+ | <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