Team:Valencia Biocampus/menu2

From 2012.igem.org

(Difference between revisions)
 
(126 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<div class="content">
 +
<ul id="sdt_menu" class="sdt_menu">
 +
<li>
 +
<a href="#">
 +
                                             
 +
<img src="https://static.igem.org/mediawiki/2012/e/e4/Team2.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">The Team</span>
 +
<span class="sdt_descr">Know the team</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
      <!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Team">The Team</a>-->
 +
      <!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Team2"> Student Members </a> -->
-
<script type="text/javascript"
+
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/miembros">Student Members </a>
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/miembros2"> Advisors </a>
 +
                                            <!--              <a href="https://2012.igem.org/Team:Valencia_Biocampus/miembros3"> Instructors </a>-->
 +
<!--<a href="https://2012.igem.org/Team:Valencia_Biocampus/c3po">Student Members </a>-->
 +
                        <!--                                <a href="https://2012.igem.org/Team:Valencia_Biocampus/c3poAdvisors"> Advisors </a>-->
 +
                                                      <a href="https://2012.igem.org/Team:Valencia_Biocampus/c3poInstructors"> Instructors </a>
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Universities">The Universities</a>
-
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
+
<!--<a href="https://2012.igem.org/Team:Valencia_Biocampus/Akw">Acknowledgements</a>-->
-
<script type=”text/javascript” src=”jquery.easing.1.3.js”></script>
+
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Akw">Acknowledgements</a>
-
<script type=”text/javascript”>
+
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Attributions">Attributions</a>
 +
                                                  <!--     <a href="https://2012.igem.org/Team:Valencia_Biocampus/Gallery">Gallery</a>    -->
 +
                                                  <!--    <a href="https://2012.igem.org/Team:Valencia_Biocampus/galeria">Gallery</a> -->
 +
                                                <!--        <a href="https://2012.igem.org/Team:Valencia_Biocampus/galeria">Gallery</a> -->
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/galeria3">Gallery</a>
-
$(function() {
+
                                                    <!--    <a href="https://2012.igem.org/Team:Valencia_Biocampus/contactUs">Contact Us</a> -->
-
    $('#sdt_menu > li').bind('mouseenter',function(){
+
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/contactUs">Contact Us</a>
-
        var $elem = $(this);
+
</div>
-
        $elem.find('img')
+
</li>
-
            .stop(true)
+
<li>
-
            .animate({
+
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Project">
-
            'width':'170px',
+
<img src="https://static.igem.org/mediawiki/2012/1/1a/C3po_valencia.png" alt=""/>
-
            'height':'170px',
+
<span class="sdt_active"></span>
-
            'left':'0px'
+
<span class="sdt_wrap">
-
            },400,'easeOutBack')
+
<span class="sdt_link">The Project</span>
-
            .andSelf()
+
<span class="sdt_descr">Where ideas get born</span>
-
    .find('.sdt_wrap')
+
</span>
-
    .stop(true)
+
</a>
-
    .animate({'top':'140px'},500,'easeOutBack')
+
<div class="sdt_box">
-
    .andSelf()
+
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Project">Overview</a>
-
    .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);
+
-
});
+
-
});
+
 +
<!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Bacterium">Bacteria</a> -->
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Bacterium">Bacteria</a>
-
</script>
+
<!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Yeast">Yeast</a> -->
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Yeast">Yeast</a>
 +
 
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Modeling_overview">Modeling</a>
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/talking">Talking Interfaces</a>
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Notebook">Notebook</a>
 +
                                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Protocols">Protocols</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b4/Biobrick_valencia.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Results</span>
 +
<span class="sdt_descr">Our dialogues</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
                                                       
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Results1">Talking to bacteria</a>
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Results2">Talking to yeast</a>
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Results3">Dissecting cheaters</a>
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Biobricks">Submitted Biobricks</a>
 +
<!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Making_our_Biobricks">Making our Biobricks</a> -->
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Modeling">
 +
<img src="https://static.igem.org/mediawiki/2012/7/70/Modeling_menu_vlc.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Modeling</span>
 +
<span class="sdt_descr">Inside knowlegde</span>
 +
</span>
 +
</a>
 +
                                        <div class="sdt_box">
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Modeling">Introduction</a>
 +
                            <a href="https://2012.igem.org/Team:Valencia_Biocampus/Modeling#Modeling_Bacteria">Bacteria</a>
 +
            <a href="https://2012.igem.org/Team:Valencia_Biocampus/Modeling#Modeling_Yeast">Yeast</a>
 +
                            <a href="https://2012.igem.org/Team:Valencia_Biocampus/modhp">for Human Practices</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/9/9d/Human_valencia.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Human Practices</span>
 +
<span class="sdt_descr">Talking life</span>
 +
</span>
 +
</a>
 +
                                        <div class="sdt_box">
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Ethics">Ethical issues</a>
 +
<!-- <a href="https://2012.igem.org/Team:Valencia_Biocampus/Ethics">Ethical issues</a> -->
 +
 
 +
<a href="https://2012.igem.org/Team:Valencia_Biocampus/Safety">Safety</a>
 +
<a><br></a>
 +
<a><br></a>
 +
 
 +
</div>
 +
</li>
 +
<li>
 +
 +
                                        <a href="https://2012.igem.org/Team:Valencia_Biocampus/Achievements">
 +
<img src="https://static.igem.org/mediawiki/2012/e/e6/Albaachievements8.png" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Achievements</span>
 +
