Team:Buenos Aires/css/style.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
@import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css');
+
<!DOCTYPE html>
 +
<html lang="en">
 +
    <head>
 +
        <title>Animated Content Menu with jQuery</title>
 +
<meta charset=utf-8>
 +
        <meta name="description" content="Animated Content Menu with jQuery" />
 +
        <meta name="keywords" content="jquery, animation, menu, navigation, template, slide out, effect, background image"/>
 +
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
 +
        <link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
 +
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
-
body{
 
-
background:#000;
 
-
color:#fff;
 
-
font-family: 'PT Sans Narrow', Arial, sans-serif;
 
-
text-transform:uppercase;
 
-
}
 
-
a{
 
-
color:#fff;
 
-
text-decoration:none;
 
-
}
 
-
a.ps{
+
<style type ='text/css'>
-
background:#FFF;
+
/* Wiki Hacks - START */
-
c
+
/* Author: Pieter van Boheemen */
-
}
+
/* Team: TU Delft */
 +
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
 +
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: scroll; height:100%;}
 +
#bodyContent { border: none; padding:0; margin:0; width:100%; height:100%;}
 +
#top-section { height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
 +
padding:0; border: none; font-size: 10px;}
 +
#p-logo { height:1px; overflow:scroll; display: none;}
 +
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
 +
#footer-box { width: 100%; margin: -10px auto 0 auto; padding: 20px 0;}
 +
.visualClear { display: none; }
 +
#footer { border: none; width: 965px; margin: 0 auto; padding: 0;}
 +
.firstHeading { display: none;}
 +
#f-list a { color: #333; font-size: 10px;}
 +
#f-list a:hover { color: #666;}
 +
.printfooter { display: none; }
 +
#footer ul { margin: 0; padding: 0;}
 +
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
 +
#search-controls { display:none; }
 +
h3#siteSub { display: none;}
 +
#contentSub {display: none;}
 +
p:first-child { display: none;}
 +
