Team:Buenos Aires

From 2012.igem.org

(Difference between revisions)
(Replaced content with "{{:Team:Buenos_Aires/Templates/menu}}")
Line 1: Line 1:
-
<html>
+
{{:Team:Buenos_Aires/Templates/menu}}
-
    <head>
+
-
        <style>
+
-
            *{
+
-
                padding:0;
+
-
                margin:0;
+
-
            }
+
-
body{
+
-
                background:#f0f0f0;
+
-
                font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
+
-
overflow-x:hidden;
+
-
 
+
-
            }
+
-
            }
+
-
            span.reference{
+
-
                position:fixed;
+
-
                left:10px;
+
-
                bottom:10px;
+
-
                font-size:11px;
+
-
            }
+
-
            span.reference a{
+
-
                color:#DF7B61;
+
-
                text-decoration:none;
+
-
                text-transform: uppercase;
+
-
                text-shadow:0 1px 0 #fff;
+
-
            }
+
-
            span.reference a:hover{
+
-
                color:#000;
+
-
            }
+
-
            .box{
+
-
                margin-top:129px;
+
-
                height:460px;
+
-
width:100%;
+
-
                position:relative;
+
-
                background:#fff url(click.png) no-repeat 380px 180px;
+
-
-moz-box-shadow:0px 0px 10px #aaa;
+
-
-webkit-box-shadow:0px 0px 10px #aaa;
+
-
-box-shadow:0px 0px 10px #aaa;
+
-
            }
+
-
            .box h2{
+
-
color:#f0f0f0;
+
-
padding:10px 10px;
+
-
text-shadow:1px 1px 1px #ccc;
+
-
            }
+
-
 
+
-
 
