Template:Queens Canada/Header
From 2012.igem.org
(Difference between revisions)
Line 4: | Line 4: | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> | ||
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Smoothscroll?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Smoothscroll?action=raw&ctype=text/js"></script> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
Line 488: | Line 489: | ||
display:inline; | display:inline; | ||
float:right; | float:right; | ||
+ | |||
+ | } | ||
+ | ul#submenu { | ||
+ | position: fixed; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | top: 0px; | ||
+ | right: 200px; | ||
+ | list-style: none; | ||
+ | z-index:999999; | ||
+ | } | ||
+ | ul#submenu li { | ||
+ | display:inline; | ||
+ | float:left; | ||
+ | width:100px; | ||
+ | margin-left:1px; | ||
+ | |||
+ | } | ||
+ | ul#submenu li a { | ||
+ | display: block; | ||
+ | font-weight:bold; | ||
+ | text-shadow:1px 1px 1px #fff; | ||
+ | float:left; | ||
+ | width: 100px; | ||
+ | height: 35px; | ||
+ | color:#603d05; | ||
+ | background:transparent url(item.png) no-repeat bottom right; | ||
+ | text-decoration:none; | ||
+ | text-align:center; | ||
+ | padding-top:80px; | ||
+ | margin-top: -40px; | ||
+ | cursor:pointer; | ||
+ | |||
+ | } | ||
+ | ul#submenu li a:hover{ | ||
} | } | ||
Line 519: | Line 555: | ||
</div> | </div> | ||
+ | <div id="submenu container"> | ||
+ | <ul id="submenu"> | ||
+ | <li class="home"><a title="Home">Home</a></li> | ||
+ | <li class="about"><a title="About">About</a></li> | ||
+ | <li class="search"><a title="Search">Search</a></li> | ||
+ | <li class="photos"><a title="Photos">Photos</a></li> | ||
+ | <li class="contact"><a title="Contact">Contact</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | var d=300; | ||
+ | $('#submenu a').each(function(){ | ||
+ | var $this = $(this); | ||
+ | var r=Math.floor(Math.random()*41)-20; | ||
+ | $this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'}); | ||
+ | $('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'}); | ||
+ | $this.stop().animate({ | ||
+ | 'marginTop':'-70px' | ||
+ | },d+=150); | ||
+ | }); | ||
+ | $('#submenu > li').hover( | ||
+ | function () { | ||
+ | var $this = $(this); | ||
+ | $('a',$this).stop().animate({ | ||
+ | 'marginTop':'-40px' | ||
+ | },200); | ||
+ | }, | ||
+ | function () { | ||
+ | var $this = $(this); | ||
+ | $('a',$this).stop().animate({ | ||
+ | 'marginTop':'-70px' | ||
+ | },200); | ||
+ | } | ||
+ | ) | ||
+ | }); | ||
+ | </script> | ||
<a href="#top-section"> | <a href="#top-section"> | ||
<div id="upbutton"> | <div id="upbutton"> |
Revision as of 19:20, 12 June 2012