/* Wiki Hacks - END */
-
.textos{
+
 
-
background:#AAA;
+
li{
-
display:block;
+
color:#FFF;
-
width:30%;
+
-
height:50%;
+
-
position:relative;
+
-
z-index:99999;
+
-
overflow:scroll;
+
}
}
-
img.ac_bgimage{
+
h1{
-
position:fixed;
+
color:#FFF;
-
left:0px;
+
border:none;
-
top:0px;
+
-
width:100%;
+
-
opacity:1;
+
-
display:none;
+
-
}
+
-
.ac_overlay{
+
-
width:100%;
+
-
height:100%;
+
-
position:fixed;
+
-
top:0px;
+
-
left:0px;
+
-
background:transparent url("https://static.igem.org/mediawiki/2013/9/91/Pattern.png") repeat top left;
+
-
}
+
-
.ac_loading{
+
-
position:fixed;
+
-
top:10px;
+
-
right:10px;
+
-
background:#000 url("https://static.igem.org/mediawiki/2013/2/29/Loader.gif") no-repeat center center;
+
-
width:50px;
+
-
height:50px;
+
-
-moz-border-radius:10px;
+
-
-webkit-border-radius:10px;
+
-
border-radius:10px 10px 10px 10px;
+
-
z-index:999;
+
-
opacity:0.7;
+
-
display:none;
+
-
}
+
-
.ac_content{
+
-
position:fixed;
+
-
height:90px;
+
-
width:100%;
+
-
top:50%;
+
-
left:0px;
+
-
margin-top:-65px;
+
-
}
+
-
.ac_content h1{
+
-
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
+
-
display:block;
+
-
float:left;
+
-
width:90px;
+
-
height:50px;
+
-
padding:20px;
+
-
font-size:36px;
+
-
font-weight:bold;
+
-
line-height:20px;
+
-
margin-right:1px;
+
-
}
+
-
.ac_content h1 span{
+
-
display:block;
+
-
font-weight:normal;
+
-
font-size:14px;
+
-
}
+
-
.ac_menu{
+
-
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
+
-
float:left;
+
-
position:relative;
+
-
height:90px;
+
-
width:0px;
+
-
}
+
-
.ac_menu > ul{
+
-
float:right;
+
-
}
+
-
.ac_menu > ul > li{
+
-
float:left;
+
-
position:relative;
+
-
height:90px;
+
-
overflow:hidden;
+
-
}
+
-
.ac_menu > ul > li a{
+
-
margin-top:60px;
+
-
opacity:0;
+
-
display:block;
+
-
height:90px;
+
-
padding:0px 10px;
+
-
text-align:center;
+
-
line-height:90px;
+
-
outline:none;
+
-
font-size:18px;
+
-
font-weight:bold;
+
-
text-shadow:1px 1px 1px #000;
+
-
}
+
-
.ac_subitem{
+
-
width:400px;
+
-
height:0px; /* animate to 400px */
+
-
top:50%;
+
-
right:0px;
+
-
margin-top:0px; /* animate to -200px */
+
-
position:fixed;
+
-
z-index:99;
+
-
overflow:hidden;
+
-
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
+
-
}
+
-
.ac_subitem h2{
+
-
font-size:22px;
+
-
font-weight:bold;
+
-
color:#fff;
+
-
padding: 40px 0px 0px 40px;
+
-
text-shadow:0px 0px 1px #000;
+
-
}
+
-
.ac_subitem ul{
+
-
padding:0px 40px;
+
-
}
+
-
.ac_subitem ul li{
+
-
margin:10px 0px;
+
}
}
-
.ac_subitem ul li a{
+
</style>
-
margin-top:60px;
+
 
-
background:#EDA;
+
 
-
opacity:1;
+
 
-
display:block;
+
 
-
height:20px;
+
    </head>
-
padding:0px 0px 5px;
+
    <body>
-
text-align:left;
+
 
-
line-height:20px;
+
<contenedor>
-
outline:none;
+
 
-
font-size:18px;
+
<div id="ac_background" class="ac_background">
-
font-weight:bold;
+
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/1/1c/Chicos.jpg" alt="Background"/>
-
text-shadow:1px 1px 1px #000; }
+
<div class="ac_overlay"></div>
-
.ac_subitem ul li:first-child{
+
<div class="ac_loading"></div>
-
font-size:14px;
+
</div>
-
text-transform:none;
+
<div id="ac_content" class="ac_content">
-
border-bottom:1px dotted #333;
+
<h1><span>Buenos Aires</span>iGem</h1>
-
padding-bottom:15px;
+
<div class="ac_menu">
-
margin-bottom:15px;
+
<ul>
-
}
+
<li>
-
span.ac_close{
+
<a href="http://s17.postimg.org/bp7obatz3/background.png">Project</a>
-
float:right;
+
<div class="ac_subitem">
-
margin:10px;
+
<span class="ac_close"></span>
-
width:11px;
+
<h2>Project</h2>
-
height:12px;
+
<ul>
-
cursor:pointer;
+
<li>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</li>
-
background:transparent url("https://static.igem.org/mediawiki/2013/b/bd/Close.png") no-repeat top left;
+
<li><a class="ps" href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })">Open the page programatically.</a>Pepe</li>
-
opacity:0.4;
+
<li>Smoked Salmon Terrine</li>
-
}
+
<li>Tuna Ceviche</li>
-
span.ac_close:hover{
+
<li>Wild Mushroom Flan</li>
-
opacity:1.0;
+
<li>Almond Bruschetta</li>
-
}
+
<li>Green Chilli Canapee</li>
-
.ac_footer{
+
<li>Artichoke Rucula Salad</li>
-
position:fixed;
+
</ul>
-
bottom:0px;
+
</div>
-
left:0px;
+
</li>
-
width:100%;
+
<li>
-
font-size:13px;
+
<a href="http://s17.postimg.org/bp7obatz3/background.png">Results</a>
-
background:#000;
+
<div class="ac_subitem">
-
opacity:0.9;
+
<span class="ac_close"></span>
-
height:20px;
+
<h2>Results</h2>
-
padding-bottom:5px;
+
<ul>
-
}
+
<li>Drops of rain could be heard hitting the pane, which made him feel quite sad.</li>
-
.ac_footer a{
+
<li>>Wild Sea Bass Filet</li>
-
padding:5px 10px;
+
<li>Linguini and Clams</li>
-
letter-spacing:1px;
+
<li>Shrimp and Crabmeat Alfredo</li>
-
text-shadow:1px 1px 1px #000;
+
<li>Broiled Stuffed Flounder </li>
-
color:#ddd;
+
<li>Mussels Marinara</li>
-
float:right;
+
<li>Grilled Mooloolaba Giant king prawns</li>
-
}
+
<li>Lobster Mornay</li>
-
.footer a:hover{
+
<li>Fresh Shrimp Tart</li>
-
color:#fff;
+
</ul>
-
}
+
</div>
-
.ac_footer a span{
+
</li>
-
font-weight:bold;
+
<li>
-
}
+
<a href="http://s17.postimg.org/bp7obatz3/background.png">Team</a>
-
.ac_footer a.ac_left{
+
<div class="ac_subitem">
-
float:left;
+
<span class="ac_close"></span>
-
}
+
<h2>Team</h2>
 +
