|
|
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 & Beach</a></li>
| + | |
- | <li><a href="#">Adventure</a></li>
| + | |
- | <li><a href="#">Science & 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 & Boat Trips</a></li>
| + | |
- | <li><a href="#">Wild Animals & Safaris</a></li>
| + | |
- | <li><a href="#">Nature Pure</a></li>
| + | |
- | <li><a href="#">Helping others & 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 & Beach</a></li>
| + | |
- | <li><a href="#">Adventure</a></li>
| + | |
- | <li><a href="#">Science & 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 & Beach</a></li>
| + | |
- | <li><a href="#">Adventure</a></li>
| + | |
- | <li><a href="#">Science & 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 & Beach</a></li>
| + | |
- | <li><a href="#">Adventure</a></li>
| + | |
- | <li><a href="#">Science & 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 & Boat Trips</a></li>
| + | |
- | <li><a href="#">Wild Animals & Safaris</a></li>
| + | |
- | <li><a href="#">Nature Pure</a></li>
| + | |
- | <li><a href="#">Helping others & 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 & Beach</a></li>
| + | |
- | <li><a href="#">Adventure</a></li>
| + | |
- | <li><a href="#">Science & 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>
| + | |