<span class="sdt_descr">What we did</span>
 +
</span>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
 
 +
<!-- A partir de aqui va el codigo script: NO TOCAR!! (solo Tamara si puede) -->
 +
        <!-- 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">
 +
/*
 +
* 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;
 +
}
 +
});
-
<style type="text/css">
+
/*
 +
*
 +
* 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>
 +
       
 +
        <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':'160px',
 +
'height':'160px',
 +
'left':'0px'
 +
},400,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
    .stop(true)
 +
.animate({'top':'140px'},500,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_active')
 +
    .stop(true)
 +
.animate({'height':'160px'},300,function(){
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length){
 +
var left = '160px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '-160px';
 +
$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>
 +
        <style>
body{ color:#CCCCCC}
body{ color:#CCCCCC}
Line 71: Line 410:
font-size:14px;
font-size:14px;
width:1020px;
width:1020px;
 +
       
}
}
ul.sdt_menu a{
ul.sdt_menu a{
Line 78: Line 418:
ul.sdt_menu li{
ul.sdt_menu li{
float:left;
float:left;
-
width:170px;
+
width:160px;
height:85px;
height:85px;
position:relative;
position:relative;
Line 87: Line 427:
top:0px;
top:0px;
left:0px;
left:0px;
-
width:170px;
+
width:160px;
height:85px;
height:85px;
-
z-index:12;
+
z-index:12000;
-
background:transparent url(../images/overlay.png) no-repeat bottom right;
+
background:transparent url(https://static.igem.org/mediawiki/2012/5/5c/Overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
Line 102: Line 442:
bottom:0px;
bottom:0px;
left:85px;
left:85px;
-
z-index:100;
+
z-index:100000;
-moz-box-shadow:0px 0px 4px #000;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
Line 111: Line 451:
top:25px;
top:25px;
left:0px;
left:0px;
-
width:170px;
+
width:160px;
height:60px;
height:60px;
-
z-index:15;
+
z-index:15000;
}
}
ul.sdt_menu li span.sdt_active{
ul.sdt_menu li span.sdt_active{
Line 119: Line 459:
background:#111;
background:#111;
top:85px;
top:85px;
-
width:170px;
+
width:160px;
height:0px;
height:0px;
left:0px;
left:0px;
-
z-index:14;
+
z-index:14000;
-moz-box-shadow:0px 0px 4px #000 inset;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
Line 136: Line 476:
ul.sdt_menu li span span.sdt_link{
ul.sdt_menu li span span.sdt_link{
color:#fff;
color:#fff;
-
font-size:24px;
+
font-size:17px;
float:left;
float:left;
clear:both;
clear:both;
Line 144: Line 484:
float:left;
float:left;
clear:both;
clear:both;
-
width:155px; /*For dumbass IE7*/
+
width:150px;                                             /*For dumbass IE7*/
font-size:10px;
font-size:10px;
letter-spacing:1px;
letter-spacing:1px;
Line 151: Line 491:
display:block;
display:block;
position:absolute;
position:absolute;
-
width:170px;
+
width:200px;
overflow:hidden;
overflow:hidden;
-
height:170px;
+
height:;
top:85px;
top:85px;
left:0px;
left:0px;
display:none;
display:none;
background:#000;
background:#000;
 +
        z-index:16000;
}
}
ul.sdt_menu li div.sdt_box a{
ul.sdt_menu li div.sdt_box a{
Line 167: Line 508:
ul.sdt_menu li div.sdt_box a:first-child{
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
margin-top:15px;
 +
}
 +
ul.sdt_menu li div.sdt_box a:last-child{
 +
margin-bottom:25px;
}
}
ul.sdt_menu li div.sdt_box a:hover{
ul.sdt_menu li div.sdt_box a:hover{
Line 173: Line 517:
-
</style>
+
body{
-
 
+
background:#333 url(https://static.igem.org/mediawiki/2012/f/f9/Fondo_gris.jpeg) repeat top left;                            /* fondo de pagina */
-
 
+
font-family:Arial;
-
<ul id="sdt_menu" class="sdt_menu">
+
}*/
-
    <li>
+
span.reference{
-
        <a href="#">
+
position:fixed;
-
            <img src="aux.jpg" alt=""/>
+
left:10px;
-
            <span class="sdt_active"></span>
+
bottom:10px;
-
            <span class="sdt_wrap">
+
font-size:12px;
-
                <span class="sdt_link">Portfolio</span>
+
}
-
                <span class="sdt_descr">My work</span>
+
span.reference a{
-
            </span>
+
color:#aaa;
-
        </a>
+
text-transform:uppercase;
-
        <div class="sdt_box">
+
text-decoration:none;
-
            <a href="#">Websites</a>
+
text-shadow:1px 1px 1px #000;
-
            <a href="#">Illustrations</a>
+
margin-right:30px;
-
            <a href="#">Photography</a>
+
}
-
        </div>
+
span.reference a:hover{
-
    </li>
+
color:#ddd;
-
</ul>
+
}
 +
ul.sdt_menu{
 +
margin-top:15px;
 +
}
 +
h1.title{
 +
text-indent:-9000px;
 +
background:transparent url(title.png) no-repeat top left;
 +
width:633px;
 +
height:69px;
 +
}
 +
</style>
</html>
</html>

Latest revision as of 23:34, 26 September 2012

Retrieved from "http://2012.igem.org/Team:Valencia_Biocampus/menu2"