<ul>
 +
<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
 +
<li>Ratatouille</li>
 +
<li>Le Tourin</li>
 +
<li>Wild Salmon Bruschetta</li>
 +
<li>Sweet Mustard Gratin</li>
 +
<li>Homemade Pizza Mediteranica</li>
 +
<li>Spanakopita Speciale</li>
 +
<li>Ricotta Spinach Cannelloni</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://s17.postimg.org/bp7obatz3/background.png">Desserts</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Desserts</h2>
 +
<ul>
 +
<li>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
 +
<li>New England Apple Crisp</li>
 +
<li>Southern Pecan Pie</li>
 +
<li>Brownie Fudge Sundae</li>
 +
<li>Strawberry Mousse Cake</li>
 +
<li>Vanilla Crème brûlée</li>
 +
<li>Lemon Sorbet</li>
 +
<li>Crunchy Almond Cake</li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://s17.postimg.org/bp7obatz3/background.png">Wines</a>
 +
<div class="ac_subitem">
 +
<span class="ac_close"></span>
 +
<h2>Wines</h2>
 +
<ul>
 +
<li>A small river named Duden flows by their place and supplies it with the necessary regelialia.</li>
 +
<li>CARM Douro Reserva</li>
 +
<li>Fontodi Colli della Toscana Centrale Flaccianello</li>
 +
<li>Alban Syrah Edna Valley Alban Estate Reva</li>
 +
<li>Zaca Mesa Syrah Santa Ynez Valley</li>
 +
<li>Quinta do Vallado Douro Reserva</li>
 +
<li>Viticcio Chianti Classico Riserva</li>
 +
<li>Avignonesi Vino Nobile di Montepulciano</li>
 +
</ul>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div class="ac_footer">
 +
iGem Bs As
 +
 +
</div>
 +
</div>
 +
<!-- The JavaScript -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>
 +
 
 +
    <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
 +
    <script>
 +
        /* Default pageslide, moves to the right */
 +
        $(".first").pageslide();
 +
       
 +
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
 +
        $(".second").pageslide({ direction: "left", modal: true });
 +
    </script>
 +
 
 +
<script>
 +
$(document).ready(function(){
 +
  $("li").click(function(){
 +
var liId = $(this).attr('id');
 +
var namePrev = liId + "Text";
 +
var element = document.getElementById(namePrev);
 +
element.style.display="block";
 +
 
 +
  });
 +
});
 +
</script> 
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
var $ac_background = $('#ac_background'),
 +
$ac_bgimage = $ac_background.find('.ac_bgimage'),
 +
$ac_loading = $ac_background.find('.ac_loading'),
 +
 +
$ac_content = $('#ac_content'),
 +
$title = $ac_content.find('h1'),
 +
$menu = $ac_content.find('.ac_menu'),
 +
$mainNav = $menu.find('ul:first'),
 +
$menuItems = $mainNav.children('li'),
 +
totalItems = $menuItems.length,
 +
$ItemImages = new Array();
 +
 +
/*
 +
for this menu, we will preload all the images.
 +
let's add all the image sources to an array,
 +
including the bg image
 +
*/
 +
$menuItems.each(function(i) {
 +
$ItemImages.push($(this).children('a:first').attr('href'));
 +
});
 +
