Team:UC Davis/Team
From 2011.igem.org
(Difference between revisions)
Line 36: | Line 36: | ||
<head> | <head> | ||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | ||
+ | |||
+ | <script> | ||
+ | /* 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> | <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> | ||
+ | |||
+ | /*<style> | ||
* { margin: 0px; padding: 0px; } | * { margin: 0px; padding: 0px; } | ||
Line 66: | Line 283: | ||
#nav { | #nav { | ||
background: #000000; | background: #000000; | ||
- | width: 450px; / | + | width: 450px; |
+ | //height: 56px; | ||
position: 50% 0%; | position: 50% 0%; | ||
float:top 25px; | float:top 25px; |
Revision as of 23:00, 22 June 2011
Hello
What we did
(Provide proper attribution for all work)