Difference between revisions of "Template:UPMC-Paris"

 
(112 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{UPMC-Paris/CSS}}
 +
{{UPMC-Paris/Menu}}
 
<html>
 
<html>
 
+
</html>
<style>
+
{{UPMC-Paris/Footer}}
 
+
<html>
ul.sdt_menu{
+
<div id="footer"/>
margin:0;
+
padding:0;
+
list-style: none;
+
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
+
font-size:12px;
+
width:100%;
+
}
+
ul.sdt_menu a{
+
text-decoration:none;
+
outline:none;
+
}
+
ul.sdt_menu li{
+
float:left;
+
width:170px;
+
height:85px;
+
position:relative;
+
cursor:pointer;
+
}
+
ul.sdt_menu li > a{
+
position:absolute;
+
top:0px;
+
left:0px;
+
width:170px;
+
height:85px;
+
z-index:12;
+
background:transparent url(https://static.igem.org/mediawiki/2016/1/14/T--UPMC-Paris--overlay.png) no-repeat bottom right;
+
-moz-box-shadow:0px 0px 2px #000 inset;
+
-webkit-box-shadow:0px 0px 2px #000 inset;
+
box-shadow:0px 0px 2px #000 inset;
+
}
+
ul.sdt_menu li a img{
+
border:none;
+
position:absolute;
+
width:0px;
+
height:0px;
+
bottom:0px;
+
left:85px;
+
z-index:100;
+
-moz-box-shadow:0px 0px 4px #000;
+
-webkit-box-shadow:0px 0px 4px #000;
+
box-shadow:0px 0px 4px #000;
+
}
+
ul.sdt_menu li span.sdt_wrap{
+
position:absolute;
+
top:25px;
+
left:0px;
+
width:170px;
+
height:60px;
+
z-index:15;
+
}
+
ul.sdt_menu li span.sdt_active{
+
position:absolute;
+
background:#111;
+
top:85px;
+
width:170px;
+
height:0px;
+
left:0px;
+
z-index:14;
+
-moz-box-shadow:0px 0px 4px #000 inset;
+
-webkit-box-shadow:0px 0px 4px #000 inset;
+
box-shadow:0px 0px 4px #000 inset;
+
}
+
ul.sdt_menu li span span.sdt_link,
+
ul.sdt_menu li span span.sdt_descr,
+
ul.sdt_menu li div.sdt_box a{
+
margin-left:15px;
+
text-transform:uppercase;
+
text-shadow:1px 1px 1px #000;
+
}
+
ul.sdt_menu li span span.sdt_link{
+
color:#fff;
+
font-size:14px;
+
float:left;
+
clear:both;
+
}
+
ul.sdt_menu li span span.sdt_descr{
+
color:#0B75AF;
+
float:left;
+
clear:both;
+
width:155px; /*For dumbass IE7*/
+
font-size:10px;
+
letter-spacing:1px;
+
}
+
ul.sdt_menu li div.sdt_box{
+
display:block;
+
position:absolute;
+
width:170px;
+
overflow:hidden;
+
height:170px;
+
top:85px;
+
left:0px;
+
display:none;
+
background:#222251;
+
}
+
ul.sdt_menu li div.sdt_box a{
+
float:left;
+
clear:both;
+
line-height:150%;
+
color:#426780;
+
}
+
ul.sdt_menu li div.sdt_box a:first-child{
+
margin-top:10%;
+
}
+
ul.sdt_menu li div.sdt_box a:hover{
+
color:#555999;
+
}
+
 
+
</style>
+
 
+
 
+
 
+
 
+
<!--- THIS IS WHERE THE HTML BEGINS --->
+
 
+
 
+
<!-- This tells the browser that your page is responsive -->
+
 
+
<head>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
+
</head>
+
 
+
 
+
 
+
 
+
<div class="content">
+
+
<ul id="sdt_menu" class="sdt_menu">
+
<li>
+
<a href="https://2016.igem.org/Team:UPMC-Paris">
+
<img src="[[File:1.jpg]]" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">HOME</span>
+
<span class="sdt_descr">back to home</span>
+
</span>
+
</a>
+
</li>
+
<li>
+
<a href="#">
+
<img src="https://static.igem.org/mediawiki/2016/8/81/T--UPMC-Paris--1.jpg" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">TEAM</span>
+
<span class="sdt_descr">Our Team</span>
+
</span>
+
                                        <div class="sdt_box">
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Team">Team</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Collaborations">Collaborations</a>
+
 
+
 
+
</div>
+
</a>
+
                                </li>
+
<li>
+
<a href="#">
+
<img src="https://static.igem.org/mediawiki/2016/8/81/T--UPMC-Paris--1.jpg" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">PROJECT</span>
+
<span class="sdt_descr">Our Project</span>
+
</span>
+
<div class="sdt_box">
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Description">Description</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Design">Design</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Experiments">Experiments</a>
+
                                                        <a href="https://2016.igem.org/Team:UPMC-Paris/Proof">Proof</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Demonstrate">Demonstrate</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Results">Results</a>
+
                                                        <a href="https://2016.igem.org/Team:UPMC-Paris/Notebook">Notebook</a>
+
 
+
</div>
+
</li>
+
<li>
+
<a href="#">
+
<img src="images/3.jpg" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">Parts</span>
+
<span class="sdt_descr">Biobricks we have designed</span>
+
</span>
+
<div class="sdt_box">
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Parts">Parts</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Basic_Part">Basic_Part</a>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Composite_Part">Composite_Part</a>
+
                                                        <a href="https://2016.igem.org/Team:UPMC-Paris/Collection">Part_Collection</a>
+
</div>
+
</a>
+
</li>
+
<li>
+
<a href="#">
+
<img src="images/4.jpg" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">SAFETY</span>
+
<span class="sdt_descr">Safe</span>
+
</span>
+
</a>
+
</li>
+
<li>
+
<a href="https://2016.igem.org/Team:UPMC-Paris/Safety">
+
<img src="images/5.jpg" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">Attributions</span>
+
<span class="sdt_descr">I write about it later</span>
+
</span>
+
 
+
</a>
+
</li>
+
<li>
+
<a href="#">
+
<img src="images/6.png" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">HUMAN PRACTICES</span>
+
<span class="sdt_descr">Humans things</span>
+
</span>
+
</a>
+
<div class="sdt_box">
+
<a href="#">Human Practices</a>
+
<a href="#">Silver</a>
+
<a href="#">Gold</a>
+
<a href="#">Integrated Practices</a>
+
<a href="#">Engagement</a>
+
</div>
+
</li>
+
<li>
+
<a href="#">
+
<img src="images/6.png" alt=""/>
+
<span class="sdt_active"></span>
+
<span class="sdt_wrap">
+
<span class="sdt_link">AWARDS</span>
+
<span class="sdt_descr">Things we win</span>
+
</span>
+
</a>
+
<div class="sdt_box">
+
<a href="#">* Entrepreneurship *</a>
+
<a href="#">* Hardware *</a>
+
<a href="#">* Software *</a>
+
<a href="#">* Measurement *</a>
+
<a href="#">* Model *</a>
+
</div>
+
</li>
+
 
+
 
+
</ul>
+
</div>
+
        <div>
+
            <span class="reference">
+
                <a href="#"</a>
+
<a href="Something in ref</a>
+
            </span>
+
</div>
+
 
+
 
+
 
+
<!-- The JavaScript -->
+
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
+
        <script type="text/javascript">
+
            $(function() {
+
/**
+
* for each menu element, on mouseenter,
+
* we enlarge the image, and show both sdt_active span and
+
* sdt_wrap span. If the element has a sub menu (sdt_box),
+
* then we slide it - if the element is the last one in the menu
+
* we slide it to the left, otherwise to the right
+
*/
+
                $('#sdt_menu > li').bind('mouseenter',function(){
+
var $elem = $(this);
+
$elem.find('img')
+
.stop(true)
+
.animate({
+
'width':'170px',
+
'height':'170px',
+
'left':'0px'
+
},400,'easeOutBack')
+
.andSelf()
+
.find('.sdt_wrap')
+
    .stop(true)
+
.animate({'top':'140px'},500,'easeOutBack')
+
.andSelf()
+
.find('.sdt_active')
+
    .stop(true)
+
.animate({'height':'170px'},300,function(){
+
var $sub_menu = $elem.find('.sdt_box');
+
if($sub_menu.length){
+
var left = '170px';
+
if($elem.parent().children().length == $elem.index()+1)
+
left = '-170px';
+
$sub_menu.show().animate({'left':left},200);
+
}
+
});
+
}).bind('mouseleave',function(){
+
var $elem = $(this);
+
var $sub_menu = $elem.find('.sdt_box');
+
if($sub_menu.length)
+
$sub_menu.hide().css('left','0px');
+
+
$elem.find('.sdt_active')
+
.stop(true)
+
.animate({'height':'0px'},300)
+
.andSelf().find('img')
+
.stop(true)
+
.animate({
+
'width':'0px',
+
'height':'0px',
+
'left':'85px'},400)
+
.andSelf()
+
.find('.sdt_wrap')
+
.stop(true)
+
.animate({'top':'25px'},500);
+
});
+
            });
+
        </script>
+
 
+
 
+
 
+
 
+
 
+
<script>
+
 
+
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+
 
+
/*
+
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+
*
+
* Uses the built in easing capabilities added In jQuery 1.1
+
* to offer multiple easing options
+
*
+
* TERMS OF USE - jQuery Easing
+
*
+
* Open source under the BSD License.
+
*
+
* Copyright © 2008 George McGinley Smith
+
* All rights reserved.
+
*
+
* Redistribution and use in source and binary forms, with or without modification,
+
* are permitted provided that the following conditions are met:
+
*
+
* Redistributions of source code must retain the above copyright notice, this list of
+
* conditions and the following disclaimer.
+
* Redistributions in binary form must reproduce the above copyright notice, this list
+
* of conditions and the following disclaimer in the documentation and/or other materials
+
* provided with the distribution.
+
*
+
* Neither the name of the author nor the names of contributors may be used to endorse
+
* or promote products derived from this software without specific prior written permission.
+
*
+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
+
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+
* OF THE POSSIBILITY OF SUCH DAMAGE.
+
*
+
*/
+
 
+
// t: current time, b: begInnIng value, c: change In value, d: duration
+
jQuery.easing['jswing'] = jQuery.easing['swing'];
+
 
+
jQuery.extend( jQuery.easing,
+
{
+
def: 'easeOutQuad',
+
swing: function (x, t, b, c, d) {
+
//alert(jQuery.easing.default);
+
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+
},
+
easeInQuad: function (x, t, b, c, d) {
+
return c*(t/=d)*t + b;
+
},
+
easeOutQuad: function (x, t, b, c, d) {
+
return -c *(t/=d)*(t-2) + b;
+
},
+
easeInOutQuad: function (x, t, b, c, d) {
+
if ((t/=d/2) < 1) return c/2*t*t + b;
+
return -c/2 * ((--t)*(t-2) - 1) + b;
+
},
+
easeInCubic: function (x, t, b, c, d) {
+
return c*(t/=d)*t*t + b;
+
},
+
easeOutCubic: function (x, t, b, c, d) {
+
return c*((t=t/d-1)*t*t + 1) + b;
+
},
+
easeInOutCubic: function (x, t, b, c, d) {
+
if ((t/=d/2) < 1) return c/2*t*t*t + b;
+
return c/2*((t-=2)*t*t + 2) + b;
+
},
+
easeInQuart: function (x, t, b, c, d) {
+
return c*(t/=d)*t*t*t + b;
+
},
+
easeOutQuart: function (x, t, b, c, d) {
+
return -c * ((t=t/d-1)*t*t*t - 1) + b;
+
},
+
easeInOutQuart: function (x, t, b, c, d) {
+
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+
return -c/2 * ((t-=2)*t*t*t - 2) + b;
+
},
+
easeInQuint: function (x, t, b, c, d) {
+
return c*(t/=d)*t*t*t*t + b;
+
},
+
easeOutQuint: function (x, t, b, c, d) {
+
return c*((t=t/d-1)*t*t*t*t + 1) + b;
+
},
+
easeInOutQuint: function (x, t, b, c, d) {
+
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+
return c/2*((t-=2)*t*t*t*t + 2) + b;
+
},
+
easeInSine: function (x, t, b, c, d) {
+
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+
},
+
easeOutSine: function (x, t, b, c, d) {
+
return c * Math.sin(t/d * (Math.PI/2)) + b;
+
},
+
easeInOutSine: function (x, t, b, c, d) {
+
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+
},
+
easeInExpo: function (x, t, b, c, d) {
+
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+
},
+
easeOutExpo: function (x, t, b, c, d) {
+
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+
},
+
easeInOutExpo: function (x, t, b, c, d) {
+
if (t==0) return b;
+
if (t==d) return b+c;
+
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+
},
+
easeInCirc: function (x, t, b, c, d) {
+
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+
},
+
easeOutCirc: function (x, t, b, c, d) {
+
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+
},
+
easeInOutCirc: function (x, t, b, c, d) {
+
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+
},
+
easeInElastic: function (x, t, b, c, d) {
+
var s=1.70158;var p=0;var a=c;
+
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
},
+
easeOutElastic: function (x, t, b, c, d) {
+
var s=1.70158;var p=0;var a=c;
+
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+
},
+
easeInOutElastic: function (x, t, b, c, d) {
+
var s=1.70158;var p=0;var a=c;
+
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+
},
+
easeInBack: function (x, t, b, c, d, s) {
+
if (s == undefined) s = 1.70158;
+
return c*(t/=d)*t*((s+1)*t - s) + b;
+
},
+
easeOutBack: function (x, t, b, c, d, s) {
+
if (s == undefined) s = 1.70158;
+
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+
},
+
easeInOutBack: function (x, t, b, c, d, s) {
+
if (s == undefined) s = 1.70158;
+
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+
},
+
easeInBounce: function (x, t, b, c, d) {
+
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+
},
+
easeOutBounce: function (x, t, b, c, d) {
+
if ((t/=d) < (1/2.75)) {
+
return c*(7.5625*t*t) + b;
+
} else if (t < (2/2.75)) {
+
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+
} else if (t < (2.5/2.75)) {
+
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+
} else {
+
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+
}
+
},
+
easeInOutBounce: function (x, t, b, c, d) {
+
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+
}
+
});
+
 
+
/*
+
*
+
* TERMS OF USE - EASING EQUATIONS
+
*
+
* Open source under the BSD License.
+
*
+
* Copyright © 2001 Robert Penner
+
* All rights reserved.
+
*
+
* Redistribution and use in source and binary forms, with or without modification,
+
* are permitted provided that the following conditions are met:
+
*
+
* Redistributions of source code must retain the above copyright notice, this list of
+
* conditions and the following disclaimer.
+
* Redistributions in binary form must reproduce the above copyright notice, this list
+
* of conditions and the following disclaimer in the documentation and/or other materials
+
* provided with the distribution.
+
*
+
* Neither the name of the author nor the names of contributors may be used to endorse
+
* or promote products derived from this software without specific prior written permission.
+
*
+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
+
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+
* OF THE POSSIBILITY OF SUCH DAMAGE.
+
*
+
*/
+
 
+
 
+
</script>
+
 
+
 
+
 
</html>
 
</html>

Latest revision as of 11:00, 14 October 2016