Team:UNAM-Genomics Mexico/essais/themeAlpha/template

From 2011.igem.org

(Difference between revisions)
(Replaced content with "DELETE ME")
 
Line 1: Line 1:
-
<html>
+
DELETE ME
-
<head>
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+
-
 
+
-
<script type="text/javascript">
+
-
 
+
-
/***********************************************
+
-
* Gooey Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
+
-
* This notice MUST stay intact for legal use
+
-
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
+
-
***********************************************/
+
-
 
+
-
/* jQuery Gooey Menu
+
-
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
+
-
* Author: Dynamic Drive at http://www.dynamicdrive.com/
+
-
* Visit http://www.dynamicdrive.com/ for full source code
+
-
*/
+
-
 
+
-
jQuery.noConflict()
+
-
 
+
-
jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
+
-
if (s == undefined) s = 1.70158;
+
-
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+
-
}
+
-
})
+
-
 
+
-
 
+
-
var gooeymenu={
+
-
effectmarkup: '<li class="active"></li>',
+
-
 
+
-
setup:function(usersetting){
+
-
jQuery(function($){ //on document.ready
+
-
function snapback(dur){
+
-
if ($selectedlink.length>0)
+
-
$effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
+
-
}
+
-
var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
+
-
var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
+
-
var $menulinks=$menu.find('li a')
+
-
var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
+
-
$effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
+
-
if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
+
-
var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
+
-
}
+
-
else{
+
-
var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
+
-
}
+
-
setting.defaultselectedBool=$selectedlink.length
+
-
$menulinks.mouseover(function(){
+
-
clearTimeout(setting.snapbacktimer)
+
-
var $target=$(this)
+
-
//alert($target.position().left+" "+$target.get(0).offsetLeft)
+
-
 
+
-
$effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
+
-
if (setting.defaultselectedBool==0) //if there is no default selected menu item
+
-
$selectedlink=$target //set current mouseover element to selected element
+
-
})
+
-
if ($selectedlink.length>0){
+
-
snapback(0)
+
-
$menu.mouseleave(function(){
+
-
setting.snapbacktimer=setTimeout(function(){
+
-
snapback(setting.fxtime)
+
-
}, setting.snapdelay)
+
-
})
+
-
}
+
-
$(window).bind('resize', function(){
+
-
snapback(setting.fxtime)
+
-
})
+
-
})
+
-
}
+
-
}
+
-
 
+
-
</script>
+
-
<style>
+
-
hr{
+
-
margin:50px 0;
+
-
color:#eee;
+
-
}
+
-
 
+
-
ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
+
-
_visibility: hidden; /*IE6 rule*/
+
-
}
+
-
 
+
-
/* ######### Gel Menu CSS ######### */
+
-
 
+
-
ul.gelbuttonmenu{
+
-
position:relative;
+
-
padding: 0;
+
-
margin: 0;
+
-
margin-bottom:1em;
+
-
text-align: center; //set value to "left", "center", or "right"*/
+
-
}
+
-
 
+
-
ul.gelbuttonmenu li{
+
-
display: inline;
+
-
}
+
-
 
+
-
ul.gelbuttonmenu li a{
+
-
color: black;
+
-
font-weight:bold;
+
-
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
+
-
margin-right: 20px; /*spacing between each menu link*/
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
+
-
position:absolute;
+
-
width:0;
+
-
background:lightblue;
+
-
background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/* ######### Solid Block Menu CSS ######### */
+
-
 
+
-
 
+
-
ul.solidblockmenu{
+
-
margin: 0;
+
-
margin-bottom:1em;
+
-
padding: 0;
+
-
list-style: none;
+
-
position:relative;
+
-
text-align: center; //set value to "left", "center", or "right"*/
+
-
}
+
-
 
+
-
ul.solidblockmenu li{
+
-
display: inline;
+
-
}
+
-
 
+
-
ul.solidblockmenu li a{
+
-
font: bold 14px Arial, Verdana, sans-serif;
+
-
color: black;
+
-
padding: 8px;
+
-
margin-right: 20px; /*spacing between each menu link*/
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
+
-
position:absolute;
+
-
width:0;
+
-
border:1px solid black;
+
-
-moz-border-radius: 4px;
+
-
-webkit-border-radius: 4px;
+
-
border-radius:4px;
+
-
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
+
-
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
+
-
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
+
-
background:#d7ed93;
+
-
background: -moz-linear-gradient(top, #d7ed93, #fff);
+
-
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
+
-
background: linear-gradient(top, #d7ed93, #fff);
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/* ######### Thick Underline Menu CSS ######### */
+
-
 
+
-
 
+
-
ul.underlinemenu{
+
-
margin: 0;
+
-
margin-bottom:1em;
+
-
padding: 0;
+
-
list-style: none;
+
-
position:relative;
+
-
text-align: center; //set value to "left", "center", or "right"*/
+
-
}
+
-
 
+
-
ul.underlinemenu li{
+
-
display: inline;
+
-
}
+
-
 
+
-
ul.underlinemenu li a{
+
-
font: bold 14px Arial, Verdana, sans-serif;
+
-
color: black;
+
-
padding: 8px;
+
-
margin-right: 20px; /*spacing between each menu link*/
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
 
+
-
ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
+
-
position:absolute;
+
-
width:0;
+
-
border-bottom:5px solid navy;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/* ######### Frame Menu CSS ######### */
+
-
 
+
-
 
+
-
ul.framemenu{
+
-
margin: 0;
+
-
margin-bottom:1em;
+
-
padding: 0;
+
-
list-style: none;
+
-
position:relative;
+
-
text-align: center; //set value to "left", "center", or "right"*/
+
-
}
+
-
 
+
-
ul.framemenu li{
+
-
display: inline;
+
-
}
+
-
 
+
-
ul.framemenu li a{
+
-
font: bold 14px Arial, Verdana, sans-serif;
+
-
color: black;
+
-
padding: 12px 10px 5px 18px;
+
-
margin-right: 10px; /*spacing between each menu link*/
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
 
+
-
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
+
-
position:absolute;
+
-
width:0;
+
-
border:4px solid orange;
+
-
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
+
-
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
+
-
box-shadow: 0 0 4px rgba(120,120,120,0.7);
+
-
}
+
-
</style>
+
-
</head>
+
-
 
+
-
 
+
-
</html>
+
-
{{{content}}}
+

Latest revision as of 00:35, 15 July 2011

DELETE ME

Retrieved from "http://2011.igem.org/Team:UNAM-Genomics_Mexico/essais/themeAlpha/template"