$ItemImages.push($ac_bgimage.attr('src'));
 +
 
 +
 +
var Menu = (function(){
 +
var init = function() {
 +
loadPage();
 +
initWindowEvent();
 +
},
 +
loadPage = function() {
 +
/*
 +
1- loads the bg image and all the item images;
 +
2- shows the bg image;
 +
3- shows / slides out the menu;
 +
4- shows the menu items;
 +
5- initializes the menu items events
 +
*/
 +
$ac_loading.show();//show loading status image
 +
$.when(loadImages()).done(function(){
 +
$.when(showBGImage()).done(function(){
 +
//hide the loading status image
 +
$ac_loading.hide();
 +
$.when(slideOutMenu()).done(function(){
 +
$.when(toggleMenuItems('up')).done(function(){
 +
initEventsSubMenu();
 +
});
 +
});
 +
});
 +
});
 +
},
 +
showBGImage = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
//adjusts the dimensions of the image to fit the screen
 +
adjustImageSize($ac_bgimage);
 +
$ac_bgimage.fadeIn(1000, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
slideOutMenu = function() {
 +
/* calculate new width for the menu */
 +
var new_w = $(window).width() - $title.outerWidth(true);
 +
return $.Deferred(
 +
function(dfd) {
 +
//slides out the menu
 +
$menu.stop()
 +
.animate({
 +
width : new_w + 'px'
 +
}, 700, dfd.resolve);
 +
}
 +
).promise();
 +
},
 +
/* shows / hides the menu items */
 +
toggleMenuItems = function(dir) {
 +
return $.Deferred(
 +
function(dfd) {
 +
/*
 +
slides in / out the items.
 +
different animation time for each one.
 +
*/
 +
$menuItems.each(function(i) {
 +
var $el_title = $(this).children('a:first'),
 +
marginTop, opacity, easing;
 +
if(dir === 'up'){
 +
marginTop = '0px';
 +
opacity = 1;
 +
easing = 'easeOutBack';
 +
}
 +
else if(dir === 'down'){
 +
marginTop = '60px';
 +
opacity = 0;
 +
easing = 'easeInBack';
 +
}
 +
$el_title.stop()
 +
.animate({
 +
marginTop : marginTop,
 +
opacity : opacity
 +
}, 200 + i * 200 , easing, function(){
 +
if(i === totalItems - 1)
 +
dfd.resolve();
 +
});
 +
});
 +
}
 +
).promise();
 +
},
 +
initEventsSubMenu = function() {
 +
$menuItems.each(function(i) {
 +
var $item = $(this), // the <li>
 +
$el_title = $item.children('a:first'),
 +
el_image = $el_title.attr('href'),
 +
$sub_menu = $item.find('.ac_subitem'),
 +
$ac_close = $sub_menu.find('.ac_close');
 +
 +
/* user clicks one item : appetizers | main course | desserts | wines | specials */
 +
$el_title.bind('click.Menu', function(e) {
 +
$.when(toggleMenuItems('down')).done(function(){
 +
openSubMenu($item, $sub_menu, el_image);
 +
});
 +
return false;
 +
});
 +
/* closes the submenu */
 +
$ac_close.bind('click.Menu', function(e) {
 +
closeSubMenu($sub_menu);
 +
return false;
 +
});
 +
});
 +
},
 +
openSubMenu = function($item, $sub_menu, el_image) {
 +
$sub_menu.stop()
 +
.animate({
 +
height : '400px',
 +
marginTop : '-200px'
 +
}, 400, function() {
 +
//the bg image changes
 +
showItemImage(el_image);
 +
});
 +
},
 +
/* changes the background image */
 +
showItemImage = function(source) {
 +
//if its the current one return
 +
if($ac_bgimage.attr('src') === source)
 +
return false;
 +
 +
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
 +
$itemImage.insertBefore($ac_bgimage);
 +
adjustImageSize($itemImage);
 +
$ac_bgimage.fadeOut(1500, function() {
 +
$(this).remove();
 +
$ac_bgimage = $itemImage;
 +
});
 +
$itemImage.fadeIn(1500);
 +
},
 +
closeSubMenu = function($sub_menu) {
 +
$sub_menu.stop()
 +
.animate({
 +
height : '0px',
 +
marginTop : '0px'
 +
}, 400, function() {
 +
//show items
 +
toggleMenuItems('up');
 +
});
 +
},
 +
/*
 +
on window resize, ajust the bg image dimentions,
 +
and recalculate the menus width
 +
*/
 +
initWindowEvent = function() {
 +
/* on window resize set the width for the menu */
 +
$(window).bind('resize.Menu' , function(e) {
 +
adjustImageSize($ac_bgimage);
 +
/* calculate new width for the menu */
 +
var new_w = $(window).width() - $title.outerWidth(true);
 +
$menu.css('width', new_w + 'px');
 +
});
 +
},
 +
/* makes an image "fullscreen" and centered */
 +
adjustImageSize = function($img) {
 +
var w_w = $(window).width(),
 +
w_h = $(window).height(),
 +
r_w = w_h / w_w,
 +
i_w = $img.width(),
 +
i_h = $img.height(),
 +
r_i = i_h / i_w,
 +
new_w,new_h,
 +
new_left,new_top;
 +
 +
if(r_w > r_i){
 +
new_h = w_h;
 +
new_w = w_h / r_i;
 +
}
 +
else{
 +
new_h = w_w * r_i;
 +
new_w = w_w;
 +
}
 +
 +
$img.css({
 +
width : new_w + 'px',
 +
height : 400 + 'px',
 +
left : (w_w - new_w) / 2 + 'px',
 +
top : (w_h - new_h) / 2 + 'px'
 +
});
 +
},
 +
/* preloads a set of images */
 +
loadImages = function() {
 +
return $.Deferred(
 +
function(dfd) {
 +
var total_images = $ItemImages.length,
 +
loaded = 0;
 +
for(var i = 0; i < total_images; ++i){
 +
$('<img/>').load(function() {
 +
++loaded;
 +
if(loaded === total_images)
 +
dfd.resolve();
 +
}).attr('src' , $ItemImages[i]);
 +
}
 +
}
 +
).promise();
 +
};
 +
 +
return {
 +
init : init
 +
};
 +
})();
 +
 +
/*
 +
call the init method of Menu
 +
*/
 +
Menu.init();
 +
});
 +