+
-
ul.ldd_menu{
+
-
margin:0px;
+
-
padding:0;
+
-
display:block;
+
-
height:50px;
+
-
background-color:#009ee1;
+
-
list-style:none;
+
-
font-family:"Trebuchet MS", sans-serif;
+
-
border-top:1px solid #009ee1;
+
-
border-bottom:1px solid #004a99;
+
-
border-left:10px solid #009ee1;
+
-
-moz-box-shadow:0px 3px 4px #004a99;
+
-
-webkit-box-shadow:0px 3px 4px #004a99;
+
-
-box-shadow:0px 3px 4px #004a99;
+
-
}
+
-
ul.ldd_menu a{
+
-
text-decoration:none;
+
-
}
+
-
ul.ldd_menu > li{
+
-
float:left;
+
-
position:relative;
+
-
}
+
-
ul.ldd_menu > li > span{
+
-
float:left;
+
-
color:#fff;
+
-
background-color:#009ee1;
+
-
height:50px;
+
-
line-height:50px;
+
-
cursor:default;
+
-
padding:0px 20px;
+
-
text-shadow:0px 0px 1px #fff;
+
-
border-right:1px solid #bedeec;
+
-
border-left:1px solid #009ee1;
+
-
}
+
-
ul.ldd_menu .ldd_submenu{
+
-
position:absolute;
+
-
top:50px;
+
-
width:550px;
+
-
display:none;
+
-
opacity:0.95;
+
-
left:0px;
+
-
font-size:10px;
+
-
background: #008ae1;
+
-
border-top:1px solid #004a99;
+
-
-moz-box-shadow:0px 3px 4px #004a99 inset;
+
-
-webkit-box-shadow:0px 3px 4px #004a99 inset;
+
-
-box-shadow:0px 3px 4px #004a99 inset;
+
-
}
+
-
a.ldd_subfoot{
+
-
background-color:#f0f0f0;
+
-
color:#444;
+
-
display:block;
+
-
clear:both;
+
-
padding:15px 20px;
+
-
text-transform:uppercase;
+
-
font-family: Arial, serif;
+
-
font-size:12px;
+
-
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{
+
-
list-style:none;
+
-
float:left;
+
-
border-left:1px solid #bedeec;
+
-
margin:20px 0px 10px 30px;
+
-
padding:10px;
+
-
}
+
-
li.ldd_heading{
+
-
font-family: Georgia, serif;
+
-
font-size: 13px;
+
-
font-style: italic;
+
-
color:#FFB39F;
+
-
text-shadow:0px 0px 1px #B03E23;
+
-
padding:0px 0px 10px 0px;
+
-
}
+
-
ul.ldd_menu ul li a{
+
-
font-family: Arial, serif;
+
-
font-size:10px;
+
-
line-height:20px;
+
-
color:#fff;
+
-
padding:1px 3px;
+
-
}
+
-
ul.ldd_menu ul li a:hover{
+
-
-moz-box-shadow:0px 0px 2px #333;
+
-
-webkit-box-shadow:0px 0px 2px #333;
+
-
box-shadow:0px 0px 2px #333;
+
-
background:#AF412B;
+
-
}
+
-
 
+
-
        </style>
+
-
    </head>
+
-
    <body>
+
-
<ul id="ldd_menu" class="ldd_menu">
+
-
<li>
+
-
<span>iGEM BsAs</span><!-- Increases to 510px in width-->
+
-
<div class="ldd_submenu">
+
-
<ul>
+
-
<li class="ldd_heading">The team</li>
+
-
<li><a href="#">South America</a></li>
+
-
<li><a href="#">Antartica</a></li>
+
-
<li><a href="#">Africa</a></li>
+
-
<li><a href="#">Asia and Australia</a></li>
+
-
<li><a href="#">Europe</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Safety</li>
+
-
<li><a href="#">Sun &amp; Beach</a></li>
+
-
<li><a href="#">Adventure</a></li>
+
-
<li><a href="#">Science &amp; Education</a></li>
+
-
<li><a href="#">Extreme Sports</a></li>
+
-
<li><a href="#">Relaxing</a></li>
+
-
<li><a href="#">Spa and Wellness</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Sponsors</li>
+
-
<li><a href="#">Paradise Islands</a></li>
+
-
<li><a href="#">Cruises &amp; Boat Trips</a></li>
+
-
<li><a href="#">Wild Animals &amp; Safaris</a></li>
+
-
<li><a href="#">Nature Pure</a></li>
+
-
<li><a href="#">Helping others &amp; For Hope</a></li>
+
-
<li><a href="#">Diving</a></li>
+
-
</ul>
+
-
<a class="ldd_subfoot" href="#"></a>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<span>Project</span>
+
-
<div class="ldd_submenu">
+
-
<ul>
+
-
<li class="ldd_heading">Synthetic ecology</li>
+
-
<li><a href="#">South America</a></li>
+
-
<li><a href="#">Antartica</a></li>
+
-
<li><a href="#">Africa</a></li>
+
-
<li><a href="#">Asia and Australia</a></li>
+
-
<li><a href="#">Europe</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Schemes</li>
+
-
<li><a href="#">Sun &amp; Beach</a></li>
+
-
<li><a href="#">Adventure</a></li>
+
-
<li><a href="#">Science &amp; Education</a></li>
+
-
<li><a href="#">Extreme Sports</a></li>
+
-
<li><a href="#">Relaxing</a></li>
+
-
<li><a href="#">Spa and Wellness</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Modelling</li>
+
-
<li><a href="#">Sun &amp; Beach</a></li>
+
-
<li><a href="#">Adventure</a></li>
+
-
<li><a href="#">Science &amp; Education</a></li>
+
-
<li><a href="#">Extreme Sports</a></li>
+
-
<li><a href="#">Relaxing</a></li>
+
-
<li><a href="#">Spa and Wellness</a></li>
+
-
</ul>
+
-
<a class="ldd_subfoot" href="#"></a>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<span>Results</span>
+
-
<div class="ldd_submenu">
+
-
<ul>
+
-
<li class="ldd_heading">Strains characterization</li>
+
-
<li><a href="#">South America</a></li>
+
-
<li><a href="#">Antartica</a></li>
+
-
<li><a href="#">Africa</a></li>
+
-
<li><a href="#">Asia and Australia</a></li>
+
-
<li><a href="#">Europe</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Biobrick 1</li>
+
-
<li><a href="#">Sun &amp; Beach</a></li>
+
-
<li><a href="#">Adventure</a></li>
+
-
<li><a href="#">Science &amp; Education</a></li>
+
-
<li><a href="#">Extreme Sports</a></li>
+
-
<li><a href="#">Relaxing</a></li>
+
-
<li><a href="#">Spa and Wellness</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">Biobrick 2</li>
+
-
<li><a href="#">Paradise Islands</a></li>
+
-
<li><a href="#">Cruises &amp; Boat Trips</a></li>
+
-
<li><a href="#">Wild Animals &amp; Safaris</a></li>
+
-
<li><a href="#">Nature Pure</a></li>
+
-
<li><a href="#">Helping others &amp; For Hope</a></li>
+
-
<li><a href="#">Diving</a></li>
+
-
</ul>
+
-
<a class="ldd_subfoot" href="#"></a>
+
-
</div>
+
-
</li>
+
-
                                <li>
+
-
<span>Human practices</span>
+
-
<div class="ldd_submenu">
+
-
<ul>
+
-
<li class="ldd_heading">Garage Lab</li>
+
-
<li><a href="#">South America</a></li>
+
-
<li><a href="#">Antartica</a></li>
+
-
<li><a href="#">Africa</a></li>
+
-
<li><a href="#">Asia and Australia</a></li>
+
-
<li><a href="#">Europe</a></li>
+
-
</ul>
+
-
<ul>
+
-
<li class="ldd_heading">EMBO</li>
+
-
<li><a href="#">Sun &amp; Beach</a></li>
+
-
<li><a href="#">Adventure</a></li>
+
-
<li><a href="#">Science &amp; Education</a></li>
+
-
<li><a href="#">Extreme Sports</a></li>
+
-
<li><a href="#">Relaxing</a></li>
+
-
<li><a href="#">Spa and Wellness</a></li>
+
-
</ul>
+
-
<a class="ldd_subfoot" href="#"></a>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
+
-
 
+
-
<!-- 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">
+
-
            $(function() {
+
-
/**
+
-
* 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':'510px'},300,function(){
+
-
$this.find('.ldd_submenu').slideDown(300);
+
-
});
+
-
}).bind('mouseleave',function(){
+
-
$this.find('.ldd_submenu').stop(true,true).hide();
+
-
$span.stop().animate({'width':$span.data('width')+'px'},300);
+
-
});
+
-
});
+
-
            });
+
-
        </script>
+
-
    </body>
+
-
hola hola
+
-
</html>
+

Revision as of 23:08, 31 August 2012