</script>
 +
    </body>
 +
</html>

Revision as of 18:06, 21 May 2013

<!DOCTYPE html> Animated Content Menu with jQuery

Background

Buenos AiresiGem

  • Project

    Project

    • A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
    • Open the page programatically.Pepe
    • Smoked Salmon Terrine
    • Tuna Ceviche
    • Wild Mushroom Flan
    • Almond Bruschetta
    • Green Chilli Canapee
    • Artichoke Rucula Salad
  • Results

    Results

    • Drops of rain could be heard hitting the pane, which made him feel quite sad.
    • >Wild Sea Bass Filet
    • Linguini and Clams
    • Shrimp and Crabmeat Alfredo
    • Broiled Stuffed Flounder
    • Mussels Marinara
    • Grilled Mooloolaba Giant king prawns
    • Lobster Mornay
    • Fresh Shrimp Tart
  • Team

    Team

    • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
    • Ratatouille
    • Le Tourin
    • Wild Salmon Bruschetta
    • Sweet Mustard Gratin
    • Homemade Pizza Mediteranica
    • Spanakopita Speciale
    • Ricotta Spinach Cannelloni
  • Desserts

    Desserts

    • It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
    • New England Apple Crisp
    • Southern Pecan Pie
    • Brownie Fudge Sundae
    • Strawberry Mousse Cake
    • Vanilla Crème brûlée
    • Lemon Sorbet
    • Crunchy Almond Cake
  • Wines

    Wines

    • A small river named Duden flows by their place and supplies it with the necessary regelialia.
    • CARM Douro Reserva
    • Fontodi Colli della Toscana Centrale Flaccianello
    • Alban Syrah Edna Valley Alban Estate Reva
    • Zaca Mesa Syrah Santa Ynez Valley
    • Quinta do Vallado Douro Reserva
    • Viticcio Chianti Classico Riserva
    • Avignonesi Vino Nobile di Montepulciano
iGem Bs As

Retrieved from "http://2013.igem.org/Team:Buenos_Aires/css/style.css"